/* The crease, stub and ink are identical on both sides of the document change. */
:root {
  --flight-head: 77px;
  --flight-stock: #f9efd8;
  --flight-width: min(61vw, 450px, 78vh);
  --flight-width: min(61vw, 450px, 78dvh);
  --flight-center: calc(50% + var(--flight-head) / 2);
}

@media (max-width: 620px), (max-height: 820px) {
  :root { --flight-head: 64px; }
}
@media (max-height: 685px) {
  :root { --flight-head: 54px; }
}

/* Both mastheads register to the same top edge even on short screens. */
.login-nav { height: var(--flight-head); }
@media (min-width: 621px) {
  .login-brand { gap: 10px; }
}
.login-masthead { position: sticky; top: 0; z-index: 8; background: var(--canvas); }
@media (min-width: 601px) and (max-width: 620px) {
  .login-nav { width: calc(100% - 32px); }
  .login-brand { gap: 8px; font-size: 23px; }
}
@media (min-width: 361px) and (max-width: 365px) {
  .login-nav { width: calc(100% - 24px); }
}

#pass-flight[hidden] { display: none; }
.pass-coupon-ink { font: inherit; letter-spacing: inherit; }
html[data-pass-entry="pending"] :is(.head-actions, .preview-tools),
html[data-pass-return="held"] :is(.head-actions, #pinned-bar, .preview-tools),
html[data-pass-return="pending"] :is(.login-head-actions, .login-home),
html[data-pass-entry="held"] :is(.login-head-actions, .login-home) { opacity: 0; visibility: hidden; }

#pass-flight {
  position: fixed; inset: 0; z-index: 7; overflow: hidden;
  pointer-events: none; user-select: none;
  clip-path: inset(calc(var(--flight-head) + 1px) 0 0);
}
.pass-flying-card {
  position: absolute; transform-origin: 50% 66%; transform-style: preserve-3d;
}
.pass-flying-card > .pass-hanger {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none;
}
html:is([data-pass-flight="out"], [data-pass-flight="return-in"]) .login-art .pass-hanger { visibility: hidden; }
/* The intro hinges at its top edge; the handoff and coupon share a center. */
html:is([data-pass-flight="in"], [data-pass-flight="return-out"]) .desk .ticket { transform-origin: center; }

.pass-coupon,
html:is([data-pass-entry], [data-pass-return])::after {
  box-sizing: border-box; position: fixed;
  left: 50%; top: var(--flight-center); width: var(--flight-width);
  aspect-ratio: 1.92; translate: -50% -50%; transform-origin: center;
  transform: perspective(1100px) rotateZ(-6deg) rotateY(-22deg) rotateX(12deg);
  display: flex; align-items: center; padding-inline-start: calc(var(--flight-width) * .09);
  overflow: hidden; white-space: nowrap; pointer-events: none; user-select: none;
  border: 1px solid #b9aa89; border-radius: calc(var(--flight-width) * .045);
  box-shadow: 1px 2px 0 #d3c3a0, 2px 4px 0 #b1a184, 4px 8px 0 -3px #c8bea5, 5px 18px 30px -12px #39312039;
  color: #2747ac;
  font: italic 500 calc(var(--flight-width) * .131)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.081em;
  /* Letterpress fold, orange notched stamp and a machine-readable stub. */
  background:
    radial-gradient(circle,#f47b39 0 66%,transparent 70%) 10% 21% / 3.3% 6.3% no-repeat,
    repeating-linear-gradient(0deg,#37436a 0 2px,transparent 2px 4px,#37436a 4px 5px,transparent 5px 7px,#37436a 7px 10px,transparent 10px 13px) 93% 73% / 6% 31% no-repeat,
    repeating-linear-gradient(0deg,#b5a588 0 3px,transparent 3px 8px) 83% 0 / 1px 100% no-repeat,
    linear-gradient(90deg,transparent 0 82.9%,#ede0bf 83%),
    linear-gradient(90deg,#f1e2c7 0%,#fbf1de 34%,#ebe0c9 42%,#fff5e2 42.5%,#faf0da 55%,#f6ead1 83%),
    var(--flight-stock);
}

/* These two independently painted layers are available before the body parses. */
@media screen and (prefers-reduced-motion: no-preference) {
  html:is([data-pass-entry], [data-pass-return])::before {
    content: ""; position: fixed; z-index: 6;
    inset: calc(var(--flight-head) + 1px) 0 0; background: var(--canvas, #f7f7f2); pointer-events: none;
  }
  html:is([data-pass-entry], [data-pass-return])::after {
    content: "Gemini Pass"; content: "Gemini Pass" / ""; z-index: 7;
  }
}
@media (prefers-reduced-motion: reduce), print {
  #pass-flight { display: none; }
}