:root { color: #271b17; background: #f9f3ee; font: 17px/1.5 system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #522923; color: white; display: flex; justify-content: space-between; align-items: center; padding: 1rem max(1.25rem, calc((100% - 68rem)/2)); }
.wordmark { font-size: 1.25rem; font-weight: 750; }
main { width: min(68rem, calc(100% - 2.5rem)); margin: 2rem auto; }
h1 { font-size: 1.65rem; line-height: 1.2; }
form, #panel { background: white; border: 1px solid #e0d5ce; border-radius: .7rem; padding: 1.2rem; }
form { max-width: 24rem; display: grid; gap: .85rem; }
label { display: grid; gap: .3rem; }
input, button { font: inherit; padding: .45rem .7rem; border-radius: .35rem; border: 1px solid #a98276; }
button { background: #fff9f5; color: #522923; cursor: pointer; }
button[aria-current="page"], form button { background: #773529; color: white; }
button:focus-visible, input:focus-visible { outline: 3px solid #de823a; outline-offset: 2px; }
nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid #e0d5ce; vertical-align: top; }
thead { background: #f9f3ee; }
[hidden] { display: none !important; }