html {
  scroll-behavior: smooth;
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

header {
  position: relative;
  z-index: 900;
}

main,
footer {
  position: relative;
  z-index: 1;
}

.text-accent {
  color: var(--accent);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 160ms ease;
}

a:hover,
a:focus {
  text-decoration: underline;
}

a:focus,
button:focus,
.navbar-burger:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.content {
  max-width: var(--container-max);
}

.title.is-1 { font-size: var(--step-5); line-height: 1.1; }
.title.is-2 { font-size: var(--step-4); line-height: 1.15; }
.title.is-3 { font-size: var(--step-3); line-height: 1.2; }
.title.is-4 { font-size: var(--step-2); line-height: 1.25; }
.title.is-5 { font-size: var(--step-1); }
.title.is-6 { font-size: var(--step-0); }

.subtitle {
  margin-top: var(--space-3);
  font-size: clamp(1.1rem, 0.8vw + 1rem, 1.35rem);
  color: var(--muted);
}
.subtitle.is-5 {
  font-size: clamp(1.05rem, 0.7vw + 1rem, 1.3rem);
}
.is-size-5 {
  font-size: clamp(1.05rem, 0.7vw + 1rem, 1.3rem);
  line-height: 1.7;
}
p { font-size: var(--step-0); }