@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

body { padding-top:76px; }
html { scroll-padding-top:76px; }
.topbar {
  height:76px; position:fixed; z-index:50; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(24px,5.5vw,95px);
  background:rgba(241,231,211,.9); color:#252a2b;
  backdrop-filter:blur(12px); border-bottom:1px solid rgba(36,44,46,.12);
  font-family:'DM Sans',Arial,sans-serif;
}
.topbar .mark { font:700 32px 'Space Grotesk',sans-serif; letter-spacing:-.12em; }
.topbar .dot { color:#c74b33; }
.topbar nav { display:flex; gap:clamp(15px,3vw,42px); }
.topbar nav a { font-size:13px; transition:opacity .2s; }
.topbar nav a:hover,.topbar nav .active { color:#c74b33; }
.topbar #menu-toggle { display:none; }
.mobile-menu {
  position:fixed; top:76px; left:0; right:0; z-index:49;
  background:#f1e7d3; color:#252a2b; padding:24px;
  border-bottom:1px solid rgba(36,44,46,.22);
  flex-direction:column; gap:25px; font-family:'DM Sans',Arial,sans-serif;
}
.mobile-menu:not([hidden]) { display:flex; }
@media(max-width:540px) {
  body { padding-top:68px; }
  html { scroll-padding-top:68px; }
  .topbar { height:68px; padding:0 20px; }
  .topbar nav { display:none; }
  .topbar #menu-toggle { display:block; background:none; border:0; font-size:13px; }
  .mobile-menu { top:68px; }
}