/* ==========================================================================
   404 — Desktop (1280px – 1920px)
   Reusable "not found" block, same pattern as menu/settings: its own
   component file, dropped into whichever pages need it (e.g. broken
   links inside case pages, disabled sections). Content/positions come
   once the design is ready — this is just the shell for now.
   ========================================================================== */

.error-404 {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

/* Scoped to .error-404 (404.html's own top-level section) — not a bare
   .popup rule, since this file is also pulled in by archive/career/
   support/etc. for the placeholder image+text, and those pages want the
   default 11rem from popup.desktop.css, not this page's 13rem (this
   page's settings button sits at the actions.desktop.css default,
   bottom: 7rem, same as .settings-panel). */
.error-404 .popup {
    bottom: 13rem;
}

/* The actual shareable bit — one image, two lines of text. Drop these
   three elements into any position:relative white screen (this one,
   events, statistics, etc.) — they don't depend on .error-404 itself. */
.error-404__image {
    position: absolute;
    top: 15rem;
    left: 50%;
    transform: translateX(-50%);
    width: 65rem;
    height: 55rem;
    z-index: 1;
}


.error-404__title {
    position: absolute;
    top: 75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5;
    z-index: 1;
}

.error-404__text {
    position: absolute;
    top: 80rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 1;
    z-index: 1;
}