/* {{{ DEFAULT }}} */
body > * {margin-inline: var(--mx-section); transition: var(--trans-4);}
section {border-radius: var(--br-section);}

/* {{{ TOP BAR }}} */
.topbar {padding-block: 0.625rem; position: relative; background-color: var(--c-dark); margin-inline: 0;}
.topbar .text {text-align: center;}
.topbar::before,
.topbar::after {position: absolute; top: 100%; width: 1rem; height: 1rem; background-color: var(--c-dark); z-index: -1; content: '';}
.topbar::before {left: 0;}
.topbar::after {right: 0;}
.topbar .text :where(p, a) {font-size: var(--fs-xs, 14px); color: #fff;}
.topbar .text p a {text-decoration: underline;}

/* {{{ HEADER }}} */
header {padding: 16px var(--mx-section) 18px; position: sticky; top: 0; background-color: #fff; border-radius: var(--br-section) var(--br-section) 0 0; margin: 0 0 1.25rem; overflow: hidden; z-index: 10; transition: var(--trans-4);}
header.sticky {border-radius: 0;}
header .container {max-width: var(--container-max); padding: 0;}
nav {display: flex; align-items: center; justify-content: space-between;}
nav .logo {font-size: calc(var(--fs-md, 25px) + 3.2px); font-weight: 600; line-height: 0.86; letter-spacing: -0.5px; color: #000;}
nav .btns {display: flex; align-items: center; gap: 17px; background-color: #fff; padding: 6px 6px 6px 10px; border-radius: 100px;}
nav .btns a {font-size: var(--fs-xs, 14px);}
nav .btns a:hover {text-decoration: underline;}

@media only screen and (max-width: 575px) {
    header {margin-bottom: 0.75rem;}
    header .container {max-width: 100%;}
    nav .btns {gap: 12px; padding: 5px 5px 5px 8px;}
}

@media only screen and (max-width: 360px) {
	header {margin: 0;}
    nav .btns {gap: 0.625rem; padding: 2px 2px 2px 10px;}
}