/* hol-signup.css — the sign-up at the foot of every page: invitation beside a paper card (su- classes),
   on a quiet night sky. */

.page-end { background: var(--night) var(--grain); }
.page-end::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(247, 240, 227, .55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 9%, rgba(247, 240, 227, .4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 38%, rgba(247, 240, 227, .5) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 36% 58%, rgba(247, 240, 227, .35) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 92% 72%, rgba(247, 240, 227, .45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 8% 82%, rgba(247, 240, 227, .35) 0 .8px, transparent 1.4px),
    radial-gradient(50% 40% at 85% 22%, rgba(207, 169, 94, .12), transparent 70%);
  background-size: 520px 420px, 640px 380px, 460px 500px, 700px 440px, 560px 620px, 480px 360px, 100% 100%;
}

.su { position: relative; isolation: isolate; padding: clamp(56px, 8vw, 100px) 0 clamp(56px, 7vw, 90px); }
/* The editor's photo behind the sign-up, darkened so the card and the copy stay legible. */
.su-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.su-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.su-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 31, 25, .72), rgba(14, 31, 25, .6) 50%, rgba(14, 31, 25, .9)); }
.su-has-photo .su-msg h2, .su-has-photo .su-msg p { text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.su-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; z-index: 1;
}
.su-msg .eyebrow { color: var(--gold); }
.su-msg h2 { font-size: clamp(36px, 4.4vw, 58px); color: var(--on-dark); margin: 14px 0 0; }
.su-msg h2 .script { color: var(--gold-2); display: block; }
.su-msg p { color: var(--on-dark-2); font-size: clamp(16px, 1.5vw, 18px); margin: 16px 0 0; max-width: 40ch; }
.su-card {
  background: var(--paper) var(--grain); border-radius: 18px; padding: clamp(22px, 3vw, 36px);
  box-shadow: var(--shadow-lg); display: grid; gap: 16px;
}
.su-card .check { margin-top: 0; }
.su-address { display: grid; gap: 16px; }
.su-card .btn { justify-self: start; margin-top: 2px; }
.su-card .form-note { margin: 0; }

@media (max-width: 860px) {
  .su-grid { grid-template-columns: 1fr; gap: 28px; }
  .su-card .btn { justify-self: stretch; }
}
@media (max-width: 520px) {
  .su-card .field-row { grid-template-columns: 1fr; }
}