/* shared by the front page and the press kit: the booking request button and the booking form dialog */
  /* booking request: a large outline button with the arrow in a circle, like the scroll arrow in the hero */
  .pills .cta{ height:auto; padding:10px 10px 10px 28px; gap:20px; border:1.5px solid rgba(243,240,248,.55); border-radius:999px;
    font:500 15px/1 var(--f-ui); letter-spacing:.16em; background:rgba(13,10,19,.25); }
  .pills .cta svg{ width:42px; height:42px; padding:12px; border-radius:50%; background:var(--fg); color:#1a0f2e; fill:none; stroke:currentColor; stroke-width:1.8; }
  .pills .cta:hover{ border-color:var(--lilac); color:var(--lilac); }   /* the same hover as the other outline buttons */
  /* booking: a form that opens over the page */
  dialog.book{ width:min(560px, calc(100% - 32px)); padding:0; border:1px solid #3a2d55; border-radius:10px; background:#120d1b; color:var(--fg); }
  dialog.book::backdrop{ background:rgba(8,5,14,.78); backdrop-filter: blur(6px); }
  .book form{ padding:28px; display:grid; gap:16px; }
  .book h2{ margin:0; font-family:var(--f-mark); font-weight:800; font-size:44px; line-height:.9; letter-spacing:-.02em; text-transform:uppercase; }
  .book h2 em{ font-style:normal; color:var(--lilac); }
  .book .two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .book label{ display:grid; gap:6px; font:500 11.5px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--grey); }
  .book input, .book select, .book textarea{ font:400 15px/1.4 var(--f-ui); color:var(--fg); background:#1a1327; border:1px solid #3a2d55; border-radius:6px; padding:11px 12px; width:100%; }
  /* the Event dropdown: our own arrow with the same inner padding as the text, instead of the browser's arrow at the very edge */
  .book select{ -webkit-appearance:none; appearance:none; padding-right:42px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23f3f0f8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:18px 18px; }
  .book input:focus, .book select:focus, .book textarea:focus{ outline:none; border-color:var(--lilac); box-shadow:0 0 0 3px rgba(147,88,201,.22); }
  /* browser autofill: keep the field's own dark fill and light text instead of the browser's pale blue/yellow */
  .book input:-webkit-autofill{ -webkit-text-fill-color:var(--fg); caret-color:var(--fg); box-shadow:0 0 0 1000px #1a1327 inset; transition:background-color 9999s ease-out 0s; }
  .book input:autofill{ -webkit-text-fill-color:var(--fg); caret-color:var(--fg); box-shadow:0 0 0 1000px #1a1327 inset; transition:background-color 9999s ease-out 0s; }
  .book input:-webkit-autofill:focus{ box-shadow:0 0 0 1000px #1a1327 inset, 0 0 0 3px rgba(147,88,201,.22); }
  .book .row{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:4px; }
  .book .x{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid #3a2d55; background:none; color:var(--fg); cursor:pointer; font-size:18px; }
  .book .done{ padding:40px 28px; text-align:center; }
  .book .done p{ color:var(--grey); }
  .book .pills{ display:flex; }
  .book .pills .main{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px; border:1.5px solid var(--violet); border-radius:6px; background:var(--violet); color:var(--fg);
    font:500 15px/1 var(--f-ui); text-transform:uppercase; letter-spacing:.04em; cursor:pointer; }
  .book .pills .main:hover{ background:#8d5ae0; }
  .book .pills svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; }
  @media (max-width:900px){ .book .two{ grid-template-columns:1fr; } }