*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.75 var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sky-mid); text-decoration: none; transition: color .2s; }
a:hover { color: var(--sky-dark); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 400; margin: 0 0 .5em; line-height: 1.35; }
h1, h2 { color: var(--teal); }
h3, h4, h5, h6 { color: var(--navy); }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); }
h4 { font-size: 21px; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--sky-mid); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; top: 0; transform: translateY(-110%); transition: transform .15s; right: 12px; z-index: 1000; background: var(--gold); color: var(--navy-deep); padding: 8px 14px; border-radius: 0 0 4px 4px; }
.skip-link:focus { transform: none; }

.section-title { color: var(--navy); font-size: clamp(26px, 3vw, 36px); margin-bottom: 30px; }
.section-title--light { color: #fff; }

.btn { display: inline-block; padding: 12px 30px; background: #f7f7f7; color: #747474; border: 1px solid #ececec; border-radius: var(--radius); font-size: 15px; line-height: 1.5; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: #efefef; color: #555; }
.btn--small { padding: 6px 16px; font-size: 13px; background: #fff; }
.btn--theme { background: var(--sky); border-color: var(--sky); color: #fff; }
.btn--theme:hover { background: var(--sky-mid); color: #fff; }

input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], textarea, select {
    width: 100%; background: transparent; color: #626262; border: 2px solid var(--sky); border-radius: var(--radius); padding: 10px 14px;
}
input:focus, textarea:focus, select:focus { border-color: #45558b; color: #45558b; outline: none; }

/* Inner page head (BeTheme "Subheader") */
.subheader { background: #fff; border-bottom: 1px solid #ececec; }
.subheader__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 40px; padding-bottom: 40px; }
.subheader__title { margin: 0; color: #888; font-size: 25px; line-height: 1.4; }
.crumbs { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 40%; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--sky-mid); }

/* Scroll reveal (calm motion level). Content is visible without JS and with reduced motion. */
.js .reveal { opacity: .1; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

.notice { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; }
.notice ul { margin: 0; padding-inline-start: 18px; }
.notice--ok { background: #e6f5ee; color: #11663f; border: 1px solid #bfe3d0; }
.notice--err { background: #fdecee; color: #9b1c2c; border: 1px solid #f3c2c9; }
.empty { padding: 40px 0; text-align: center; }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 30px 0 50px; }
.pager a, .pager span { min-width: 40px; padding: 8px 12px; text-align: center; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.pager .is-current, .pager a:hover { background: var(--sky); border-color: var(--sky); color: #fff; }

@media (max-width: 767px) {
    .subheader__in { flex-direction: column; align-items: flex-start; padding-top: 24px; padding-bottom: 24px; gap: 8px; }
    .subheader__title { font-size: 21px; }
    .crumbs { max-width: none; }
}