:root {
  color-scheme: light;
  color: #241d32;
  background: #f7f5ef;
  font: 100%/1.62 system-ui, sans-serif;
}
body { margin: 0; }
.wrap { max-width: 42rem; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 2.25rem); }
header { padding-block: 1.5rem; }
.brand { display: inline-flex; gap: .7rem; align-items: center; color: inherit; text-decoration: none; font-weight: 650; }
.brand img { border-radius: .5rem; }
main { padding-block: clamp(2rem, 6vw, 4rem); }
.home { padding-top: clamp(3.5rem, 11vw, 7rem); }
h1 { font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: 1.03; letter-spacing: -.055em; margin: 0 0 1.35rem; }
h2 { font-size: 1.2rem; line-height: 1.4; margin: 2.05rem 0 .4rem; }
p { margin: 0 0 .85rem; }
.tag { font-size: .88rem; font-weight: 700; color: #54349e; }
.intro { color: #534962; font-size: clamp(1.15rem, 3vw, 1.35rem); line-height: 1.5; }
footer { padding-block: 0 2.25rem; }
nav { border-top: 1px solid #d8d1e0; padding-top: 1.15rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
a { color: #54349e; text-underline-offset: .17em; }
a:focus-visible { outline: 2px solid #54349e; outline-offset: 4px; }