/* Scoped to the closing illustration; no changes to the landing page shell. */
.spark-closing-art {
    position: relative;
    width: 100%;
    height: clamp(560px, 62.5vw, 1100px);
    overflow: hidden;
    isolation: isolate;
    background: #080908;
}

.spark-closing-art__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.spark-closing-art__mark {
    position: absolute;
    left: 50%;
    top: 65%;
    width: clamp(95px, 10vw, 160px);
    height: auto;
    transform: translate(-50%, -50%);
}

@media (max-width: 600px) {
    .spark-closing-art__canvas {
        /* Keep both currents visible around the centred mark on narrow screens. */
        width: 180%;
        max-width: none;
        left: -40%;
    }
}

/* Let the currents dissolve into the black surface below without a hard seam. */
.spark-closing-art::after {
    content: "";
    position: absolute;
    inset: 62% 0 0;
    background: linear-gradient(to bottom, transparent, #000);
    pointer-events: none;
}

.spark-closing-art__mark {
    z-index: 1;
}

.spark-closing-wordmark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px 5vw;
    background: #000;
    color: #fff;
}

.spark-closing-wordmark h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Garet', 'Segoe UI', sans-serif;
    font-size: clamp(100px, 25vw, 420px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.065em;
}

/* Preserve layout while removing floating page chrome from the closing view. */
body.spark-closing-view .nav,
body.spark-closing-view #site-banner,
body.spark-closing-view .maintenance-banner,
body.spark-closing-view .mobile-menu {
    visibility: hidden;
    pointer-events: none;
}

body .nav {
    opacity: 1;
    transition: background .25s, border-color .25s, backdrop-filter .25s,
        opacity .35s ease, visibility 0s linear;
}

body.spark-closing-view .nav {
    opacity: 0;
    /* Finish the fade before removing the navbar from keyboard navigation. */
    transition: background .25s, border-color .25s, backdrop-filter .25s,
        opacity .35s ease, visibility 0s linear .35s;
}

@media (prefers-reduced-motion: reduce) {
    body .nav,
    body.spark-closing-view .nav {
        transition: none !important;
    }
}