/* THE HEADER (23 Oct 2026): one set of rules for the top bar of every page of the site, the landing page included. Loaded last on every page, so no other
   stylesheet can move it. The markup comes from lib/header.mjs; the landing page (journal-landing/index.html) carries the same markup and links this file.
   Nothing here depends on a page's own body font size or line height: the header sets its own. */
.top{position:sticky;top:0;z-index:30;background:rgba(248,250,252,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);font-family:inherit;line-height:1.5}
.top .wrap{display:flex;align-items:center;gap:26px;height:66px;box-sizing:border-box}
.top .brand{white-space:nowrap;font-weight:800;font-size:20px;line-height:30px;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.top .brand:hover{color:var(--ink)}
.top .brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#7c5cff,#c026d3);display:inline-block;position:relative;flex:none}
.top .brand i:after{content:"";position:absolute;left:11px;top:6px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(40deg)}
.top .nav{margin-left:auto;display:flex;gap:24px}
.top .nav a{color:var(--soft);font-weight:600;font-size:15px;line-height:23px}
.top .nav a:hover{color:var(--accent)}
.top .btn{min-height:42px;padding:0 20px;font-size:14px;line-height:1.2}
.top .menu{display:none;width:42px;height:42px;border:1px solid var(--rule);border-radius:12px;background:#fff;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.top .menu span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink,#0f172a);transition:transform .2s,opacity .2s}
.top.open .menu span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.top.open .menu span:nth-child(2){opacity:0}
.top.open .menu span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav[hidden]{display:none!important}
.mnav{display:none;background:#fff;border-bottom:1px solid var(--rule);padding:6px 20px 14px}
.mnav a{display:block;padding:14px 4px;border-bottom:1px solid var(--rule);color:var(--ink,#0f172a);font-weight:600;font-size:16px;line-height:1.5}
.mnav a:last-child{border-bottom:0}
@media (max-width:960px){
  .top .nav{display:none}.top .btn{margin-left:auto}
  .top .menu{display:flex}
  .top.open .mnav{display:block}
}
@media (max-width:620px){
  .top .wrap{height:58px;gap:12px}
  .top .brand{font-size:18px;line-height:26px}.top .brand i{width:26px;height:26px}.top .brand i:after{left:9px;top:5px;width:6px;height:11px}
  .top .btn{min-height:38px;padding:0 16px;font-size:13.5px;width:auto}
}