/* The footer has one primary action: join the STRAND mailing list. */
html body > footer.site-footer .inner-footer { padding: 2.25rem 2rem 1.5rem; }

.site-footer .footer-updates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 370px);
  align-items: center;
  gap: 2.5rem;
  padding: 1.75rem 2rem;
  border: 1px solid #d0a56359;
  border-radius: .9rem;
  background: radial-gradient(circle at 0 0, #ff8a241c, transparent 50%), linear-gradient(120deg, #22262a, #151d23);
  box-shadow: inset 0 1px 0 #ffffff10, 0 .6rem 1.5rem #0003;
}
.site-footer .footer-updates-copy { display: flex; align-items: center; gap: 1.35rem; min-width: 0; }
.site-footer .footer-updates-copy img {
  width: 5rem;
  height: 5rem;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 .35rem .55rem #0008);
}
.site-footer .footer-updates-copy > div { min-width: 0; }
.site-footer .footer-updates-copy span {
  color: var(--strand-ember);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.site-footer .footer-updates h2 {
  margin: .3rem 0 .4rem;
  color: #f4eee4;
  font-family: var(--strand-display-font, Impact, sans-serif);
  font-size: clamp(2.25rem, 3vw, 2.7rem);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1;
}
.site-footer .footer-updates-copy p {
  max-width: 33rem;
  margin: 0;
  color: #d0c9bd;
  font-size: .91rem;
  line-height: 1.5;
}
.site-footer .footer-updates-form label {
  display: block;
  margin-bottom: .5rem;
  color: #e9e1d4;
  font-size: .78rem;
  font-weight: 700;
}
.site-footer .footer-updates-fields { display: flex; gap: .55rem; }
.site-footer .footer-updates-fields input {
  min-width: 0;
  min-height: 3rem;
  flex: 1 1 auto;
  padding: .7rem .85rem;
  border: 1px solid #ffffff55;
  border-radius: .4rem;
  background: #0d1318;
  color: #fff;
}
.site-footer .footer-updates-fields input::placeholder { color: #aab4ba; }
.site-footer .footer-updates-fields button {
  min-height: 3rem;
  flex: 0 0 auto;
  padding: .6rem 1rem;
  border: 1px solid #c4a66f;
  border-radius: .4rem;
  background: linear-gradient(145deg, #dec38b, #b99550);
  color: #211910;
  font-family: var(--strand-display-font, Impact, sans-serif);
  font-size: 1.4rem;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff5, 0 2px 0 #624c29;
}
.site-footer .footer-updates-fields button:hover { background: #e9d09a; }
.site-footer .footer-updates-fields button:disabled { opacity: .65; cursor: wait; }
.site-footer .footer-updates-status {
  margin: .85rem 0 0;
  color: #d0c9bd;
  font-size: .9rem;
  line-height: 1.45;
}
.site-footer .footer-updates-status:empty { display: none; }
.site-footer .footer-updates-status[data-state="success"],
.site-footer .footer-updates-status[data-state="error"] {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem .9rem;
  border: 1px solid #c7a76a8c;
  border-radius: .5rem;
  background: #c7a76a20;
  color: #f8ebd1;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #d8b46c;
}
.site-footer .footer-updates-status[data-state="success"]::before { content: "✓"; color: #e6c27b; font-size: 1.15rem; line-height: 1; }
.site-footer .footer-updates-status[data-state="error"] { border-color: #d777628c; background: #d7776218; box-shadow: inset 3px 0 0 #d77762; }
.site-footer .footer-updates-status[data-state="error"]::before { content: "!"; color: #f1aa98; font-size: 1.15rem; line-height: 1; }
html body > footer.site-footer .footer-bottom { margin-top: 1.75rem; }

@media (max-width: 800px) {
  .site-footer .footer-updates { grid-template-columns: 1fr; gap: 1.35rem; }
  .site-footer .footer-updates-form { width: min(100%, 460px); }
}
@media (max-width: 600px) {
  html body > footer.site-footer .inner-footer { padding: 1.5rem 1.25rem; }
  .site-footer .footer-updates { padding: 1.5rem 1.25rem; }
  .site-footer .footer-updates-copy { align-items: flex-start; gap: .9rem; }
  .site-footer .footer-updates-copy img { width: 3.75rem; height: 3.75rem; }
  .site-footer .footer-updates h2 { font-size: 2.2rem; }
  .site-footer .footer-updates-fields { flex-direction: column; }
  .site-footer .footer-updates-fields button { width: 100%; }
}