/* 404 page, design rules v3 (Matisse, 24 Oct): dots from under the menu to the
   bottom of the screen, 404 and the button cut out of them. Button from redesign.css. */
body.v3 main section.nf { position: relative; padding: 0; overflow-x: clip; }
.nf-h { position: absolute; z-index: 1; left: 50%; top: 9%; transform: translate(-50%, -50%); max-width: calc(100% - 32px); width: max-content; font: 600 clamp(18px, 2vw, 24px)/1.3 var(--display); letter-spacing: -.01em; text-wrap: balance; color: var(--ink); text-align: center; }
.nf-dots { --p: 22px; --d: 12px; display: grid; grid-template-columns: repeat(var(--cols, 1), var(--p)); grid-auto-rows: var(--p); place-items: center; justify-content: center; align-content: center; height: calc(100svh - 120px); min-height: 420px; overflow: hidden; }
.nf-dots i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--c, var(--ink)); opacity: .88; }
.nf-dots i.h { visibility: hidden; }
/* the line on top and the button sit in their own holes */
.nf .cta { position: absolute; z-index: 1; left: 0; right: 0; top: 84%; margin: 0; padding: 0 16px; transform: translateY(-50%); }
/* without the script, the number itself */
.nf-dots:empty { display: grid; place-items: center; align-content: start; padding-top: 12vh; }
.nf-dots:empty:not([data-forme])::before { content: "404"; font: 700 clamp(96px, 22vw, 260px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); opacity: .2; transform: skewX(-12deg); }
@media (max-width: 640px) {
  .nf-dots { --p: 8px; --d: 5px; }   /* finer dots, or the digits do not read at 360 */
}
/* no footer here: the dots end the screen, nothing to scroll (Matisse, 24 Oct) */
.sfoot { display: none; }
/* Maintenance (2026-10-29): no menu, so the logo sits in the middle; the page
   is held to the screen (no scroll, no bounce when the phone's bars move) */
.p-maintenance .hdr .bar { grid-template-columns: 1fr; }
.p-maintenance .hdr .brand { justify-self: center; }
html:has(.p-maintenance), .p-maintenance { height: 100%; overflow: hidden; overscroll-behavior: none; }
@media (max-width: 640px) {
  .nf-dots[data-forme] { --p: 14px; --d: 9px; }   /* the pause sign needs no fine dots: bigger ones read as dots, not noise */
}