.club-launch { border: 1px solid rgba(255, 255, 255, .7); padding: 8px 10px; background: transparent; color: inherit; font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; }.club-popover[hidden] { display: none; }.club-popover { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(12, 11, 10, .75); backdrop-filter: blur(5px); }.club-popover__dialog { position: relative; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(310px, 1fr); width: min(840px, 100%); max-height: min(680px, calc(100vh - 48px)); overflow: auto; background: var(--paper); box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }.club-popover__close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--ink); border-radius: 50%; background: rgba(243, 238, 231, .9); color: var(--ink); font-size: 25px; line-height: 1; cursor: pointer; }.club-popover__media { min-height: 100%; background: #d8d0c5; }.club-popover__media img { display: block; width: 100%; height: 100%; min-height: 480px; object-fit: cover; object-position: center; }.club-popover__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 70px); }.club-popover__eyebrow { margin: 0 0 16px; font-family: "DM Mono", monospace; font-size: .61rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }.club-popover__content h2 { margin: 0 0 18px; font-size: clamp(3.2rem, 5vw, 5.4rem); line-height: .84; }.club-popover__content > p:not(.club-popover__eyebrow):not(.club-popover__status) { max-width: 330px; margin: 0 0 25px; color: var(--muted); font-size: .84rem; line-height: 1.7; }.club-popover__content label { display: block; margin-bottom: 10px; color: var(--muted); font-family: "DM Mono", monospace; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }.club-popover__content input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); padding: 12px 0; background: transparent; color: var(--ink); outline: 0; }.club-popover__content form button { width: 100%; margin-top: 18px; border: 0; padding: 15px; background: var(--ink); color: var(--paper); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }.club-popover__content form button span { color: var(--gold); }.club-popover__content button:disabled { opacity: .55; cursor: wait; }.club-popover__status { min-height: 20px; margin: 10px 0 0; color: var(--gold); font-size: .75rem; }.club-popover__decline { align-self: flex-start; margin-top: 7px; border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 4px; background: none; color: var(--ink); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }.club-popover__content small { margin-top: 19px; color: var(--muted); font-size: .63rem; line-height: 1.5; }.club-popover-open { overflow: hidden; }
@media (max-width: 850px) { .club-launch { display: none; } } @media (max-width: 620px) { .club-popover { padding: 14px; } .club-popover__dialog { grid-template-columns: 1fr; max-width: 430px; } .club-popover__media { height: 180px; } .club-popover__media img { min-height: 0; height: 180px; object-position: center; } .club-popover__content { padding: 32px 28px; } .club-popover__content h2 { font-size: 3.8rem; } }