/* Shared header: page typography must not change the wordmark or navigation. */
body > .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 12px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 0;
    border-bottom: 1px solid #c4cebf;
    color: #263a32;
    font: 500 14px/1.4 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
}
.page-calendar > .site-header {width:calc(100% - 2 * clamp(16px, 5vw, 72px));padding-top:44px;}
.site-header .brand {
    display: inline-flex;
    align-items: baseline;
    justify-self: start;
    min-height: 44px;
    color: #263a32;
    font: 400 29px/1.4 Georgia, serif;
    letter-spacing: -1.6px;
    text-decoration: none;
    white-space: nowrap;
}
.site-header .brand-divider {margin-inline: 5px;color:#7c896d;font-weight:400;letter-spacing:0;}
.site-header .brand-crew {color:#839660;}
.site-header .site-logout {margin:0;}
body > .site-header .site-logout button {
    margin:0;
    min-height:44px;
    padding:10px 16px;
    border:1px solid #899985;
    border-radius:8px;
    background:transparent;
    color:#263a32;
    font:inherit;
}
.site-header .site-nav {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    align-items:stretch;
    gap:6px;
    min-width:0;
    padding:4px;
    font:inherit;
}
.site-header .site-nav a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:44px;
    padding:10px 6px;
    border:1px solid transparent;
    border-radius:8px;
    color:#263a32;
    font:inherit;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
}
.site-header .site-nav a:hover {background:#e8ede1;}
.site-header .site-nav a[aria-current="page"] {background:#dce7d8;border-color:#a4b397;}
.site-header .site-nav .unread-badge {flex-shrink:0;}
@media(max-width:1000px) {
    .site-header .site-nav {grid-template-columns:repeat(7, 140px);overflow-x:auto;overscroll-behavior-inline:contain;scroll-padding-inline:4px;}
}
@media(max-width:600px) {
    body > .site-header {gap:12px;padding-block:16px;}
    .page-calendar > .site-header {padding-top:40px;}
}
@media print {body > .site-header {display:none;}}