/* Match the opening header, safe area and browser tint on every route. */
html{--mobile-footer:#f1e9df}
html:has(.folio-index){--mobile-opening:#f3eee5;--mobile-footer:#f3eee5}
html:has(.cv){--mobile-opening:var(--pair-cream,#f1e9df);--mobile-footer:#f1e9df}
html:has(.motion-refresh){--mobile-opening:#fafafa}
html:has(.detail-uber){--mobile-opening:#e7eef6}
html:has(.detail-miele){--mobile-opening:#0b0c0d}
html:has(.detail-leto){--mobile-opening:#dfb0c9}
@media(max-width:700px){
  body .site-footer.contact-footer>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0}
  body .site-footer.contact-footer>div:last-child>a{width:100%;justify-self:stretch;justify-content:center;text-align:center;margin-inline:0;white-space:nowrap}
  body .site-footer.contact-footer>div:last-child>a.footer-home{justify-content:flex-start;text-align:left}
  body .site-footer.contact-footer>div:last-child>a.footer-linkedin{justify-content:flex-end;text-align:right}
  html{background-color:var(--mobile-opening)!important}
  body{background-color:var(--mobile-footer)!important}
  body main .site-header.spatial-header{background:var(--mobile-opening)}
  body .site-header.spatial-header .site-menu{margin-left:auto;justify-content:flex-end;gap:44px}
  body .site-header.spatial-header .site-menu a{font-size:1.035rem}
  body .site-header.spatial-header .site-menu a[href="/resume"]{margin-right:0}
  /* Keep the native toolbar's flat tint seamless; retain the gradient below. */
  .folio-index .spatial-ambient{
    inset:0;
    mask-image:linear-gradient(to bottom,transparent 76px,#000 240px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 76px,#000 240px);
  }
  .folio-index .spatial-showcase:after{
    mask-image:linear-gradient(to bottom,transparent 76px,#000 180px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 76px,#000 180px);
  }
}
@media(max-width:480px){
  body .site-header.spatial-header{gap:clamp(8px,3vw,20px)}
  body .site-header.spatial-header .site-menu{gap:30px}
  body .site-header.spatial-header .site-menu a{font-size:clamp(11.5px,3.45vw,14.95px)}
}