.not-found-page{
 position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
 min-height:clamp(560px,calc(100svh - 150px),820px);margin:28px 0 36px;
 border:0;border-radius:0;background:transparent;
}
/* Use the supplied artwork as a luminance mask: the dark background vanishes
   and the rider takes the selected palette's color without changing the image. */
.not-found-art{
 position:absolute;inset:0 0 0 35%;pointer-events:none;z-index:-2;
 background:var(--theme-accent);opacity:.48;transform:scale(.88);
 /* Fade the artwork itself rather than painting gradients over the page;
    this avoids visible background bands in the lighter dark palettes. */
 mask-image:url('/assets/not-found-rider.png'),linear-gradient(180deg,#000 68%,transparent 93%);
 mask-mode:luminance,alpha;mask-composite:intersect;
 mask-size:contain,100% 100%;mask-position:center;mask-repeat:no-repeat;
}
.not-found-copy{padding:64px clamp(28px,5vw,88px);max-width:620px}
.not-found-copy .eyebrow{color:var(--theme-accent);font-size:10px;letter-spacing:.2em;font-weight:650}
.not-found-code{margin:20px 0 14px;font-size:clamp(88px,9vw,140px);font-weight:750;line-height:1;letter-spacing:-.075em;color:var(--theme-accent)}
.not-found-code span{font-size:.65em;font-weight:300;opacity:.25;margin-left:10px}
.not-found-copy h1{font-size:clamp(28px,3vw,42px);font-weight:650;letter-spacing:-1.2px;line-height:1.2;margin:0 0 18px;color:var(--text)}
.not-found-copy p{max-width:340px;font-size:15px;line-height:1.8;margin:0;color:var(--muted)}
.not-found-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:30px}
.not-found-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px;font-size:13px;min-height:46px;border-radius:9px}
.not-found-actions .secondary{background:color-mix(in srgb,var(--theme-surface) 70%,transparent);color:var(--text)}
.not-found-actions .secondary:hover{background:var(--theme-raised)}
.not-found-caption{display:block;margin-top:40px;font-size:11px;letter-spacing:.03em;color:var(--muted)}
@media(max-width:700px){
 .not-found-page{min-height:620px;margin:20px 0;align-items:flex-start}
 .not-found-copy{padding:42px 26px}
 .not-found-art{inset:18% -25% -12% 10%;opacity:.16;mask-position:right bottom}
 .not-found-copy p{max-width:290px}
 .not-found-caption{margin-top:28px}
}
@media(max-width:380px){.not-found-actions{align-items:stretch;flex-direction:column}.not-found-copy{padding-inline:22px}}