/* ---------------------------
   0) Header height per breakpoint
   --------------------------- */
:root { --masthead-h: 64px; }
@media (min-width: 768px)  { :root { --masthead-h: 76px; } }
@media (min-width: 1024px) { :root { --masthead-h: 92px; } }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--masthead-h) + 8px); }

/* ---------------------------
   1) Fixed masthead (transparent over hero)
   --------------------------- */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}

/* MM adds backgrounds on inner wrappers — nuke them by default */
.masthead .masthead__inner-wrap,
.masthead .greedy-nav {
  background: transparent !important;
  box-shadow: none !important;
}

/* NON-HOME pages: solid header + content padding */
body:not(.home-hero) .masthead {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
body:not(.home-hero) .initial-content { padding-top: var(--masthead-h); }

/* HOME page at top: transparent header, no page padding */
body.home-hero .masthead {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  /* background: rgba(255,255,255,.08);
  backdrop-filter: saturate(180%) blur(4px);
  box-shadow:none; */
}
body.home-hero .initial-content { padding-top: 0 !important; }

/* HOME page when scrolled: turn header solid */
body.home-hero.is-scrolled .masthead {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ---------------------------
   2) Hero (thinner banner)
   --------------------------- */
.home-hero .page__title { display: none; }

.home-hero .page__hero,
.home-hero .page__hero--overlay {
  margin-top: 0 !important;
}

.home-hero .page__hero--overlay {
  /* thinner banner like your example */
  min-height: 34vh;              /* tweak: 28–40vh */
  padding-top: var(--masthead-h);/* push caption below header */
  box-sizing: border-box;
}
@media (min-width: 768px)  { .home-hero .page__hero--overlay { min-height: 38vh; } }
@media (min-width: 1024px) { .home-hero .page__hero--overlay { min-height: 40vh; } }

/* Optional caption readability */
.home-hero .page__hero-caption {
  background: rgba(0,0,0,0.22);
  border-radius: 6px;
  padding: .35rem .6rem;
  display: inline-block;
}

/* ---------------------------
   3) Masthead typography, author card, etc.
   --------------------------- */
.site-title { font-size: 1.6rem; font-weight: 700; letter-spacing: .2px; }
@media (min-width: 768px) { .site-title { font-size: 2rem; } }

/* .author__avatar img { width: 140px; max-width: none; border-radius: 0; filter: none !important; -webkit-filter: none !important; opacity: 1 !important; } */
.author__avatar img {
  width: auto !important;        /* let theme control actual size */
  max-width: 120px !important;   /* MM default avatar size */
  border-radius: 50% !important; /* circle */
  filter: initial !important;    /* remove forced 'none' */
  -webkit-filter: initial !important;
  opacity: initial !important;   /* remove forced 1 */
}
.author__name { font-size: 1.2rem; }
.author__avatar, .author__content, .author__urls.social-icons a { opacity: 1; }

.masthead__menu-item a.is-active { border-bottom: 2px solid currentColor; }
.page__content > *:first-child { margin-top: 0; }


/* Remove all masthead hairlines/shadows (MM adds a 1px rule by default) */
.masthead,
.masthead::before,
.masthead::after,
.masthead .masthead__inner-wrap,
.masthead .greedy-nav,
.masthead .greedy-nav::before,
.masthead .greedy-nav::after {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important; /* just in case a gradient is injected */
}

/* Some builds add a border on the inner menu list too */
.masthead .visible-links,
.masthead .hidden-links {
  border: 0 !important;
  box-shadow: none !important;
}

/* Masthead text color: dark */
.masthead .site-title,
.masthead .site-title a,
.masthead .masthead__menu-item a {
  color: #1f2937 !important; /* dark grey */
}

/* Hover/active just a touch darker (optional) */
.masthead .masthead__menu-item a:hover,
.masthead .masthead__menu-item a.is-active {
  color: #111111 !important;
  border-bottom-color: currentColor;
}

/* Make the hamburger bars match the text color */
.greedy-nav__toggle .navicon,
.greedy-nav__toggle .navicon:before,
.greedy-nav__toggle .navicon:after {
  background: #222222 !important;
}