:root {
  color-scheme: dark;
  background: #111d21;
  color: #f5f1e6;
  font: 1rem/1.6 system-ui, sans-serif;
}

body { margin: 0; }
main { max-width: 42rem; margin: auto; padding: clamp(2rem, 8vw, 6rem) 1.5rem 3rem; }
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 700; margin-bottom: 3rem; }
.mark { display: grid; grid-template-columns: repeat(2, .55rem); gap: .24rem; }
.mark i { background: #e6ca85; border-radius: 50%; aspect-ratio: 1; }
.mark i:nth-child(2) { background: #7fbde8; border-radius: 2px; }
.eyebrow { color: #e6ca85; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
h1, h2 { font-family: Georgia, serif; font-weight: 500; line-height: 1.1; }
h1 { font-size: clamp(2.6rem, 9vw, 4.7rem); margin: .3em 0; }
h2 { font-size: 1.7rem; }
p { color: #c7d5d2; max-width: 65ch; }
a { color: #f0d696; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid #7fbde8; outline-offset: 4px; }
.button { display: inline-block; border-radius: .45rem; margin: .5rem 0; padding: .65rem 1rem; color: #111d21; background: #e6ca85; text-decoration: none; font-weight: 700; }
section, footer { border-top: 1px solid #415456; margin-top: 2rem; padding-top: 1rem; }
footer { display: flex; flex-wrap: wrap; gap: 1rem; }