/* The frames, lettering, icons and tear tabs are display crops of the original PNGs. */
.newsletter-invitations { position: relative; width: min(310px, 100%); aspect-ratio: 508 / 327; margin: 15px 0 20px; }
.newsletter-invite { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: var(--mini-ratio, 636 / 164); padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; cursor: pointer; text-align: left; container-type: inline-size; }
.newsletter-mini-art, .newsletter-full-art { position: absolute; inset: 0; pointer-events: none; }
.newsletter-mini-art > svg, .newsletter-full-art > svg { display: block; width: 100%; height: 100%; }
.newsletter-invite:focus-visible, .newsletter-dialog button:focus-visible { outline: 3px solid #2b36e9; outline-offset: 3px; }
.newsletter-invite:hover { filter: drop-shadow(2px 2px 0 #2b36e9); }
.invite-fallback { position: absolute; inset: 12px 14px auto; font: bold 17px/1.1 "Times New Roman", serif; }
.graphic-ready .invite-fallback { visibility: hidden; }
.invite-sample { position: absolute; left: var(--left); top: var(--top); width: var(--width); height: var(--height); display: flex; align-items: center; padding: 0 3px; background: var(--sample-surface, #faf9ee); }
.cycling-email { display: block; white-space: nowrap; overflow: visible; font: min(14px, 4.2cqw)/1.4 "IBM Plex Mono", monospace; }
.invite-sample .cycling-email { color: #191a14; }
[data-newsletter="web"] .invite-sample .cycling-email { color: #141ae9; text-decoration: underline; }
/* Stable reserved height contains the tallest tear-off without moving the page. */
.newsletter-dialog { padding: 0; border: 0; background: transparent; color: #171813; width: min(620px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow: auto; }
.newsletter-dialog::backdrop { background: #10110d99; }
.newsletter-canvas { position: relative; aspect-ratio: var(--full-ratio, 842 / 471); container-type: inline-size; }
.newsletter-canvas:not(.graphic-ready) { background: var(--field-surface, #fff); box-shadow: inset 0 0 0 1px #aaa99e; }
.newsletter-canvas h2 { position: absolute; top: 12%; left: 7%; right: 7%; margin: 0; font: bold clamp(20px, 6vw, 34px)/1.1 "Times New Roman", serif; }
/* Headings and labels remain available to assistive technology; artwork supplies visible type. */
.graphic-ready h2, .newsletter-canvas > label, .newsletter-honey { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.newsletter-input-wrap { position: absolute; left: var(--left); width: var(--width); top: calc(var(--top) + var(--height) / 2); height: max(var(--height), 44px); transform: translateY(-50%); }
.newsletter-input-wrap input { display: block; width: 100%; height: 100%; min-width: 0; padding: 5px 8px; border: 1px solid #777; border-radius: 0; background: var(--field-surface, #fff); color: #171813; font: 16px/1.3 "IBM Plex Mono", monospace; }
.newsletter-input-wrap input::placeholder { color: transparent; }
.newsletter-input-wrap input:focus-visible { outline: 2px solid #2b36e9; outline-offset: 2px; }
.newsletter-placeholder { pointer-events: none; position: absolute; inset: 0; display: flex; align-items: center; padding: 0 8px; }
.newsletter-placeholder .cycling-email { color: #696a63; font-size: min(14px, 3.6cqw); }
[data-treatment="web"] .newsletter-placeholder .cycling-email { font-size: min(14px, 2.45cqw); }
[data-treatment="mac"] .newsletter-placeholder .cycling-email { font-size: min(14px, 3.9cqw); }
.newsletter-input-wrap.has-value .newsletter-placeholder, .newsletter-input-wrap input:not(:placeholder-shown) + .newsletter-placeholder { visibility: hidden; }
.newsletter-submit, .newsletter-close, .newsletter-cancel.in-artwork { position: absolute; left: var(--left); top: clamp(calc(max(var(--height), 44px) / 2), calc(var(--top) + var(--height) / 2), calc(100% - max(var(--height), 44px) / 2)); width: var(--width); height: max(var(--height), 44px); transform: translateY(-50%); border: 0; padding: 3px; border-radius: 0; cursor: pointer; font: bold clamp(12px, 3.8cqw, 21px)/1.1 "Times New Roman", serif; color: #171813; background: #d1d0c6; }
.newsletter-close { left: clamp(0px, calc(var(--left) + var(--width) / 2 - max(var(--width), 44px) / 2), calc(100% - max(var(--width), 44px))); top: clamp(0px, calc(var(--top) + var(--height) / 2 - max(var(--height), 44px) / 2), calc(100% - max(var(--height), 44px))); width: max(var(--width), 44px); transform: none; font: 24px/1 Arial, sans-serif; background: #f8f7eb; }
.newsletter-close:focus-visible { outline-offset: -3px; }
[data-treatment="window"] .newsletter-submit { top: max(calc(var(--top) + var(--height) / 2), calc(var(--input-top) + var(--input-height) / 2 + max(var(--input-height), 44px) / 2 + 4px + max(var(--height), 44px) / 2)); }
/* Retain the generated button text and bevels until a real loading/success state replaces it. */
.graphic-ready .newsletter-submit, .graphic-ready .newsletter-cancel.in-artwork, .graphic-ready .newsletter-close.in-artwork { color: transparent; background: transparent; }
[aria-busy="true"] .newsletter-submit, form:has(.newsletter-status[data-state="success"]) .newsletter-submit { color: #171813; background: #d1d0c6; background-clip: content-box; padding: 5px; }
[data-treatment="tear"] [aria-busy="true"] .newsletter-submit, [data-treatment="tear"] form:has(.newsletter-status[data-state="success"]) .newsletter-submit { color: #dfff19; background-color: #171813; }
.newsletter-submit:disabled { cursor: default; }
.newsletter-cancel:not(.in-artwork) { position: absolute; top: calc(100% + 10px); right: 10px; min-width: 64px; min-height: 44px; padding: 7px; border: 1px solid #99998e; border-radius: 0; background: #e2e1d8; color: #171813; cursor: pointer; font: 13px/1.2 "IBM Plex Mono", monospace; z-index: 1; }
.newsletter-feedback { position: relative; padding: 12px 88px 10px 14px; background: #faf9ee; border: 1px solid #aaa99e; }
[data-treatment="mac"] .newsletter-feedback { padding-right: 14px; }
.newsletter-consent { margin: 0; font: 12px/1.45 "IBM Plex Mono", monospace; }
.newsletter-status { min-height: 1.4em; margin: 8px 0 0; font: 13px/1.4 "IBM Plex Mono", monospace; }
.newsletter-status[data-state="error"] { color: #a1250b; }
.newsletter-status[data-state="success"] { color: #234900; }
[data-treatment="mac"] .newsletter-submit, [data-treatment="mac"] .newsletter-cancel.in-artwork { font-family: Geneva, Arial, sans-serif; }
@media (max-height: 460px) { .newsletter-dialog { width: min(500px, calc(100vw - 24px)); } }