/* "This website needs to be opened in your browser": the modal escape.js shows inside the
   Instagram or Facebook in-app browser on front domains with <body data-escape="1">.
   Parchment on the night sky, like the plaque and the sign. No animation: nothing to reduce. */
.kp-escape[hidden] { display: none; }
.kp-escape {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: rgba(8, 5, 14, .8);
}
.kp-escape-card {
  width: min(360px, 100%); padding: 22px 20px 18px; border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 40%),
    repeating-linear-gradient(180deg, rgba(60, 30, 10, .05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, var(--parchment), var(--parchment-deep));
  color: var(--ink); text-align: center; font-family: var(--sans);
  box-shadow: 0 0 0 3px var(--wood), 0 9px 0 3px var(--wood-dark), 0 26px 40px rgba(0, 0, 0, .65), 0 0 36px rgba(160, 110, 255, .45);
}
.kp-escape-title { margin: 0 0 8px; font: 900 19px/1.25 var(--display); color: var(--plum); }
.kp-escape-copy { margin: 0 0 14px; font: italic 16px/1.4 var(--hand); }
.kp-escape-button {
  display: block; padding: 14px 18px; border-radius: 6px; text-decoration: none; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 225, 190, .14), transparent 34%, rgba(20, 8, 2, .3)),
    var(--wood);
  color: #fff1d6; font: 700 17px/1.1 var(--display); letter-spacing: .04em;
  box-shadow: 0 5px 0 var(--wood-dark), inset 0 1px 0 rgba(255, 220, 170, .4);
}
.kp-escape-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.kp-escape-button[hidden] { display: none; }
.kp-escape-hint { margin: 12px 0 10px; font-size: 14px; line-height: 1.4; }
.kp-escape-hint--late, .kp-escape--manual .kp-escape-hint { font-weight: 800; font-size: 15px; margin-top: 0; }
.kp-escape-copy-link {
  padding: 8px 14px; border-radius: 6px; border: 2px solid var(--wood); background: transparent;
  color: var(--ink); font: 800 13px/1.1 var(--sans); cursor: pointer;
}
.kp-escape-url {
  display: block; width: 100%; margin: 8px 0 0; padding: 8px; border: 1px solid var(--wood); border-radius: 6px;
  background: #fff; color: var(--ink); font: 13px/1.2 var(--sans);
}
.kp-escape-url[hidden] { display: none; }
.kp-escape-feedback { margin: 8px 0 0; min-height: 1.2em; font-size: 13px; }
/* While the modal is up the page behind is scenery only. */
body.kp-escape-active { overflow: hidden; }
body.kp-escape-active .top, body.kp-escape-active main, body.kp-escape-active .story-pause,
body.kp-escape-active .lane, body.kp-escape-active .foot { pointer-events: none; }