footer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    
    background-color: rgb(242, 242, 245);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    
    width: 100%;
    padding: min(var(--page-bounds, 0px), var(--dynamic-padding, 0px)) var(--dynamic-padding, 0px);
    padding-bottom: 0;
    gap: min(var(--page-bounds, 0px), var(--dynamic-padding, 0px));
}

footer > .top {
    display: none;
    
    background-color: rgb(250, 250, 250);
    border-radius: 1rem;
    
    position: relative;
    overflow: hidden;
    
    width: 100%;
    padding: min(var(--page-bounds, 0px), var(--dynamic-padding, 0px));
}

footer > .top > img {
    display: block;
    position: absolute;
    
    top: 0;
    right: min(var(--page-bounds, 0px), var(--dynamic-padding, 0px));
    
    filter: grayscale(1) brightness(0.98);
    
    height: 175%;
}

footer > .top > .content {
    flex-shrink: 1;
    width: 100%;
    height: 100%;
    z-index: 5;
    gap: 1rem;
}

footer > .top > .content > span.title {
    font-weight: 600;
    font-size: 2rem;
    
    line-height: 1.75rem;
    letter-spacing: calc(2rem * var(--letter-spacing) / 3);
}

footer > .top > .content > span.paragraph,
footer > .top > .content > span.description,
footer > .top > .content > span.description > strong {
    font-weight: 500;
    font-size: 1rem;
    
    line-height: calc(1rem * 1.5);
    letter-spacing: calc(1rem * var(--letter-spacing) / 2);
}

footer > .top > .content > span.paragraph {
    color: rgba(0, 0, 0, 0.5);
    max-width: 35rem;
}

footer > .top > .content > span.description {
    color: rgba(0, 0, 0, 0.75);
    max-width: 35rem;
}

footer > .top > .content > span.description > strong {
    color: rgb(0, 0, 0);
}

footer > .top > .content > a {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    border-radius: 1rem;
    
    font-weight: 500;
    font-size: 0.85rem;
    
    position: relative;
    text-align: center;
    
    line-height: 3.25rem;
    letter-spacing: calc(0.85rem * var(--letter-spacing));
    
    height: 3.25rem;
    padding: 0 2rem;
    
    transition: border-radius var(--transition);
}

footer > .top > .content > a:hover {
    border-radius: calc(3.25rem / 2);
}

footer > .top > .content > a::before {
    content: "";
    position: absolute;
    
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
}

footer > .middle {
    justify-content: space-between;
    width: 100%;
    gap: min(var(--page-bounds, 0px), var(--dynamic-padding, 0px));
}

footer > .middle > .links:not(.newsletter) {
    width: 196px;
}

footer > .middle > .links > .title {
    font-weight: 500;
    font-size: 1rem;
    
    white-space: nowrap;
    line-height: 1rem;
    letter-spacing: calc(1rem * var(--letter-spacing) / 2);
    
    margin-bottom: 8px;
}

footer > .middle > .links > .link,
footer > .bottom > .links > .link {
    opacity: 0.75;
    
    font-weight: 500;
    font-size: 0.85rem;
    
    white-space: normal;
    line-height: 0.85rem;
    letter-spacing: calc(0.85rem * var(--letter-spacing) / 2);
}

footer > .middle > .links > .link {
    width: 100%;
    padding: 8px 0;
}

footer > .middle > .links > span.link {
    line-height: calc(0.85rem * 1.5);
}

footer > .middle > .links > a.link,
footer > .bottom > .links > a.link {
    transition: opacity var(--transition);
}

footer > .middle > .links > a.link::after {
    content: "";
    display: inline-block;
    
    background-image: url(/icons/redirect.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    width: 1rem;
    height: 1rem;
    
    filter: brightness(0);
    transform: translateY(0.2rem) translateX(0.25rem);
}

footer > .middle > .links > a.link:hover,
footer > .bottom > .links > a.link:hover {
    opacity: 0.25;
}

footer > .middle > .newsletter {
    max-width: 365px;
    margin-left: auto;
    height: calc(4 * 0.85rem * 1.5 + 1rem + 16px * 4);
}

footer > .middle > .newsletter > layout-row {
    position: relative;
    margin-top: auto;
}

footer > .middle > .newsletter > layout-row,
footer > .middle > .newsletter > layout-row > input{
    width: 100%;
}

footer > .middle > .newsletter > layout-row > input {
    background-color: rgb(255, 255, 255);
    border-radius: 1rem;
    
    font-weight: 500;
    font-size: 0.85rem;
    
    line-height: 0.85rem;
    letter-spacing: calc(0.85rem * var(--letter-spacing));
    
    padding: 1.25rem 0;
    padding-right: calc(5rem + 0.5rem);
    padding-left: calc(1rem + 36px);
    
    transition: border-radius var(--transition);
}

footer > .middle > .newsletter > layout-row:has(> input:hover)::before,
footer > .middle > .newsletter > layout-row:has(> input:focus)::before {
    color: rgba(0, 0, 0, 0.75);
}

footer > .middle > .newsletter > layout-row:has( > input:focus) button {
    border-radius: calc(48px / 2);
}

footer > .middle > .newsletter > layout-row > input:focus {
    border-radius: calc((0.85rem + 1.25rem * 2) / 2);
}

footer > .middle > .newsletter > layout-row > input::placeholder {
    color: rgba(0, 0, 0, 0.25);
}

footer > .middle > .newsletter > layout-row::before {
    content: "@";
    position: absolute;
    
    color: rgba(0, 0, 0, 0.25);
    
    font-weight: 600;
    font-size: 1rem;
    
    pointer-events: none;
    line-height: 0;
    
    left: 18px;
    top: calc(50% - 1px);
    
    width: 1rem;
    
    transform: translateY(-50%);
    transition: color var(--transition);
}

footer > .middle > .newsletter > layout-row > button {
    position: absolute;
    background-color: rgb(0, 0, 0);
    border-radius: calc(1rem - 0.25rem);
    
    top: 0.25rem;
    right: 0.25rem;
    
    width: 5rem;
    height: calc(100% - 0.5rem);
    
    transition: border-radius var(--transition);
}

footer > .middle > .newsletter > layout-row > button > img {
    position: absolute;
    
    top: 50%;
    left: 50%;
    
    width: 16px;
    height: 16px;
    
    filter: invert(1);
    transform: translate(-50%, -50%);
    transition: transform var(--transition);
}

footer > .bottom {
    justify-content: space-between;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    padding: 1rem 0;
    gap: 0 1rem;
}

footer > .bottom > .links {
    margin: 0 -1rem;
    gap: 0.5rem;
}

footer > .bottom > .links > .link {
    padding: 1rem;
}