.newsletter--puzzle {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 7vw, 8rem); align-items: center; justify-items: stretch;
  background: var(--black); color: var(--newsletter-bg); text-align: left;
}
.newsletter--puzzle .newsletter-inner { width: 100%; min-width: 0; }
.newsletter--puzzle h2 { margin: 1.5rem 0; font-size: clamp(3rem, 5.6vw, 6rem); line-height: .9; }
.newsletter--puzzle .newsletter-inner > p:not(.eyebrow) { margin: 0 0 2rem; }
.newsletter--puzzle .newsletter-form { margin: 0; }
.newsletter--puzzle .newsletter-form__field > input { color: inherit; border-color: currentColor; }
.newsletter--puzzle .newsletter-form__field > input::placeholder { color: inherit; opacity: .8; }
.newsletter--puzzle .newsletter-form__field > input:focus,
.newsletter--puzzle .newsletter-form__field > input:focus-visible { background: color-mix(in srgb, currentColor 8%, transparent); box-shadow: inset 0 -2px 0 currentColor; }
.newsletter--puzzle .newsletter-form__row > button { background: var(--newsletter-bg); color: var(--black); border-color: var(--newsletter-bg); }
.newsletter--puzzle .check input { accent-color: var(--newsletter-bg); }
.newsletter--puzzle .entry__error { color: inherit; }
.club-puzzle-stage { display: grid; width: 100%; }
.club-puzzle {
  position: relative; z-index: 1; justify-self: start;
  width: min(100%, 18rem); aspect-ratio: 9 / 16;
  border: 1px solid currentColor;
  background: var(--black); color: var(--newsletter-bg);
}
.club-puzzle canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.club-puzzle canvas.is-dragging { cursor: grabbing !important; }
.club-puzzle__letters { position: absolute; inset: 0; pointer-events: none; }
.club-puzzle__letter { position: absolute; top: 0; left: 0; width: 44px; height: 44px; padding: 0; border: 0; opacity: 0; background: transparent; pointer-events: none; }
.club-puzzle__letter:focus-visible { opacity: 1; outline: 2px solid var(--signal); outline-offset: 2px; }
.club-puzzle:focus-within { outline: 2px solid var(--signal); outline-offset: 5px; }
.club-modal-open { overflow: hidden; }
.club-discovery {
  inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  border: 0; background: transparent; overflow-y: auto;
}
.club-discovery[open] { display: grid; align-items: safe center; justify-items: center; }
.club-discovery::backdrop { background: rgba(3, 15, 13, .86); }
.club-discovery__panel { position: relative; z-index: 1; width: min(100%, 35rem); padding: clamp(1.6rem, 5vw, 3rem); background: var(--paper); color: var(--ink); }
.club-discovery .dialog-close { top: 1rem; right: 1rem; width: 44px; height: 44px; border: 0; }
.club-discovery .dialog-close span::before,
.club-discovery .dialog-close span::after { content: ""; position: absolute; top: 50%; left: 25%; width: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.club-discovery .dialog-close span::after { transform: rotate(-45deg); }
.club-discovery h2 { margin: 1.5rem 0; font-size: clamp(2.5rem, 8vw, 4.8rem); line-height: .86; letter-spacing: -.065em; text-transform: uppercase; overflow-wrap: anywhere; }
.club-discovery__panel > p:not(.mini-label) { font-size: 1rem; line-height: 1.55; }
.club-discovery form { margin-top: 1.6rem; }
.club-discovery label:not(.check) { display: block; margin-bottom: .5rem; font-size: .875rem; }
.club-discovery input[type="email"] { display: block; width: 100%; min-height: 52px; padding: .85rem; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); color-scheme: light; }
.club-discovery input[type="email"]::placeholder { color: #586760; opacity: 1; }
.club-discovery #sib-form-container { margin: 0; padding: 0; width: 100%; }
.club-discovery .newsletter-form__row { grid-template-columns: 1fr; gap: .75rem; }
.club-discovery .check { display: flex; font-size: .75rem; }
.club-discovery .check input { width: 1rem; height: 1rem; }
.club-discovery .form-status { margin: 1rem 0; padding: .85rem; border: 1px solid currentColor; }
.club-discovery .entry__error { display: block; color: #721c14; font-size: .75rem; }
.club-discovery .entry__error:empty { display: none; }
.club-discovery :is(input, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.club-discovery__note { margin: .85rem 0 0; font-size: .875rem; line-height: 1.45; }
.club-discovery__status { min-height: 4.5em; margin: .75rem 0 0; font-size: .875rem; line-height: 1.5; }
.club-confetti { position: fixed; inset: 0; z-index: 2; width: 100vw; height: 100dvh; pointer-events: none; }
@media (max-width: 760px) {
  .newsletter--puzzle { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 0; padding-inline: 1rem; }
  .club-puzzle-stage { min-height: calc(100svh - 4rem); place-items: center; }
  .club-puzzle { justify-self: center; width: min(100%, calc((100svh - 6rem) * .5625)); }
  .newsletter--puzzle h2 { font-size: clamp(2.75rem, 10vw, 3.75rem); }
  .newsletter--puzzle .newsletter-form__row { grid-template-columns: 1fr; gap: .8rem; }
}