/* Crossfade the big surfaces when the theme changes, instead of an
   instant flip. Interactive elements already have their own hover
   transitions defined in their component files, so this only covers the
   ones that don't. NOTE: this selector list intentionally spans multiple
   components (navbar, footer, section, profile-pic) — it is a single
   cross-cutting "theme transition" concern, kept together here rather
   than split across component files. */
body,
.navbar,
footer,
section,
.profile-pic{
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; }

h1, h2, h3{
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section{ padding: clamp(4rem, 10vw, 8rem) 0; }

.section-head{
  max-width: 640px;
  margin: 0 0 3rem 0;
}

.section-head h2{
  font-size: clamp(1.9rem, 2.6vw + 1rem, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-head p{
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0.75rem 0 0 0;
  max-width: 46ch;
}

/* ============ SKIP LINK ============ */
.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 2000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus{ left: 0; }

/* ============ FOCUS ============ */
a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}