/* === Fixed top-left logo (global) === */
:root{
  --logo-left: clamp(12px, 2vw, 24px);
  --logo-top: clamp(12px, 2vh, 24px);
  --logo-width: clamp(115px, 55vw, 500px); /* adjust to taste */
}

/* Accessible “visually hidden” helper for SEO-friendly H1 fallback text */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.site-logo{
  position:fixed;
  inset: var(--logo-top) auto auto var(--logo-left);
  display:block;
  width:var(--logo-width);
  aspect-ratio: 1200 / 330;            /* tweak if your logo’s proportions differ */
  background: no-repeat left top / contain url('/assets/calcamino-logo-white.png');
  z-index: 9999;
  text-decoration:none;
}

/* Optional: provide a 2x asset for sharper retina rendering */
@supports (background-image: image-set(url('/assets/calcamino-logo-white.png') 1x)) {
  .site-logo{
    background-image: image-set(
      url('/assets/calcamino-logo-white.png') 1x,
      url('/assets/calcamino-logo-white.png') 2x
    );
  }
}

/* If the fixed logo overlaps content on small screens, add a little top padding */
@media (max-width: 600px){
  body{ padding-top: max(64px, calc(var(--logo-top) + 48px)); }
}

/* If you had decorative page titles, hide them but keep semantic H1 text for SEO */
.masthead h1, .masthead h2{
  position:absolute; width:1px;height:1px; margin:-1px; clip:rect(0 0 0 0);
  overflow:hidden; white-space:nowrap; border:0;
}