:root {
  color-scheme: dark;
  --paper: #f3f1ec;
  --gold: #c9a86a;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--paper);
  background: #0b1418;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.poster {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #070b10;
}
.poster::before, .poster::after {
  content: "";
  position: absolute;
  inset: 0;
}
.poster::before {
  background: linear-gradient(90deg, #07101433, transparent 65%, #07101426),
    linear-gradient(0deg, #070b1099, transparent 45%, #070b1033),
    url("../images/private-viewing-gallery.png") center / cover;
  filter: blur(4px);
  transform: scale(1.04);
}
.poster::after {
  background:
    radial-gradient(ellipse at center, transparent 35%, #02050999 100%),
    repeating-linear-gradient(0deg, #00000038 0px, #00000038 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, #ff3c3c0a 0px, #ff3c3c0a 1px, #50ff8808 1px, #50ff8808 2px, #508cff0d 2px, #508cff0d 3px);
}
.invitation-header, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 5vw;
  font-size: 10px;
  letter-spacing: .22em;
}
.invitation-header a { font-size: 14px; letter-spacing: .28em; text-decoration: none; }
.invitation-header span, footer { color: #ddd6c9b3; }
main {
  min-height: calc(100svh - 160px);
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  align-items: center;
  gap: 6vw;
  max-width: 1440px;
  margin: auto;
  padding: 44px 7vw;
}
.eyebrow { color: var(--gold); font-size: 10px; letter-spacing: .22em; line-height: 1.8; }
.poster-copy > p:not(.eyebrow) { color: #e5dfd3bf; font-size: 17px; line-height: 1.7; font-weight: 300; }
.poster-location { display: block; margin-top: 52px; font-size: 10px; letter-spacing: .23em; }
dialog {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding: 40px;
  color: var(--paper);
  background: #0d1419f0;
  border: 1px solid #c9a86a55;
  border-radius: 3px;
  box-shadow: 0 24px 100px #0008;
  backdrop-filter: blur(20px);
}
.invitation-mark { margin-bottom: 38px; color: var(--gold); font-size: 11px; letter-spacing: .2em; }
h2 { font-family: Georgia, serif; font-size: 14px; font-weight: 400; letter-spacing: -.035em; margin: 12px 0; }
#invitation-description { color: #b7bab9; font-size: 14px; line-height: 1.8; margin-bottom: 28px; }
label { display: block; font-size: 12px; margin-bottom: 10px; }
input, button { width: 100%; font: inherit; border-radius: 2px; min-height: 50px; }
input { background: #ffffff06; border: 1px solid #ffffff30; color: var(--paper); padding: 14px; font-size: 16px; }
input::placeholder { color: #8d9294; }
input:focus { border-color: var(--gold); }
button { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 14px 18px; border: 1px solid var(--gold); background: var(--gold); color: #12171b; cursor: pointer; font-size: 13px; font-weight: 600; }
button:hover { background: #ddbf88; }
button:disabled { opacity: .65; cursor: wait; }
#invitation-status { min-height: 36px; margin: 14px 0; color: #e4c69c; font-size: 12px; line-height: 1.5; }
input[aria-invalid="true"], .noscript { border-color: #e4a59c; color: #e4a59c; }
.invitation-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid #ffffff20; font-size: 10px; color: #a4a8a8; }
.invitation-foot span { font-size: 8px; letter-spacing: .12em; align-self: center; }
.back-link { display: inline-block; margin-top: 24px; font-size: 11px; color: #a4a8a8; }
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; gap: 30px; padding: 20px 24px 40px; }
  .poster-copy { text-align: center; }
  .poster-copy > p:not(.eyebrow), .poster-location { display: none; }
  dialog { margin: auto; padding: 28px; }
  .invitation-mark { margin-bottom: 24px; }
  .invitation-header { padding: 24px; }
  .invitation-header span, footer span { display: none; }
  footer { padding: 20px 24px; }
}