/* Existing homepage surfaces only. The homepage owns its layout and copy.
   Transparent highlights retain every existing surface and text colour.
   sm1-* selectors cover the observed client-rendered homepage; legacy selectors
   cover its server-rendered fallback. Neither path changes layout or content. */
#top #savoriCard,
#top .hero-actions > .button,
#main > .core-entry .core-entry-card,
#experience .experience-card,
#top a.sm1-primary,
#experience a.sm1-entry,
#about a.sm1-link,
#about a.sm1-artwork {
  background-image: linear-gradient(135deg, rgb(255 246 220 / 9%), rgb(255 255 255 / 2%) 42%, rgb(217 191 132 / 5%));
  border-color: rgb(199 178 132 / 45%);
  box-shadow: inset 0 1px 0 rgb(255 249 226 / 29%), inset 0 -1px 0 rgb(18 37 28 / 9%), 0 10px 28px rgb(4 23 16 / 9%);
}

/* Keep the two existing hero actions visually distinct. */
#top .hero-actions > .button-primary,
#top a.sm1-primary {
  background-image: linear-gradient(135deg, rgb(255 250 231 / 19%), rgb(255 255 255 / 3%) 58%, rgb(168 118 47 / 7%));
}

/* The ordinary surface above is also the non-blur fallback. */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  #top #savoriCard,
  #top .hero-actions > .button,
  #main > .core-entry .core-entry-card,
  #experience .experience-card,
  #top a.sm1-primary,
  #experience a.sm1-entry,
  #about a.sm1-link,
  #about a.sm1-artwork {
    -webkit-backdrop-filter: blur(12px) saturate(112%);
    backdrop-filter: blur(12px) saturate(112%);
  }
}

/* No movement is introduced while a finger is scrolling. */
@media (hover: hover) and (pointer: fine) {
  #top .hero-actions > .button:hover,
  #main > .core-entry .core-entry-card:hover,
  #experience .experience-card:hover,
  #top a.sm1-primary:hover,
  #experience a.sm1-entry:hover,
  #about a.sm1-link:hover,
  #about a.sm1-artwork:hover {
    border-color: rgb(206 178 117 / 74%);
    box-shadow: inset 0 1px 0 rgb(255 249 226 / 39%), inset 0 -1px 0 rgb(18 37 28 / 9%), 0 12px 30px rgb(4 23 16 / 13%);
  }
}

#top .hero-actions > .button:focus-visible,
#main > .core-entry .core-entry-card:focus-visible,
#experience .experience-card:focus-visible,
#top a.sm1-primary:focus-visible,
#experience a.sm1-entry:focus-visible,
#about a.sm1-link:focus-visible,
#about a.sm1-artwork:focus-visible {
  outline: 3px solid #ba8d3e;
  outline-offset: 3px;
}

@media (prefers-reduced-transparency: reduce) {
  #top #savoriCard,
  #top .hero-actions > .button,
  #main > .core-entry .core-entry-card,
  #experience .experience-card,
  #top a.sm1-primary,
  #experience a.sm1-entry,
  #about a.sm1-link,
  #about a.sm1-artwork {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Highlights are static, including when the visitor requests reduced motion. */
@media (prefers-reduced-motion: reduce) {
  #top #savoriCard,
  #top .hero-actions > .button,
  #main > .core-entry .core-entry-card,
  #experience .experience-card,
  #top a.sm1-primary,
  #experience a.sm1-entry,
  #about a.sm1-link,
  #about a.sm1-artwork {
    transition-duration: 0s !important;
  }
}

@media (forced-colors: active) {
  #top #savoriCard,
  #top .hero-actions > .button,
  #main > .core-entry .core-entry-card,
  #experience .experience-card,
  #top a.sm1-primary,
  #experience a.sm1-entry,
  #about a.sm1-link,
  #about a.sm1-artwork {
    background-image: none;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #top .hero-actions > .button:focus-visible,
  #main > .core-entry .core-entry-card:focus-visible,
  #experience .experience-card:focus-visible,
  #top a.sm1-primary:focus-visible,
  #experience a.sm1-entry:focus-visible,
  #about a.sm1-link:focus-visible,
  #about a.sm1-artwork:focus-visible {
    outline-color: Highlight;
  }
}