.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }

a { color: var(--color-accent); text-decoration: none; font-weight: 400; transition: opacity 0.2s var(--ease); }
a:hover { opacity: 0.75; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1 { font-family: var(--font-head); font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; color: var(--color-text); }
h2 { font-family: var(--font-head); font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem); line-height: 1.1; font-weight: 600; margin-block: var(--space-16) var(--space-4); letter-spacing: -0.01em; color: var(--color-text); }
h3 { font-size: 1.25rem; font-weight: 600; margin-block: var(--space-6) var(--space-2); letter-spacing: -0.005em; color: var(--color-text); }
h4 { font-size: 1.0625rem; font-weight: 600; margin-block: var(--space-4) var(--space-2); color: var(--color-text); }
p { margin-block: var(--space-3); color: var(--color-text-muted); }
ul:not([class]) { list-style: disc; padding-left: 1.4rem; margin-block: var(--space-3); color: var(--color-text-muted); }
ol:not([class]) { list-style: decimal; padding-left: 1.4rem; margin-block: var(--space-3); color: var(--color-text-muted); }
strong { color: var(--color-text); font-weight: 600; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-text);
  color: white;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus { left: var(--space-2); }

header.site-header {
  padding-block: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
header.site-header .container { display: flex; align-items: center; }
header.site-header .brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}
header.site-header .brand:hover { opacity: 1; }
header.site-header .logo-img { height: 28px; width: auto; display: block; }

footer.site-footer {
  padding-block: var(--space-16);
  margin-top: var(--space-20);
  background: var(--color-surface-elevated);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
footer.site-footer .container { display: grid; gap: var(--space-4); }
footer.site-footer a { color: var(--color-text-muted); }
footer.site-footer a:hover { color: var(--color-text); opacity: 1; }
footer.site-footer p { margin: 0; }