/*
 * The public error page (bundles/TwigBundle/Exception/_public.html.twig) and
 * registration closed: black, centred, the status code big and faint behind
 * the headline. On an address with no website: an empty browser frame
 * showing that address instead.
 */
@layer marketing {
    .mk {
        & .er {
            position: relative;
            min-height: 100vh;
            overflow: hidden;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 140px 20px 80px;
            background: radial-gradient(55% 55%, #262626 0%, #0d0d0d 55%, #000 100%);
        }
        & .er-big {
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -54%;
            font-size: clamp(220px, 34vw, 520px);
            font-weight: 700;
            letter-spacing: -0.08em;
            line-height: 1;
            color: rgb(255 255 255 / 0.04);
            pointer-events: none;
            user-select: none;
        }
        & .er-in {
            position: relative;
            display: grid;
            justify-items: center;
        }
        & .er .kicker {
            color: rgb(255 255 255 / 0.7);
        }
        & .er h1 {
            margin-top: 58px;
            font-size: clamp(42px, 6vw, 84px);
            font-weight: 600;
            letter-spacing: -0.05em;
            line-height: 1.02;
            display: inline-block;
        }
        & .er h1 em {
            font-style: normal;
            color: rgb(255 255 255 / 0.45);
        }
        & .er p {
            margin-top: 24px;
            max-width: 46ch;
            color: rgb(255 255 255 / 0.65);
            font-size: 17px;
        }
        & .er p b {
            color: #fff;
            font-weight: 500;
        }
        & .er .row {
            display: flex;
            gap: 10px;
            margin-top: 34px;
            flex-wrap: wrap;
            justify-content: center;
        }
        & .er .btn-line {
            color: #fff;
            box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
        }

        /* no website on this address: an empty browser frame with the address in its bar */
        & .er-frame {
            width: min(520px, 90vw);
            margin-bottom: 44px;
            border-radius: 14px;
            overflow: hidden;
            background: #161616;
            border: 1px solid #262626;
            box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.9);
            text-align: left;
        }
        & .er-frame .bar {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 34px;
            padding: 0 12px;
            background: #1d1d1d;
            border-bottom: 1px solid #262626;
        }
        & .er-frame .bar i {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #3a3a3a;
        }
        & .er-frame .bar span {
            margin-left: 12px;
            padding: 4px 12px;
            border-radius: 6px;
            background: #111;
            font: 500 12px / 1 var(--f-mono);
            color: rgb(255 255 255 / 0.7);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        & .er-frame .sk {
            padding: 22px;
            display: grid;
            gap: 10px;
        }
        & .er-frame .sk div {
            height: 12px;
            border-radius: 6px;
            border: 1px dashed #3a3a3a;
        }
        & .er-frame .sk .a {
            width: 30%;
        }
        & .er-frame .sk .b {
            height: 64px;
        }
        & .er-frame .sk .c {
            width: 70%;
        }
        & .er-frame .sk .d {
            width: 45%;
        }
    }
}