/* WriteHerIn resource header, shared by every resource. Uses the page’s own colour and font tokens. */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--field)}
.topbar{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:12px;line-height:0}
.brand a{text-decoration:none;display:block}
.brand .logo-link:hover{opacity:.75}
.logo-svg{height:31px;width:auto;display:block}
.lg-ink{fill:var(--ink)}.lg-her{fill:var(--her)}
.brand .sub{white-space:nowrap;font:900 24px/1 var(--display);color:var(--field);padding:2px 0 0 12px;position:relative;top:-2px;border-left:2px solid var(--soft-line)}
.tabs{margin-left:auto;display:flex;gap:2px}
.tabs a{color:var(--ink);font:600 15px/1 var(--text);text-decoration:none;padding:10px 12px;position:relative}
.tabs a:hover{color:var(--link)}
.tabs a[aria-current="page"]{color:var(--link)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;background:var(--link);border-radius:2px}
@media(max-width:760px){.topbar{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:8px;gap:8px}.logo-svg{height:27px}.brand .sub{font-size:21px;padding-left:10px}.tabs{margin-left:-12px;width:calc(100% + 24px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}.tabs a{font-size:14.5px;white-space:nowrap;flex:none}}