.blog-newsletter {
width: var(--container-width);
margin-top: 2rem;
padding: 1rem;
background: var(--surface-alt);
border: 1px solid var(--border);
display: flex;
align-items: center;
gap: 1.5rem;
}

.blog-newsletter h2 {
margin: 0;
font-size: 1.3rem;
flex-shrink: 0;
white-space: nowrap;
}

.blog-newsletter form {
  position: relative;
display: flex;
align-items: center;
gap: 1rem;
flex-grow: 1;
}

.blog-newsletter form input[type="hidden"] {
display: none;
}

.blog-newsletter input[type="email"] {
flex: 1;
min-width: 0;
}

.blog-newsletter input[type="submit"] {
flex: none;
white-space: nowrap;
}

.blog-newsletter input[type="email"]:focus-visible,
.blog-newsletter input[type="submit"]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.blog-newsletter-out,
.blog-newsletter-screenreader {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}