/* Museum Heist waitlist page. Uses the site tokens from style.css; adds only the layout and the form field. */

.waitlist{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:80px;align-items:center;
  padding:var(--section-y) var(--gutter);
}
.waitlist-copy{max-width:36em}
.waitlist-copy .display{margin-bottom:28px}
.waitlist-lede{margin:0 0 40px;font-size:var(--fs-label);line-height:1.45;color:var(--ink);max-width:30em}
.waitlist .phone{justify-self:center}

.field-label{display:block;margin-bottom:8px;font-size:var(--fs-small);font-weight:600}
.field-row{display:flex;gap:12px;flex-wrap:wrap}
.field{
  flex:1 1 260px;min-width:0;min-height:48px;
  padding:0 20px;
  font:400 var(--fs-body)/1 var(--sans);color:var(--ink);
  background:var(--paper-top);
  border:1px solid var(--text-2);   /* 5.3:1 on the pink, so the edge of the control is visible */
  border-radius:999px;
  box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur) var(--ease);
}
.field:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.field[aria-invalid="true"]{border-color:#8a1f3d;border-width:2px;padding:0 19px}
.waitlist .button{flex:0 0 auto}
.waitlist .button[disabled]{opacity:.6;cursor:default;transform:none}

.form-status{margin:12px 0 0;min-height:1.5em;font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.form-status.is-error{color:#7a1530}   /* 7.1:1 on the pink */
.waitlist-note{margin:20px 0 0;font-size:var(--fs-small);color:var(--band-muted)}

/* Shown in place of the form once the email is in. */
.waitlist-done{margin:0 0 20px;font-family:var(--serif);font-size:var(--fs-title);line-height:1.15;letter-spacing:-.015em}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:1100px){
  .waitlist{grid-template-columns:1fr;gap:56px}
  .waitlist-copy{max-width:none}
}
@media (max-width:640px){
  .field-row{flex-direction:column}
  .field,.waitlist .button{flex:0 0 auto;width:100%;justify-content:center}
}
.field::placeholder{color:#6b6b6b;opacity:1}   /* 5.2:1 on the field */


/* Headline: bigger, now that it is two words and the eyebrow is gone */
.waitlist .display{font-size:clamp(40px,5.8vw,78px);line-height:1;letter-spacing:-.025em}

/* Dark page: the design system's dark ground (#31533C), text #f2f2f2. Flipped from the light version. */
:root{--ink:#f2f2f2;--text-2:#dbe6de;--muted:#c9d7cd;--band-muted:#dbe6de}
body,.waitlist.band,.footer{background:#31533C;color:#f2f2f2}
.waitlist-lede,.waitlist-copy .display,.field-label{color:#f2f2f2}
.field{background:rgba(255,255,255,.10);color:#f2f2f2;border-color:#9fb8a7;box-shadow:none}
.field::placeholder{color:#d5e1d9;opacity:1}
.waitlist .button{background:#f2f2f2;color:#151619;box-shadow:none}
.waitlist .button:hover{background:#fff}
.form-status,.waitlist-done{color:#f2f2f2}
.form-status.is-error{color:#fd9693}
.phone-screen{background:#151619;filter:none}
a:focus-visible,button:focus-visible{outline-color:#f2f2f2}