/* The original translucent, one-pixel preview keyline. */
body{--preview-keyline:rgba(0,0,0,.12);--sticky-tint:255,255,255}
body.home-page{--preview-keyline:rgba(255,255,255,.096);--sticky-tint:0,0,0}
body.home-page .project-media::after{
 content:"";position:absolute;inset:0;z-index:4;
 border:1px solid var(--preview-keyline);border-radius:inherit;pointer-events:none;
}
/* Bounded translucent glass: a crisp one-pixel bottom edge in both themes. */
body:is(.home-page,.about-page,.case-page) .header-backdrop{
 height:var(--header-height,64px);
 background:rgba(var(--sticky-tint),.78)!important;
 border:0;border-bottom:1px solid var(--preview-keyline)!important;box-shadow:none;
 backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
 mask-image:none;-webkit-mask-image:none;overflow:hidden;pointer-events:none;
}
.header-backdrop>.sticky-blur-layer{display:none}

/* At the top, navigation sits directly on the page with no visible panel. */
body:is(.home-page,.about-page,.case-page):not(.header-scrolled) .header-backdrop{
 opacity:0;background:transparent!important;border-bottom-color:transparent!important;
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
body:is(.home-page,.about-page,.case-page).header-scrolled .header-backdrop{opacity:1}

/* Light templates keep clean media edges; the sticky keyline is independent. */
body:not(.home-page) .project-media::after{content:none;border:0}

/* Only the signature blends with the backdrop; navigation keeps solid dark pills. */
body.home-page .header-backdrop{display:none!important}
body.home-page .site-header{
 background:transparent!important;border:0!important;box-shadow:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 mix-blend-mode:normal!important;
}
body.home-page .site-header .brand{mix-blend-mode:difference}
body.home-page .site-header .header-row .main-nav a{
 background:#1a1a1a!important;box-shadow:none;border:0;mix-blend-mode:normal;
}
body.home-page .site-header :is(.signature,.main-nav a){color:#fff!important}
body.home-page .site-header :is(.signature,.main-nav a):is(:hover,:focus-visible){opacity:.4!important}

/* A separate compositing layer lets the name invert independently of the pills. */
body.home-page>.inverting-signature{
 position:fixed;z-index:31;left:16px;top:21px;
 color:#fff;font-family:var(--font-copy);font-size:16px!important;font-weight:500;
 line-height:22px!important;letter-spacing:0!important;mix-blend-mode:difference;
}
body.home-page>.inverting-signature:is(:hover,:focus-visible){opacity:.4}