/* Newsletter sign-up, the AI origin note, the privacy notice and the newsletter's one-time pages. */

/* ---------- Newsletter form (home, recipe and the form's error page) ---------- */
.newsletter-wrap { width: calc(100% - 40px); max-width: 1080px; margin: 0 auto 56px; }
.recipe > .newsletter { width: min(1192px, calc(100% - 48px)); margin: 48px auto 0; }
.newsletter {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr 1.1fr; align-items: center; gap: 18px 28px;
  padding: 28px; border-top: 4px solid var(--red); border-radius: var(--radius); background: var(--paper); color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.newsletter-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  color: var(--red); background: rgba(201, 35, 31, .08); border: 1.5px solid rgba(201, 35, 31, .35);
}
.newsletter-icon svg { width: 30px; height: 30px; }
.newsletter-kicker { margin: 0 0 4px; color: var(--red-dark); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.newsletter-copy h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-style: italic; }
.newsletter-copy p:last-child { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.5; }
.newsletter-form { display: grid; gap: 10px; }
.newsletter-label { font-size: .9rem; font-weight: 700; }
.newsletter-row { display: flex; gap: 10px; }
.newsletter-row input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid rgba(43, 30, 22, .3); border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
.newsletter-row input:focus-visible { outline: 3px solid var(--lantern); outline-offset: 1px; }
.newsletter-row .btn { flex: none; min-height: 48px; }
.newsletter-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); font-size: .88rem; line-height: 1.45; cursor: pointer; }
.newsletter-consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); }
.newsletter-consent a { color: var(--red-dark); font-weight: 700; }
.newsletter-error { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--red-dark); font-weight: 600; }
.newsletter-error .icon { flex: none; width: 18px; height: 18px; }
.newsletter-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Recipe: where it came from ---------- */
.recipe-origin {
  display: flex; align-items: flex-start; gap: 10px; width: min(1192px, calc(100% - 48px)); margin: 28px auto 0;
  color: var(--on-night-soft); font-size: .88rem; line-height: 1.5;
}
.recipe-origin .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--lantern); }

/* ---------- Newsletter pages and privacy header (dark, like the 404) ---------- */
.message-page, .privacy-hero {
  position: relative; overflow: hidden; display: grid; place-items: center; padding: 56px 20px 64px;
  background:
    radial-gradient(520px 340px at 50% 0, rgba(242, 165, 59, .28), transparent 70%),
    linear-gradient(180deg, #2a1a10, #17100b);
}
.message-page { min-height: 56vh; }
.privacy-hero { padding-bottom: 88px; }
.message-inner, .privacy-hero-inner { position: relative; z-index: 1; max-width: 560px; text-align: center; }
.message-icon {
  display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 14px; border-radius: 50%;
  color: var(--lantern); border: 1.5px solid rgba(242, 165, 59, .6); background: rgba(242, 165, 59, .08);
}
.message-icon svg { width: 40px; height: 40px; }
.message-page h1, .privacy-hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); font-style: italic; font-weight: 600; }
.message-page p, .privacy-hero p { color: var(--on-night-soft); line-height: 1.6; }
.message-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.message-page + .newsletter-wrap { margin-top: -32px; position: relative; z-index: 1; }

/* ---------- Privacy notice ---------- */
.privacy {
  position: relative; z-index: 1; width: calc(100% - 40px); max-width: 860px; margin: -48px auto 56px; padding: 32px 36px;
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.privacy section + section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.privacy h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.privacy h2 .icon { flex: none; width: 22px; height: 22px; color: var(--red); }
.privacy p, .privacy li { line-height: 1.65; }
.privacy p { margin: 10px 0 0; }
.privacy ul { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 1.2rem; }
.privacy a { color: var(--red-dark); font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 1020px) {
  .newsletter { grid-template-columns: auto 1fr; }
  .newsletter-form { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .newsletter-wrap { width: calc(100% - 24px); margin-bottom: 32px; }
  .recipe > .newsletter, .recipe-origin { width: calc(100% - 32px); }
  .newsletter { grid-template-columns: 1fr; gap: 14px; padding: 22px 16px; }
  .newsletter-icon { width: 52px; height: 52px; }
  .newsletter-row { flex-direction: column; }
  .newsletter-row .btn { width: 100%; }
  .newsletter-consent { min-height: 44px; }
  .message-page { min-height: 64vh; }
  .message-actions .btn { width: 100%; }
  .privacy { width: calc(100% - 24px); margin-top: -36px; padding: 22px 16px; }
  .privacy h2 { font-size: 1.15rem; }
}