* { box-sizing: border-box }
:root { color-scheme: light; font: 100%/1.55 system-ui, sans-serif; color: #202b35; background: #f5f6f8; --blue: #164b83; --line: #d1d8df }
body { margin: 0 }
a { color: var(--blue); text-underline-offset: .17em }
a:hover { text-decoration-thickness: .14em }
:focus-visible { outline: 3px solid #996200; outline-offset: 3px }
header { background: #173550; color: white }
header a { color: white }
.bar, main, .foot { max-width: 66rem; margin: auto; padding-inline: clamp(1rem, 4vw, 2.5rem) }
.bar { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 2rem; padding-block: .75rem }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 750; text-decoration: none }
nav ul, footer ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none }
main { padding-block: 1.8rem 3rem; min-height: 63vh }
h1, h2, h3 { color: #183550; line-height: 1.22 }
h1 { margin: .45rem 0 .65rem; font-size: clamp(1.9rem, 4vw, 2.55rem) }
h2 { margin-top: 1.8rem; font-size: 1.35rem }
h3 { font-size: 1.08rem }
p { max-width: 69ch }
.crumb, small, .hint { color: #485864 }
.crumb { font-size: .88rem }
.search, .calculator { padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: 5px; background: white; max-width: 46rem; margin-block: 1.25rem }
.search label, .field label { display: block; font-weight: 650 }
.search label { margin-bottom: .4rem }
.field label { margin-bottom: .25rem }
.field { margin-bottom: 1rem }
.hint { display: block; margin-top: .3rem; font-size: .875rem }
input, select, button { font: inherit; min-height: 2.75rem; border-radius: 4px }
input, select { width: 100%; border: 1px solid #8492a0; padding: .5rem .65rem; color: inherit; background: white }
.actions, .search-line { display: flex; flex-wrap: wrap; gap: .6rem }
.search-line input { flex: 1 1 12rem }
button { cursor: pointer; padding: .5rem 1rem; color: white; background: var(--blue); border: 1px solid var(--blue); font-weight: 650 }
button:hover { filter: brightness(.9) }
button[type=reset] { color: var(--blue); background: white }
.catalog { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)) }
.catalog section { background: white; border: 1px solid var(--line); border-radius: 5px; padding-inline: 1rem }
.catalog h3 { margin-bottom: .5rem }
.link-list { padding-left: 1.2rem }
.link-list li { padding-block: .22rem }
#results:not(:empty) { border-left: 4px solid var(--blue); margin-top: 1.4rem; padding: .1rem .9rem .5rem; background: #edf3fa; overflow-wrap: anywhere }
#results h2 { margin-top: .8rem }
dl { margin: 0 }
dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line) }
dd { margin: 0; font-weight: 650 }
#error { color: #92231d }
article { max-width: 47rem }
footer { border-top: 1px solid var(--line); background: #e9eef3 }
.foot { padding-block: 1rem 1.5rem }
.skip { position: absolute; inset: .25rem auto auto .25rem; padding: .5rem; color: var(--blue); background: white; z-index: 2 }
.skip:not(:focus) { clip-path: inset(50%) }
[hidden] { display: none !important }