.newsletter-dialog {
  width: min(52rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 16px;
  background: var(--gold, #e7b45c);
  color: var(--ink, #0b0c10);
  box-shadow: 0 24px 72px rgb(0 0 0 / 45%);
  font-family: var(--body);
}
.newsletter-dialog::backdrop { background: rgb(11 12 16 / 78%); }
body.newsletter-open { overflow: hidden; }
.newsletter-dialog[open] { animation: newsletter-arrive 180ms cubic-bezier(.16, 1, .3, 1); }
.newsletter-layout { display: grid; grid-template-columns: 42% 1fr; }
.newsletter-art { display: flex; align-items: center; margin: 0; padding: 1rem; background: #271b17; }
.newsletter-art img { width: 100%; height: auto; border-radius: 8px; }
.newsletter-copy { padding: 3rem 2rem 1.5rem; }
.newsletter-copy h2 { max-width: none; font: 800 clamp(2.2rem, 4vw, 3rem)/.98 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.newsletter-copy p { margin: .85rem 0 1.25rem; font-size: .98rem; line-height: 1.5; }
.newsletter-dialog button, .newsletter-trigger { font-family: inherit; cursor: pointer; }
.newsletter-close { position: absolute; top: .5rem; right: .5rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: inherit; }
.newsletter-close:hover { background: var(--gold-light); }
.newsletter-dialog :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.newsletter-label { display: block; margin: 0 0 .4rem; font-size: .9rem; font-weight: 700; }
.newsletter-email { width: 100%; min-height: 48px; padding: .7rem .8rem; border: 2px solid #754f24; border-radius: 8px; background: var(--white, #fbfaf5); color: var(--ink); font: inherit; caret-color: #63222c; }
.newsletter-email::placeholder { color: #615646; opacity: 1; }
.newsletter-choice { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1rem; font-size: .85rem; line-height: 1.5; cursor: pointer; }
.newsletter-choice input { flex: 0 0 auto; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--ink); }
.newsletter-submit { width: 100%; min-height: 48px; margin-top: 1.25rem; padding: .8rem 1rem; border: 0; border-radius: 8px; background: var(--ink); color: var(--white); font-size: 1rem; font-weight: 700; }
.newsletter-submit:hover { background: #271b17; }
.newsletter-submit:disabled { cursor: wait; opacity: .65; }
.newsletter-dialog .newsletter-note { margin: .8rem 0 .4rem; font-size: .8rem; line-height: 1.5; }
.newsletter-dismiss { display: block; min-height: 44px; margin: .3rem auto 0; padding: .4rem .8rem; border: 0; background: transparent; color: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: .25em; }
.newsletter-message { font-weight: 700; }
.newsletter-message:empty { display: none; }
.newsletter-message[data-error] { color: #63222c; }
.newsletter-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.newsletter-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem .9rem; border: 0; border-radius: 8px; background: var(--gold); color: var(--ink); font: 700 .95rem var(--body); text-decoration: none; }
.newsletter-trigger:hover { background: var(--gold-light); }
.newsletter-trigger[hidden] { display: none; }
.footer-legal .newsletter-trigger { background: transparent; color: inherit; border-radius: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: .25em; }
.footer-legal .newsletter-trigger:hover { color: var(--gold-light); }
@keyframes newsletter-arrive { from { opacity: .75; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .newsletter-dialog { width: min(27rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); }
  .newsletter-layout { display: block; }
  .newsletter-art { justify-content: center; padding: .75rem; }
  .newsletter-art img { width: 7.5rem; }
  .newsletter-copy { padding: 1.25rem; }
  .newsletter-copy h2 { max-width: 15ch; font-size: 2.3rem; }
  .newsletter-close { background: var(--gold); }
  .newsletter-copy p { margin-bottom: 1rem; }
  .newsletter-choice { margin-top: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .newsletter-dialog[open] { animation: none; } }