/* Email-only issues: the teaser's locked block and form card, and the homepage's email card.
   Board: delegation-briefs/stw-issue-15-email-gate (2026-10-21). Loaded after main.css, only by
   the teaser pages and the homepage; main.css is not touched. Colours that carry small text pass
   WCAG AA on their own ground (ratios beside them). */

/* ---- Teaser masthead ---- */
/* The issue template's masthead keeps "THINKING WEEKLY" on one line, which is wider than a phone's
   column and clips (live issue 14 at 390 px does the same). Scaled here for the teaser only. */
@media (max-width: 420px) {
  .newsletter-container .newsletter-header h1 { font-size: 1.45rem; letter-spacing: 0.06em; }
}
.newsletter-container .newsletter-date {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: #666666;                 /* 5.4:1 on #f8f7f4 */
  margin-top: 4px;
}

/* ---- The locked block: placeholder bars, never the issue's text ---- */
.issue-gate { position: relative; margin: 0 0 var(--space-5); }
.issue-gate-ghost { display: block; pointer-events: none; user-select: none; }
.issue-gate-ghost--top {
  margin-bottom: -20px;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}
.issue-gate-ghost--bottom {
  margin-top: var(--space-4);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.ig-para { display: block; margin: 0 0 var(--space-3); }
.ig-bar {
  display: block;
  height: 10px;
  margin: 0 0 12px;
  border-radius: 5px;
  background: #e2ded6;
}
.ig-bar--label { width: 22%; height: 8px; margin-bottom: 14px; background: #efd3c3; }
.ig-bar--head  { width: 56%; height: 16px; margin-bottom: 18px; background: #d6d1c7; }

/* ---- The card on top of it: same family as the site's signup block ---- */
.newsletter-container .issue-gate-card {
  position: relative;
  z-index: 1;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: linear-gradient(135deg, #161616, #0d0d0d);
  border: 1px solid rgba(230, 126, 80, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.18);
  text-align: center;
  color: #cccccc;
}
.newsletter-container .issue-gate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #E67E50;                 /* 6.7:1 on #111 */
}
.issue-gate-lock { flex: none; }
.newsletter-container .issue-gate-card h2 {
  margin: 0 0 var(--space-3);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
}
/* The form comes straight after the heading so the field and button sit on a phone's first screen
   (ENG-005 gate-2 verdict A1); the sentence saying what happens sits right under the button. */
.newsletter-container .issue-gate-sub {
  max-width: 30em;
  margin: var(--space-2) auto 0;
  font-size: var(--text-base);
  line-height: 1.6;
  color: #cccccc;                 /* 11:1 */
}

.issue-gate-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
}
.issue-gate-form input[type=email] {
  flex: 1 1 220px;
  min-width: 0;
  height: 48px;
  padding: 0 var(--space-2);
  background: #0a0a0a;
  border: 1px solid #3a3a3a;
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-family: inherit;
  font-size: 17px;                /* 16px or more keeps iOS from zooming the page */
  transition: border-color var(--dur-fast) var(--ease-snappy), box-shadow var(--dur-fast) var(--ease-snappy);
}
.issue-gate-form input[type=email]::placeholder { color: #8a8a8a; }
.issue-gate-form input[type=email]:focus {
  outline: none;
  border-color: #E67E50;
  box-shadow: 0 0 0 3px rgba(230, 126, 80, 0.3);
}
.newsletter-container .issue-gate-btn {
  flex: 1 1 auto;
  justify-content: center;        /* main.css .btn is inline-flex with no centring (verdict A2) */
  height: 48px;
  padding: 0 var(--space-3);
  border: 1px solid #B85A2C;
  border-radius: var(--radius-sm);
  background: #B85A2C;            /* white on it 4.6:1; the site's #E67E50 is 2.8:1 */
  color: #ffffff;
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-snappy), transform var(--dur-fast) var(--ease-snappy);
}
.newsletter-container .issue-gate-btn:hover { background: #A8532A; border-color: #A8532A; transform: translateY(-1px); }
.newsletter-container .issue-gate-btn:active { transform: translateY(0); }
.newsletter-container .issue-gate-btn:focus-visible { outline: 3px solid #E67E50; outline-offset: 3px; }
.newsletter-container .issue-gate-btn:disabled { opacity: 0.7; cursor: progress; transform: none; }
.stw-issue-form-el.is-done,
.stw-issue-form-el.is-done ~ .issue-gate-sub { display: none; }   /* after a send, only the result line stays */

.newsletter-container .stw-issue-msg:empty { margin: 0; }   /* stays in the accessibility tree so the live region announces */
.newsletter-container .stw-issue-msg { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: 1.5; }
.newsletter-container .stw-issue-msg.stw-msg-ok { color: #a3e4a3; }
.newsletter-container .stw-issue-msg.stw-msg-err { color: #f0a0a0; }
.newsletter-container .issue-gate-fine,
.newsletter-container .issue-gate-noscript {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #9a9a9a;                 /* 6.7:1 */
}
.newsletter-container .issue-gate-noscript a { color: #E67E50; }

.issue-gate-contents {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.newsletter-container .issue-gate-contents-head {
  margin: 0 0 var(--space-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.issue-gate-contents ul { list-style: none; margin: 0; padding: 0; }
.newsletter-container .issue-gate-contents li {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: #d0d0d6;                 /* 12:1 */
}
.newsletter-container .issue-gate-contents li:last-child { border-bottom: none; }
.newsletter-container .issue-gate-contents .ig-sec { color: #E67E50; }

.issue-gate-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.issue-gate-back { text-align: center; }
.newsletter-container .issue-gate-back a { color: #A8532A; }  /* 5:1 on cream */

@media (max-width: 480px) {
  .issue-gate-ghost--top { display: none; }   /* keeps the card's heading on a phone's first screen */
  .newsletter-container .issue-gate-card { padding: var(--space-4) var(--space-2) var(--space-3); }
  .newsletter-container .issue-gate-card h2 { font-size: 1.4rem; }
  .issue-gate-form .issue-gate-btn { flex-basis: 100%; }
}

/* ---- Homepage: the email-only card in the archive ---- */
.issue-card--email {
  border: 1px dashed rgba(230, 126, 80, 0.4);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 8px, transparent 8px 16px),
    var(--surface-1);
}
.issue-card--email .issue-title { color: var(--text-secondary); }   /* 9:1 */
.issue-card--email .issue-excerpt { color: #9a9aa3; }               /* 6.6:1 */
.issue-tag--email {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-subtle);
  color: var(--primary);                                            /* 6.6:1 */
  border-color: var(--border-accent);
}
.issue-tag--email svg { flex: none; }