/* ==========================================================================
   "the weekly code drop" band + navy footer
   ========================================================================== */

.newsletter { padding-block: 64px 72px; }
.newsletter__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6) var(--space-8);
    padding: 52px 48px;
    border-radius: var(--radius-2xl);
    background: var(--band-bg);
    color: var(--band-text);
}
.newsletter__copy { flex: 1 1 420px; max-width: 560px; }
.newsletter__title {
    margin: 0;
    color: var(--band-text);
    font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-transform: lowercase;
}
.newsletter__text { margin: 12px 0 0; color: var(--band-muted); font-size: var(--fs-base); line-height: 1.45; }

.newsletter__form {
    flex: 0 1 440px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 20px;
    border-radius: var(--radius-lg);
    background: #FFFFFF;
}
.newsletter__input {
    flex: 1 1 160px;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 16px;
}
.newsletter__input::placeholder { color: #8A8EA3; }
.newsletter__form:focus-within { box-shadow: 0 0 0 4px rgba(195, 245, 50, 0.6); }
.newsletter__btn { min-height: 44px; padding-inline: 20px; border-radius: 10px; font-size: var(--fs-base); }
.newsletter__status { flex: 1 1 100%; order: 10; margin: 0; padding: 0 0 2px; min-height: 0; font-size: var(--fs-sm); font-weight: 700; }
.newsletter__status:empty { display: none; }
.newsletter__status.is-success { color: var(--color-success); }
.newsletter__status.is-error { color: var(--color-sale); }

@media (max-width: 991.98px) {
    .newsletter__form { flex: 1 1 100%; max-width: 560px; }
}
@media (max-width: 640px) {
    .newsletter { padding-block: 40px 72px; }
    .newsletter__inner { padding: 36px 22px 28px; border-radius: var(--radius-2xl); gap: var(--space-6); }
    .newsletter__text { font-size: 1.0625rem; }
    .newsletter__form { padding: 8px 8px 8px 20px; }
}

.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: var(--space-7) 64px;
    padding-block: 56px 36px;
}
.site-footer__logo .brand-logo__img { height: 38px; }
.site-footer__about { max-width: 34ch; margin: 14px 0 0; color: var(--footer-link); font-size: var(--fs-base); line-height: 1.45; }
.site-footer__heading {
    margin: 0 0 12px;
    color: var(--footer-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: lowercase;
}
.site-footer__col ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col li + li { margin-top: 10px; }
.site-footer__col a { color: var(--footer-link); font-size: var(--fs-base); text-decoration: none; text-transform: lowercase; }
.site-footer__col a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer__col .widget + .widget { margin-top: var(--space-6); }
.site-footer__col .menu { margin: 0; padding: 0; list-style: none; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    padding-block: 26px 40px;
    border-top: 1px solid var(--footer-line);
    font-size: var(--fs-sm);
    color: var(--footer-muted);
}
.site-footer__bottom p { margin: 0; }
.site-footer__menu ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-footer__menu a { color: var(--footer-muted); text-decoration: none; text-transform: lowercase; }
.site-footer__menu a:hover { color: #FFFFFF; }
.site-footer__menu { margin-left: auto; }

@media (max-width: 991.98px) {
    .site-footer__inner { grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: var(--space-7) 64px; }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .site-footer__inner { padding-block: 44px 32px; gap: 36px 64px; }
    .site-footer__about { font-size: 1.0625rem; }
    .site-footer__col a { font-size: 1.0625rem; }
    .site-footer__col li + li { margin-top: 14px; }
    .site-footer__heading { font-size: 1.0625rem; margin-bottom: 16px; }
    .site-footer__menu { margin-left: 0; }
}