/* why: masthead = hairline row, nav left, Search right; footer = legal line + two columns */
/* trap: sticky dies under any overflow:hidden ancestor; body uses overflow-x:clip */
/* ref: mega-menu panel + pane in megamenu.css */
:root{--mast-h:81px;--mast-off:var(--mast-h)}
html.mast-away{--mast-off:0px}
html{scroll-padding-top:var(--mast-h)}
.mast{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;background:var(--bg)}
.admin-bar .mast{top:32px}
/* why: bar slides out on scroll down, back on scroll up (mast-autohide.js)
   ref: --mast-off = live bar height for sticky offsets
   trap: transform only while away; else the fixed mobile mega overlay pins to the bar */
.mast{transition:transform var(--panel) var(--ease)}
html.mast-away .mast{transform:translateY(-100%)}
html.mast-away .admin-bar .mast,.admin-bar html.mast-away .mast{transform:translateY(calc(-100% - 32px))}
@media(prefers-reduced-motion:reduce){.mast{transition:none}}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);min-height:80px}
.mast .logo img{height:40px;width:auto}
.mast-actions{display:flex;align-items:center;gap:var(--s-12)}
.login-pick{position:relative;flex:none}
.login-pick .nav-login{display:inline-flex}
.login-pick .login-menu{position:absolute;top:calc(100% + var(--s-8));right:0;min-width:15rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-container);padding:var(--s-4) var(--s-16);list-style:none;margin:0;z-index:2}
.login-pick .login-menu[hidden]{display:none}
.login-pick .login-menu a{display:block;padding:var(--s-12) 0;color:var(--ink);font-size:var(--t-14);font-weight:500;text-decoration:none}
.login-pick .login-menu a:hover{color:var(--accent-ink)}
.login-pick .login-menu li+li{border-top:1px solid var(--line)}
@media(max-width:1023px){
:root{--mast-h:65px}
.mast .wrap{min-height:64px}
.mast .logo img{height:32px}
}
.foot{border-top:1px solid var(--line);margin-top:var(--s-96);padding:var(--s-48) 0 var(--s-64);font-size:var(--t-13);color:var(--ink-2)}
.foot .wrap{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-48)}
.foot p{max-width:52rem;margin:0}
.foot .footer-links a{color:var(--ink)}
.foot .footer-links{display:flex;align-content:flex-start;flex-wrap:wrap;gap:var(--s-8) var(--s-24)}
@media(max-width:760px){.foot{margin-top:var(--s-64)}.foot .wrap{grid-template-columns:1fr;gap:var(--s-24)}}
.about+.foot{margin-top:0}
.member-pick{display:flex;align-items:center;gap:var(--s-12)}
.member-pick[hidden]{display:none}
.member-pick__in{font-size:var(--t-14);font-weight:500;color:var(--ink);text-decoration:none}
.member-pick__in:hover{color:var(--accent-ink);text-decoration:underline}
.member-pick__name{font-size:var(--t-14);color:var(--ink-2);max-width:10rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.member-pick__name:hover{color:var(--ink);text-decoration:underline}
.member-pick__out{background:none;cursor:pointer;font-family:inherit}
.member-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-control);background:none;color:var(--ink);cursor:pointer;text-decoration:none}
.member-ic:hover{background:var(--tint);color:var(--ink)}
.member-ic svg{display:block;width:20px;height:20px}
.member-bell{display:inline-flex}
@media(max-width:640px){.member-pick__name,.member-pick__up{display:none}.mast-actions{gap:var(--s-8)}.member-pick{gap:var(--s-4)}}
/* why: signed-in phone bar fits without the flex-squashed logo (was 87x32 at 390) */
/* trap: logo shrinks only while signed in (has .member-ic) so signed-out stays 100x32 */
.mast .logo{flex:none}
@media(max-width:380px){.mast:has(.member-ic) .logo img{height:28px}.mast:has(.member-ic) .wrap{gap:var(--s-8)}.mast:has(.member-ic) .mast-actions .btn--sm{padding:0 var(--s-8)}}