/* error pages. one layout, seven backgrounds, and the side the words sit on flips per code.

   The photo runs at its own brightness, untouched. Only the strip the words sit on gets darkened,
   and the fade happens past them, not across them, so the rest of the shot is the picture as
   taken and no line of text starts on bare photo.

   --err-edge is where the text column ends. The wrap is min(1880px,96vw) centred with 26px of
   padding and the text caps at 520px, so that edge is the wrap's own margin plus 546. max()
   covers both regimes: 2vw of margin while the viewport is under 1958, half the leftover after.

   The stops in between are an ease rather than a straight line. A linear ramp in alpha reads as
   a hard edge where it lands, because it is still falling at the same rate when it stops. These
   taper off instead, so it goes out without a seam. case #103

   How dark the strip goes is per code, because the shots are nowhere near each other: 404 comes
   in at 2.3 out of 255 down its left side and 500 at 177 down the same side. */

body.err{position:relative;min-height:100vh;background:#000;
  --err-edge:calc(max(2vw,(100vw - 1880px)/2) + 546px);
  --err-fade:420px;
  --err-a:var(--err-dim,.85);}
body.err:before{content:"";position:fixed;inset:0;z-index:-2;
  background:var(--err-img) center/cover no-repeat;}
/* full strength across every word, then eased away over --err-fade of open photo beyond them */
body.err:after{content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(to right,
    rgba(6,5,10,var(--err-a)) 0,
    rgba(6,5,10,var(--err-a)) var(--err-edge),
    rgba(6,5,10,calc(var(--err-a) * .93)) calc(var(--err-edge) + var(--err-fade) * .14),
    rgba(6,5,10,calc(var(--err-a) * .80)) calc(var(--err-edge) + var(--err-fade) * .28),
    rgba(6,5,10,calc(var(--err-a) * .62)) calc(var(--err-edge) + var(--err-fade) * .43),
    rgba(6,5,10,calc(var(--err-a) * .42)) calc(var(--err-edge) + var(--err-fade) * .58),
    rgba(6,5,10,calc(var(--err-a) * .24)) calc(var(--err-edge) + var(--err-fade) * .72),
    rgba(6,5,10,calc(var(--err-a) * .10)) calc(var(--err-edge) + var(--err-fade) * .86),
    rgba(6,5,10,0) calc(var(--err-edge) + var(--err-fade)));}
body.err[data-side="right"]:after{
  background:linear-gradient(to left,
    rgba(6,5,10,var(--err-a)) 0,
    rgba(6,5,10,var(--err-a)) var(--err-edge),
    rgba(6,5,10,calc(var(--err-a) * .93)) calc(var(--err-edge) + var(--err-fade) * .14),
    rgba(6,5,10,calc(var(--err-a) * .80)) calc(var(--err-edge) + var(--err-fade) * .28),
    rgba(6,5,10,calc(var(--err-a) * .62)) calc(var(--err-edge) + var(--err-fade) * .43),
    rgba(6,5,10,calc(var(--err-a) * .42)) calc(var(--err-edge) + var(--err-fade) * .58),
    rgba(6,5,10,calc(var(--err-a) * .24)) calc(var(--err-edge) + var(--err-fade) * .72),
    rgba(6,5,10,calc(var(--err-a) * .10)) calc(var(--err-edge) + var(--err-fade) * .86),
    rgba(6,5,10,0) calc(var(--err-edge) + var(--err-fade)));}
/* narrow screens put the words over the whole width, so the wash has to as well */
@media (max-width:760px){
  body.err:after,body.err[data-side="right"]:after{
    background:linear-gradient(to bottom,
      rgba(6,5,10,var(--err-a)) 0,
      rgba(6,5,10,var(--err-a)) 58%,
      rgba(6,5,10,calc(var(--err-a) * .82)) 70%,
      rgba(6,5,10,calc(var(--err-a) * .60)) 82%,
      rgba(6,5,10,calc(var(--err-a) * .40)) 92%,
      rgba(6,5,10,calc(var(--err-a) * .30)) 100%);}
}
body.err .wiki-header{background:rgba(6,5,10,.72);backdrop-filter:blur(8px);}
/* the footer sits out on open photo, well past the wash, so it carries its own.

   It has to actually reach the bottom of the screen or the wash under it stops and the photo
   starts again below, which is a hard line straight across. The column below pins it there. No
   border either: a hairline over a photo reads as the seam it was meant to avoid, so the ramp
   does that job on its own, and it is long enough to come in without an edge. case #105 */
body.err{display:flex;flex-direction:column;}
body.err .wiki-foot{
  position:relative;background:none;border-top:none;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7);}
body.err .wiki-foot:before{
  content:"";position:absolute;inset:-130px 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(6,5,10,0) 0,
    rgba(6,5,10,.06) 18%,
    rgba(6,5,10,.16) 34%,
    rgba(6,5,10,.32) 50%,
    rgba(6,5,10,.50) 66%,
    rgba(6,5,10,.66) 82%,
    rgba(6,5,10,.76) 100%);}

.err-wrap{max-width:min(1880px,96vw);margin:0 auto;padding:0 26px;
  flex:1 0 auto;width:100%;
  min-height:calc(100vh - 200px);display:flex;align-items:center;}
.err-inner{width:100%;display:flex;padding:40px 0 60px;}
body.err[data-side="right"] .err-inner{justify-content:flex-end;}
/* every word carries a shadow of its own, so nothing here depends on the wash alone being dark
   enough. matters most where a line runs out past the solid part of it. case #104 */
.err-text{max-width:520px;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 16px rgba(0,0,0,.6);}
body.err[data-side="right"] .err-text{text-align:right;}
body.err[data-side="right"] .err-acts{justify-content:flex-end;}
@media (max-width:760px){
  .err-wrap{min-height:0;padding-top:30px;}
  .err-inner,body.err[data-side="right"] .err-inner{justify-content:flex-start;}
  body.err[data-side="right"] .err-text{text-align:left;}
  body.err[data-side="right"] .err-acts{justify-content:flex-start;}
}

/* the code itself, big and quiet behind the heading */
.err-code{font-family:"Gin",sans-serif;font-weight:400;line-height:.8;
  font-size:clamp(4.5rem,15vw,11rem);color:rgba(255,255,255,.13);margin:0 0 -.12em;
  letter-spacing:2px;}
.err-title{font-family:"Gin",sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.05;
  font-size:clamp(1.9rem,4.4vw,3rem);color:var(--red);margin:0 0 14px;
  text-shadow:0 2px 18px rgba(0,0,0,.7);}
.err-lead{color:#e9e9ef;font-size:1.06rem;line-height:1.6;margin:0 0 10px;}
.err-body{color:#a5a2b0;font-size:.96rem;line-height:1.65;margin:0 0 8px;}
.err-acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px;}
/* the address that was asked for, when there is one worth showing */
.err-path{display:inline-block;background:rgba(6,5,10,.8);border:1px solid var(--line);
  border-radius:999px;padding:5px 14px;margin:2px 0 16px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem;color:var(--red-2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}