/* Removable ticket module. Scene geometry and original styles stay independent. */
.info.ticket {
  --counterfoil-width: 60px;
  --ticket-ink: #efd9b5;
  top: auto; bottom: max(8%,calc(env(safe-area-inset-bottom,0px) + 12px));
  width: min(92%,640px);
  max-width: calc(100% - 2 * max(14px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)));
  color: var(--ticket-ink);
  transform: translateX(-50%) translateY(var(--signup-keyboard-lift,0px));
}
.ticket-body, .ticket-counterfoil {
  position: relative;
  /* The SVG silhouette supplies the tint, so every scallop remains transparent. */
}
.ticket-body { width: calc(100% - var(--counterfoil-width)); }
.ticket-counterfoil {
  position: absolute; inset: 0 0 0 auto; width: var(--counterfoil-width);
  display: grid; place-items: center; transform-origin: left 22%;
}
.ticket-admission {
  writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .2em;
  font-size: 12px; opacity: .8;
}
.ticket-stub-mark { position: absolute; left: 0; right: 0; font-size: 10px; opacity: .5; }
.ticket-stub-mark-top { top: 19px; }
.ticket-stub-mark-bottom { bottom: 19px; }
.ticket-outline {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  fill: none; stroke: currentColor; opacity: .7; transition: opacity .2s ease;
}
.ticket-outline path { vector-effect: non-scaling-stroke; stroke-width: .85; }
.ticket-outline .ticket-paper { fill: rgba(40,28,19,.54); stroke: none; }
.ticket-counterfoil .ticket-paper { fill: rgba(126,87,44,.14); }
.ticket-outline .ticket-inset { opacity: .4; stroke-width: .6; }
.ticket-perforation { stroke-dasharray: 3 4; opacity: .7; }
.ticket-torn-edge { visibility: hidden; }
.ticket:focus-within .ticket-outline { opacity: .95; }
.ticket-emblem {
  position: absolute; top: 23px; bottom: 23px; left: 23px; width: 80px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
  pointer-events: none;
}
.ticket-emblem::after {
  content: ''; position: absolute; left: calc(100% + 11px); top: 0; bottom: 0; width: 1px;
  background: linear-gradient(transparent,rgba(239,217,181,.3) 25%,rgba(239,217,181,.3) 75%,transparent);
}
.ticket-emblem img { display: block; width: 78px; height: 78px; object-fit: contain; opacity: .88; }
.ticket-emblem > span { font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .12em; opacity: .72; }
.ticket-content { position: relative; padding: 14px 25px 5px 132px; }
.ticket .status-label {
  font-size: 25px; line-height: 1.2; margin: 0 0 4px; padding: 0;
  letter-spacing: .1em; white-space: nowrap;
  background: linear-gradient(90deg,transparent,rgba(183,125,63,.13) 20%,rgba(183,125,63,.13) 80%,transparent);
  border-block: 1px solid rgba(239,217,181,.16);
}
.early-access { position: relative; margin: 0; color: inherit; }
.early-access [hidden] { display: none !important; }
.signup-field { height: 68px; position: relative; }
.signup-editor { height: 100%; }
#signup-email {
  display: block; width: 100%; height: 40px; margin: 0; padding: 0 2px;
  font: inherit; font-size: 18px; line-height: 1.25; color: inherit; text-align: center;
  background: transparent; border: 0; border-bottom: 1px solid rgba(239,217,181,.36);
  border-radius: 0; outline: none; color-scheme: dark; caret-color: var(--ticket-ink);
}
#signup-email::placeholder { color: rgba(239,217,181,.82); opacity: 1; }
#signup-email:focus { border-bottom-color: rgba(239,217,181,.9); }
#signup-email[aria-invalid="true"] { border-bottom-style: dashed; border-bottom-color: #e0b398; }
.signup-help { display: flex; justify-content: center; align-items: center; gap: 8px; height: 28px; font-size: 12px; line-height: 14px; }
.signup-submit {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0;
  padding: 0 4px; min-height: 28px; cursor: pointer; opacity: .72;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.signup-submit:hover { opacity: 1; }
.signup-submit:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.signup-result:focus { outline: none; }
.signup-submit:disabled { cursor: wait; opacity: .45; }
#signup-feedback:empty { display: none; }
.signup-result { display: grid; align-items: center; height: 68px; margin: 0; font-size: 24px; line-height: 1.2; }
.signup-consent { margin: 0; font-size: 12px; line-height: 15px; color: rgba(239,217,181,.65); }
.signup-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ticket .launch-link { min-height: 44px; font-size: 15px; line-height: 1.2; opacity: .78; }
.ticket .launch-arrow { display: inline-block; width: .8em; height: .8em; vertical-align: -.02em; }
.ticket.is-tearing .ticket-perforation, .ticket.is-collected .ticket-perforation { visibility: hidden; }
.ticket.is-tearing .ticket-torn-edge, .ticket.is-collected .ticket-body .ticket-torn-edge { visibility: visible; }
.ticket.is-collected .ticket-counterfoil { visibility: hidden; }
/* Reserve the original ticket footprint throughout the tear and success state. */
.ticket.is-collected .signup-consent { visibility: hidden; }
@media (max-width: 719px) and (orientation: portrait) {
  .info.ticket { --counterfoil-width: 32px; bottom: max(clamp(12px,calc(14dvh - 65px),64px),calc(env(safe-area-inset-bottom,0px) + 12px)); width: min(92%,420px); }
  .ticket-content { padding: clamp(6px,calc(4dvh - 12px),14px) 14px 3px; }
  .ticket-emblem { top: clamp(6px,calc(4dvh - 12px),14px); bottom: auto; left: 16px; width: 30px; height: 26px; z-index: 1; }
  .ticket-emblem img { width: 30px; height: 30px; }
  .ticket-emblem::after, .ticket-emblem > span { display: none; }
  .ticket .status-label { font-size: 20px; line-height: 1.22; padding-left: 30px; letter-spacing: .08em; }
  #signup-email { font-size: 16px; }
  .ticket .launch-link { font-size: 14px; }
  .signup-result { font-size: 22px; }
  .ticket-admission { font-size: 10px; }
  .ticket-stub-mark { font-size: 8px; }
}
/* Use the ticket's width for short landscape screens; the hero never moves. */
@media (max-height: 540px) and (orientation: landscape) {
  .info.ticket { --counterfoil-width: 32px; width: min(94%,740px); bottom: max(12px,calc(env(safe-area-inset-bottom,0px) + 12px)); }
  .ticket-content { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 20px; align-items: center; padding: clamp(2px,calc(10dvh - 26px),7px) 20px; }
  .ticket-emblem { top: clamp(2px,calc(10dvh - 26px),7px); bottom: auto; left: 27px; width: 26px; height: 27px; z-index: 1; }
  .ticket-emblem img { width: 26px; height: 26px; }
  .ticket-emblem::after, .ticket-emblem > span { display: none; }
  .ticket .status-label { grid-column: 1; grid-row: 1; margin: 0; padding-left: 28px; font-size: 18px; letter-spacing: .07em; white-space: nowrap; }
  .ticket-stub-mark-top { top: 10px; }
  .ticket-stub-mark-bottom { bottom: 10px; }
  .ticket .launch-link { grid-column: 1; grid-row: 2; font-size: 13px; }
  .early-access { grid-column: 2; grid-row: 1 / span 2; }
  .signup-field, .signup-result { height: calc(clamp(32px,calc(20dvh - 24px),40px) + 24px); }
  #signup-email { font-size: 16px; height: clamp(32px,calc(20dvh - 24px),40px); }
  .signup-help, .signup-submit { height: 24px; min-height: 24px; }
  .signup-result { font-size: 21px; }
  .signup-consent { font-size: 11px; line-height: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ticket-outline { transition: none; } }