/* شهاب — 404: page layout, one-off styles (scoped by section), and what
   the old per-page sheet still owned (keyframes, p/input, its own a{transition}). */
a{transition:color .16s ease,background .16s ease,border-color .16s ease,gap .16s ease}
@keyframes sh-ring{0%{transform:scale(.55);opacity:.9}70%{opacity:.12}100%{transform:scale(1.6);opacity:0}}
.sh-404-404__main-1{position:relative;overflow:hidden;background:#fff}
.sh-404-404__span-1{display:none}
.sh-404-404__span-2{display:none}
.sh-404-404__span-3{display:none}
.sh-404-404__span-4{display:none}
.sh-404-404__span-5{display:none}
.sh-404-404__span-6{display:none}
/* the two hairlines, the two ghost blades and the ghost numeral were decoration */
.sh-404-404__span-7{display:none}
.sh-404-404__div-1{position:relative;max-width:var(--sh-container);margin:0 auto;padding:64px 32px 72px;display:grid;grid-template-columns:minmax(min(100%,300px),1fr) minmax(min(100%,240px),.52fr);gap:48px;align-items:center}
.sh-404-404__span-8{display:flex;align-items:center;gap:12px;font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:var(--sh-blue)}
.sh-404-404__span-9{display:none}
.sh-404-404__span-10{display:flex;align-items:flex-start;gap:18px;margin-top:10px}
.sh-404-404__span-11{font-family:var(--sh-font);font-size:clamp(64px,15vw,120px);font-weight:800;line-height:.82;color:var(--sh-navy);font-variant-numeric:tabular-nums}
.sh-404-404__span-12{width:16px;height:13px;background:var(--sh-blue);margin-top:clamp(18px,3vw,40px);flex:none}
.sh-404-404__h1-1{font-family:var(--sh-font);font-size:clamp(20px,2.3vw,26px);font-weight:800;line-height:1.5;margin:22px 0 0;color:var(--sh-navy);max-width:26ch;text-wrap:pretty}
.sh-404-404__p-1{font-family:var(--sh-serif);font-size:14px;line-height:2;color:var(--sh-ink-2);margin:12px 0 0;max-width:46ch}
.sh-404-404__div-2{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.sh-404-404__a-1{display:inline-flex;align-items:center;gap:12px;background:var(--sh-navy);color:#fff;font-family:var(--sh-font);font-size:12px;font-weight:800;padding:13px 28px;white-space:nowrap}
@media (hover:hover){.sh-404-404__a-1:hover{background:var(--sh-blue);color:#fff;gap:18px}}
.sh-404-404__a-2{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--sh-grey-1);color:var(--sh-navy);font-family:var(--sh-font);font-size:12px;font-weight:800;padding:13px 26px;white-space:nowrap}
@media (hover:hover){.sh-404-404__a-2:hover{border-color:var(--sh-blue);color:var(--sh-blue);gap:18px}}
.sh-404-404__div-3{border-inline-start:1px solid var(--sh-hair-3);padding-inline-start:26px}
.sh-404-404__span-13{display:flex;align-items:center;gap:10px;font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:var(--sh-mute)}
.sh-404-404__span-14{position:relative;display:flex;align-items:center;justify-content:center;width:12px;height:12px}
.sh-404-404__span-15{position:absolute;inset:0;border:1px solid var(--sh-red);border-radius:50%;animation:sh-ring 2.2s ease-out infinite}
.sh-404-404__span-16{width:5px;height:5px;background:var(--sh-red);border-radius:50%}
.sh-404-404__a-3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--color-border-soft)}
@media (hover:hover){.sh-404-404__a-3:hover{color:var(--sh-blue)}}
.sh-404-404__span-17{display:flex;align-items:center;gap:10px;font-family:var(--sh-font);font-size:14px;font-weight:700;color:var(--sh-ink)}
.sh-404-404__span-18{display:block;font-size:11.5px;color:var(--sh-mute);line-height:1.9;margin-top:14px}

@media (prefers-reduced-motion:reduce){.sh-404-404__span-15{animation:none;transform:scale(1);opacity:.35}}

/* A press has to answer on a touch screen, where :hover never fires: the ground
   steps to navy for as long as the control is held. No transform and no radius —
   the timing is the colour transition the control already carries. */
body[data-sh-page="404"] :where(.sh-more,.sh-pager__btn,.sh-chip,.sh-tag,.sh-btn):active{
  background:var(--sh-navy);color:#fff;border-color:var(--sh-navy);
}
body[data-sh-page="404"] :where(.sh-band,.sh-navy,[class*="--on-dark"]) :where(a,button):active{
  background:rgba(255,255,255,.18);
}
body[data-sh-page="404"] :where(.sh-list__row,.sh-card,.sh-fig,.sh-op__row):active{
  background:var(--color-surface-soft);
}

/* the burger and its chevron live in the shared css/responsive.css, which feeds
   the four locked pages, so their guard is written here, per page */
@media (prefers-reduced-motion:reduce){
  body[data-sh-page="404"] .sh-nav-toggle span,
  body[data-sh-page="404"] header nav .sh-menu > a > span:last-child{transition:none}
}