/* Accessibility additions shared by both homepages. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--lorbo-layer-skip-link);
  padding: 12px 20px;
  border: 2px solid #fff1cf;
  border-radius: 6px;
  background: #24172f;
  color: #fff8e8;
  font:
    700 16px / 1.4 system-ui,
    sans-serif;
  text-decoration: underline;
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #6e4876 !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff0ce !important;
}
/* The hero button sits on bright dusk sky and clears every box shadow, so it gets its own
   two-tone ring: a light inner band and a dark outer band. */
.hero-copy .invite:focus-visible {
  outline: 3px solid #22142e !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff0ce !important;
}
.sample-gender-options input:focus-visible + span,
.alpha-device-options input:focus-visible + span {
  outline: 2px solid #6e4876;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff0ce;
}
:where(main, section, [role="region"])[tabindex="-1"]:focus {
  outline: none;
}
/* Contrast, measured from rendered pixels: bronze button labels reach 4.5:1 with a slightly
   lighter face and darker ink; hover and focus keep their brighter faces. */
html body .hero-copy #invite:not(:hover, :focus-visible)::before {
  filter: brightness(1.14) drop-shadow(0 0 12px rgb(255 207 123 / 0.32))
    drop-shadow(0 3px 4px #1e140c44);
}
html body .reader-closed-novel .book-sample-button:not(:hover, :focus-visible)::before {
  filter: brightness(1.14) drop-shadow(0 3px 4px rgb(22 13 9 / 0.5));
}
html
  body
  .mobile-shell
  .reader-closed-novel
  .book-sample-button:not(:hover, :focus-visible)::before {
  filter: brightness(1.14) drop-shadow(0 6px 10px rgb(22 13 9 / 0.36))
    drop-shadow(0 2px 3px rgb(22 13 9 / 0.48));
}
html body .ink-flow .flow-access-button:not(:hover, :focus-visible)::before {
  filter: brightness(1.14) drop-shadow(0 5px 5px rgb(9 4 17 / 0.5));
}
html
  body
  :is(
    .hero-copy #invite .invite-label,
    .reader-closed-novel .book-sample-button > span,
    .ink-flow .flow-access-button > span
  ) {
  color: #0c0805;
}
/* Narrow desktop layouts: the night-sky fade of the next section dimmed this button. */
@media (max-width: 1000px) {
  html body .ink-flow {
    z-index: 9;
  }
}
/* A soft dusk scrim under the hero lines that sit on bright sky. */
.scene-top .hero-copy .definition > span,
.mobile-shell .hero-masthead .definition,
.mobile-shell .hero-copy .hero-access-note {
  position: relative;
  isolation: isolate;
}
.scene-top .hero-copy .definition > span::before,
.mobile-shell .hero-masthead .definition::before,
.mobile-shell .hero-copy .hero-access-note::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.scene-top .hero-copy .definition > span::before {
  inset: -0.2em -0.9em;
  background: radial-gradient(
    closest-side,
    rgb(21 12 37 / 0.4),
    rgb(21 12 37 / 0.34) 62%,
    rgb(21 12 37 / 0) 100%
  );
}
.mobile-shell .hero-masthead .definition::before,
.mobile-shell .hero-copy .hero-access-note::before {
  inset: -0.35em -1.2em;
  background: radial-gradient(
    closest-side,
    rgb(13 8 24 / 0.36),
    rgb(13 8 24 / 0.3) 62%,
    rgb(13 8 24 / 0) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  :where(button, .ink-action, .invite, .book-sample-button) {
    border: 2px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }
  :where(input, select) {
    border: 1px solid FieldText !important;
  }
  .sample-gender-options input:checked + span,
  .alpha-device-options input:checked + span {
    outline: 2px solid Highlight;
  }
  .sample-book-pip[aria-current="true"] {
    border: 3px solid Highlight !important;
  }
}