/* Creative Value Monitor — newsletter sign-up component.
   Component-only styles; relies on the CSS custom properties defined in
   each page's :root (homepage inline, Updates pages via updates.css). */

.newsletter {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 44px 0 4px;
  border-top: 1px solid var(--line);
}

.newsletter-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
}

.newsletter-title {
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.04;
  margin: 0;
  max-width: 560px;
  text-wrap: balance;
}

.newsletter-copy {
  margin: 13px 0 0;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 520px;
}

.newsletter-form {
  margin-top: 24px;
  max-width: 540px;
}

.newsletter-row {
  display: flex;
  gap: 10px;
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: var(--navy);
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  background: rgba(232,232,209,.5);
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}

.newsletter-input::placeholder { color: rgba(8,37,70,.45); }

.newsletter-input:focus {
  border-color: var(--navy);
  background: rgba(232,232,209,.82);
}

.newsletter-btn {
  flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  background: var(--navy);
  border: 1px solid var(--navy);
  padding: 13px 22px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.newsletter-btn:hover { background: transparent; color: var(--navy); }

.newsletter-btn:disabled,
.newsletter-input:disabled { opacity: .55; cursor: default; }

.newsletter-privacy {
  margin: 13px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--slate);
}

.newsletter-status {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
  min-height: 1.2em;
  color: var(--muted);
}

.newsletter-status[data-state="ok"]  { color: #1a5d2e; }
.newsletter-status[data-state="err"] { color: #8a2424; }

/* Honeypot — visually hidden, off-screen */
.newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 560px) {
  .newsletter-row { flex-direction: column; }
  .newsletter-btn { width: 100%; }
}