/* Bots Meet Brains: web version of a sent newsletter issue (/issues/NNN/full).
   Mirrors Kit template v9 (.message-content) on top of the site palette in styles.css. */
.nl-masthead{padding:clamp(22px,3.4vw,30px) var(--px) clamp(16px,2.6vw,22px); text-align:center}
.nl-masthead .wordmark{font-size:clamp(34px,6.6vw,58px)}
.nl-masthead .logo{width:clamp(42px,6vw,60px)}
.nl-head{max-width:680px; margin:0 auto; padding:clamp(28px,4.4vw,44px) var(--px) 0; box-sizing:content-box}
.nl-head .kicker{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--cyan)}
.nl-head h1{margin:0 0 12px; font-family:var(--serif); font-weight:500; font-size:clamp(30px,5vw,46px); line-height:1.12; color:#fff; text-wrap:balance}
.nl-head .dek{margin:0; color:var(--soft); font-size:clamp(16px,1.6vw,18px); line-height:1.55}
.qb-callout{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin:22px 0 0; padding:16px 20px; background:#000; border:1px solid #1d4a66; border-radius:10px; text-decoration:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.qb-callout:hover{border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan)}
.qb-callout .qb-label{display:block; font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--muted)}
.qb-callout .qb-title{display:block; font-size:18px; font-weight:700; color:var(--cyan)}
.qb-callout .qb-arrow{font-size:24px; line-height:1; font-weight:700; color:var(--cyan); transition:transform .2s var(--ease)}
.qb-callout:hover .qb-arrow{transform:translateX(4px)}

/* The email body, styled like .message-content in template v9 */
.newsletter{max-width:680px; margin:0 auto; padding:clamp(26px,4vw,36px) var(--px) 8px; box-sizing:content-box;
  font-size:16px; line-height:1.6; color:var(--text); overflow-wrap:break-word}
.newsletter p{margin:0 0 22px; font-size:16px; line-height:1.6}
.newsletter h2{margin:8px 0 18px; font-size:20px; line-height:1.3; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.2px; scroll-margin-top:20px}
.newsletter h3{margin:30px 0 12px; font-size:18px; line-height:1.35; font-weight:700; color:#fff; scroll-margin-top:20px}
.newsletter h2 + h3{margin-top:0}
.newsletter strong, .newsletter b{color:#fff; font-weight:700}
.newsletter a{color:var(--cyan); text-decoration:underline; text-underline-offset:3px}
.newsletter a:hover{color:#4ff0f7}
.newsletter figure{margin:0 0 18px}
.newsletter figure img{width:100%; height:auto; border-radius:6px; background:#03070c}
.newsletter figcaption{margin:6px 0 0; font-size:12px; line-height:1.4; font-style:italic; font-weight:600; color:#bfbfbf}
.newsletter hr{border:0; border-top:2px solid var(--rule); height:0; margin:36px 0 34px}
.newsletter ul, .newsletter ol{margin:0 0 22px; padding-left:22px}
.newsletter li{margin:0 0 10px; font-size:16px; line-height:1.6}
.newsletter li::marker{color:var(--cyan)}
.newsletter blockquote{margin:0 0 22px; padding:4px 0 4px 16px; border-left:3px solid var(--cyan); color:var(--soft); font-style:italic}
.newsletter .qb-more{margin:-6px 0 22px}
.newsletter a.qb-btn, .cta a.qb-btn{display:inline-block; padding:12px 22px; border-radius:8px; background:var(--cyan); color:#001417; font-weight:700; text-decoration:none}
.newsletter a.qb-btn:hover{background:#4ff0f7; color:#001417; box-shadow:0 8px 24px -8px rgba(13,224,235,.6)}

/* Subscribe call to action */
.cta{max-width:680px; margin:10px auto 0; padding:clamp(24px,4vw,34px) var(--px) clamp(30px,5vw,44px); box-sizing:content-box}
.cta-box{background:#000; border:1px solid #1d4a66; border-radius:12px; padding:clamp(22px,3.6vw,32px)}
.cta h2{margin:0 0 8px; font-family:var(--serif); font-weight:500; font-size:clamp(24px,3.6vw,32px); line-height:1.2; color:#fff}
.cta p.cta-lede{margin:0 0 20px; color:var(--soft)}
.cta .issue-links{margin:18px 0 0; font-size:14px; color:var(--muted)}
.cta .issue-links a{text-underline-offset:3px}

@media (max-width:560px){
  .qb-callout{flex-wrap:nowrap}
  .newsletter h2{font-size:19px}
}