.topbar { position:sticky; top:0; z-index:30; background:rgba(243,239,232,.9); backdrop-filter:blur(14px); border-bottom:1px solid rgba(21,21,21,.07); }
.nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:.92rem; font-weight:900; letter-spacing:.08em; }
.brand-mark { width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:18px 0 0 var(--ink); margin-right:18px; }
.navlinks { display:flex; align-items:center; gap:28px; color:#3d3934; font-size:.93rem; white-space:nowrap; }
.navlinks a { position:relative; }
.navlinks a::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
.navlinks a:hover::after { transform:scaleX(1); }
.nav-separator { width:34px; height:1px; margin-inline:2px; background:var(--line); }
.mobile-nav { display:none; }
.mobile-nav summary { list-style:none; cursor:pointer; }
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav summary span { display:inline-block; transition:transform .18s ease; }
.mobile-nav[open] summary span { transform:rotate(45deg); }
footer { padding:30px 0 55px; display:flex; justify-content:space-between; gap:20px; color:#6e685f; font-size:.9rem; }