.site-notice {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-forest);
  color: var(--color-ivory);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  z-index: 90;
}

/* `display: flex` above otherwise wins over the browser's built-in
   `[hidden] { display: none }` rule (author styles beat UA styles even
   when the attribute matches with equal specificity). */
.site-notice[hidden] {
  display: none;
}

.site-notice__text {
  flex: 1;
  min-width: 220px;
  color: var(--color-ivory);
  opacity: 0.9;
}

.site-notice__text a {
  color: var(--color-brass);
}

.site-notice__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.site-notice #site-notice-decline {
  background: transparent;
  border-color: var(--color-ivory);
  color: var(--color-ivory);
}

.site-notice #site-notice-decline:hover {
  background: rgba(250, 246, 240, 0.1);
}