/* A personal invitation, connecting Attua to Sam’s existing newsletter. */
.sam-preview-copy .newsletter-note{font:13px/1.65 var(--sans);max-width:50ch;margin:22px 0 0}
.newsletter-note a{display:table;padding:4px 0;border-bottom:1px solid var(--line);color:inherit;text-underline-offset:4px}
.newsletter-note a span{display:inline-block;margin-left:10px;transition:transform .2s}
.newsletter-note a:hover{text-decoration:underline}
.newsletter-note a:hover span{transform:translate(2px,-2px)}
.newsletter-feature{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:9%;margin-top:70px;padding:45px 42px 48px;background:var(--cream);color:var(--navy)}
.newsletter-feature:before{content:"";position:absolute;z-index:-1;inset:0;background:url('assets/attua/cotton-stock.webp') center/cover;opacity:.13;pointer-events:none}
.newsletter-feature-heading>.mono{font-size:9px;letter-spacing:.045em;margin:0 0 22px}
.newsletter-feature h2{font:400 clamp(32px,3.4vw,48px)/1.08 var(--sans);letter-spacing:-.045em;margin:0}
.newsletter-feature-copy>p{font:16px/1.65 var(--sans);max-width:48ch;margin:0 0 22px}
.newsletter-link{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;min-height:44px;border-bottom:1px solid currentColor;font:17px/1.4 var(--sans)}
.newsletter-link span{font-size:23px;transition:transform .2s}
.newsletter-link:hover span{transform:translate(3px,-3px)}
.newsletter-link:active{transform:translateY(1px)}
.newsletter-domain{display:block;font-size:8px;letter-spacing:.04em;margin-top:15px}
.newsletter-note a:focus-visible,.newsletter-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:760px){
 .newsletter-feature{grid-template-columns:1fr;gap:27px;margin-top:45px;padding:30px 24px 33px}
 .newsletter-feature-heading>.mono{margin-bottom:18px}.newsletter-feature h2{font-size:36px}
 .newsletter-feature-copy>p{font-size:15px;margin-bottom:18px}
 .newsletter-link{width:100%;font-size:16px}.newsletter-domain{font-size:8px}
 .sam-preview-copy .newsletter-note{font-size:13px;margin-top:20px}.newsletter-note a{padding:10px 0}
}
@media(max-width:350px){.newsletter-feature{padding:27px 20px}.newsletter-feature h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.newsletter-note a span,.newsletter-link span{transition:none}}
