/* Searoom site footer.
 *
 * One definition for every page. The homepage keeps its own inline stylesheet
 * and the reference pages share reference.css, so a footer written into both
 * would drift the way the header did. Tokens come from whichever of those two
 * is already loaded; nothing is redefined here.
 */

.site-footer {
    border-top: 1px solid var(--rule);
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 56px);
    padding-block: clamp(48px, 7vw, 84px);
}

.footer-about {
    max-width: 36ch;
    margin: 18px 0 0;
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.55;
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.footer-col-title {
    margin: 0 0 3px;
    color: var(--secondary);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-col a {
    padding: 12px;
    margin: -12px;
    color: var(--ink);
    font-size: 14px;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
}

.footer-col a:hover {
    text-decoration-color: currentColor;
}

.footer-bottom p {
    margin: 0;
    color: var(--secondary);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 24px;
    border-top: 1px solid var(--faint-rule);
}

/* The wordmark is filled with the same ordered lattice as the app icon's field,
   so the largest thing on the page is still made of the product's own material.
   Decorative, and hidden from assistive technology. */
.footer-bottom p a {
    color: var(--secondary);
    text-underline-offset: 3px;
}

.footer-bottom p a:hover {
    color: var(--ink);
}

.footer-wordmark {
    padding-bottom: clamp(14px, 2.5vw, 30px);
    background-clip: text;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM1 2h1v1H1zM3 2h1v1H3z' fill='%23151613' fill-opacity='.9'/%3E%3C/svg%3E");
    color: transparent;
    font-family: var(--mono);
    font-size: clamp(56px, 18.5vw, 290px);
    letter-spacing: 0.02em;
    line-height: 0.92;
    text-align: center;
    -webkit-background-clip: text;
    /* Decorative only. Its glyphs overflow the box at this size and line-height,
       which made them swallow clicks on the links in the bar above. */
    pointer-events: none;
    user-select: none;
    -webkit-background-clip: text;
}

@media (prefers-color-scheme: dark) {
    .footer-wordmark {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM1 2h1v1H1zM3 2h1v1H3z' fill='%23e9e7dd' fill-opacity='.85'/%3E%3C/svg%3E");
    }
}

@media (max-width: 900px) {
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .footer-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}