@property --header-clearance { syntax: "<length>"; inherits: true; initial-value: 0px; }

:root { --hb-frame-top: clamp(16px,2vh,20px); --hb-gap: 24px; --hb-el: 30px; --header-clearance: calc(var(--hb-frame-top) + var(--hb-el) + var(--hb-gap)); }

@media (max-width: 360px) {
  :root { --hb-el: 28px; }
}

@media (min-width: 800px) and (max-width: 1279px) {
  :root { --hb-el: max(46px,38px); }
}

@media (min-width: 1280px) {
  :root { --hb-el: 54px; }
}