:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #202020; background: #f5f2e9; }
* { box-sizing: border-box; }
body { margin: 0; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem max(1rem, calc((100vw - 68rem) / 2)); background: #222; }
.site-header a { color: #ffdb55; }
.brand { font: italic 1.5rem Georgia, serif; }
main { max-width: 68rem; margin: auto; padding: 2rem 1rem 4rem; }
h1 { font: 2.3rem Georgia, serif; margin: 0 0 .7rem; }
.intro { max-width: 42rem; }
form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; padding: 1.5rem; background: white; border: 1px solid #d8d0bc; border-radius: .5rem; }
label { display: grid; gap: .35rem; font-weight: 600; }
input, button { min-height: 2.8rem; padding: .6rem .8rem; font: inherit; }
input { border: 1px solid #686868; border-radius: .3rem; }
button { border: 0; border-radius: .3rem; background: #ffce35; color: #181818; font-weight: 700; cursor: pointer; }
button:hover, button:focus-visible { background: #ecb900; }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.suite { background: white; border: 1px solid #d8d0bc; border-left: .65rem solid var(--suite-color); border-radius: .4rem; padding: 1rem; }
.suite h2 { font: 1.35rem Georgia, serif; margin: 0 0 .4rem; }
.suite p { margin: .4rem 0; }
.status { font-weight: 700; }
.total { font-weight: 700; font-size: 1.15rem; }
.fine-print { max-width: 46rem; margin-top: 2rem; color: #414141; }
a { color: #17486b; }
@media (max-width: 36rem) { form { display: grid; } input, button { width: 100%; } }