:root {
  color-scheme: dark;
  background: #18231c;
  color: #f4efde;
  font: 1rem/1.5 system-ui, sans-serif;
}

body { margin: 0; }
main { max-width: 42rem; margin: 0 auto; padding: clamp(1rem, 6vw, 4rem) 1rem; }
header { border-bottom: 1px solid #687660; padding-bottom: 1rem; }
h1, h2 { font-family: Georgia, serif; font-weight: normal; margin: 0; }
h1 { font-size: clamp(2.25rem, 8vw, 4rem); }
h2 { font-size: 2rem; }
p { margin: .6rem 0; }
.eyebrow { color: #e6c378; letter-spacing: .15em; text-transform: uppercase; font-size: .75rem; }
nav, .tabs, .account { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
nav { margin: 1.5rem 0; }
section { padding: clamp(1rem, 4vw, 1.75rem); background: #202e25; border: 1px solid #687660; border-radius: .5rem; }
button, .button, input { font: inherit; border: 1px solid #869687; border-radius: .3rem; padding: .5rem .8rem; }
button, .button { background: #324639; color: #f4efde; text-decoration: none; cursor: pointer; }
.primary, button[aria-pressed="true"] { background: #e6c378; border-color: #e6c378; color: #202017; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid #f3d486; outline-offset: 3px; }
input { background: #17241c; color: inherit; box-sizing: border-box; width: 100%; }
form, label { display: grid; gap: .35rem; }
form { gap: .75rem; margin-top: 1rem; max-width: 23rem; }
form button { justify-self: start; }
ul { list-style: none; margin: .75rem 0; padding: 0; }
li a { display: block; margin-bottom: .5rem; max-width: 22rem; }
#message { color: #ffdda4; }
[hidden] { display: none; }