@font-face {
  font-family: Melodrama;
  src: url('assets/fonts/Melodrama-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
:root { color-scheme: dark; background: #080808; color: #f1eddf; }
body { margin: 0; font: 17px/1.65 system-ui, sans-serif; }
header, main { width: min(86%, 46rem); margin-inline: auto; }
header { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid #f1eddf45; }
header a { display: inline-flex; align-items: center; min-height: 44px; }
main { padding-block: clamp(3rem, 10vw, 7rem); }
h1 { font: 500 clamp(3.3rem, 9vw, 6.2rem)/.98 Melodrama, Georgia, serif; margin: 0 0 2rem; }
h2 { font-size: 1rem; margin-block: 2.25rem .5rem; }
p { margin: 0 0 1rem; color: #d5cec1; }
a { color: inherit; text-underline-offset: .25em; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid #f1eddf; outline-offset: 5px; }