:root {
  --theme-color--blue: oklch(69.14% 0.174 245.01);
  --theme-color--orange: oklch(70.22% 0.2 45.1);
  --theme-color--magenta: oklch(61.8% 0.19 354.64);
  --theme-color--green: oklch(71.53% 0.175 155.352);
  --theme-color--violet: oklch(56.13% 0.244 297.99);
  --theme-color--white: oklch(100% 0 0);
  --theme-color--black: oklch(0 0 0);
}

.books {
  inline-size: 100%;
}

.landing {
  --lp-panel: color-mix(in oklab, var(--color-bg) 88%, var(--color-subtle-light));
  --lp-border: color-mix(in oklab, var(--color-subtle-dark) 30%, transparent);
  --lp-shadow: 0 1.5rem 3rem -2rem color-mix(in oklab, var(--color-ink) 35%, transparent);

  font-family: "Avenir Next", "Segoe UI", var(--font-sans);
  inline-size: min(120ch, 100vw);
  text-align: left;
}

.lp-header {
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--color-bg) 82%, transparent);
  border: 1px solid var(--lp-border);
  border-radius: 0.8rem;
  margin: var(--block-space-half) auto;
  max-inline-size: min(120ch, 96vw);
  padding: 0.7rem;
}

.lp-hero {
  background:
    radial-gradient(120rem 45rem at -12% -35%, color-mix(in oklab, var(--theme-color--blue) 22%, transparent), transparent),
    radial-gradient(80rem 34rem at 120% -40%, color-mix(in oklab, var(--theme-color--orange) 20%, transparent), transparent),
    var(--lp-panel);
  border: 1px solid var(--lp-border);
  border-radius: 1.25rem;
  box-shadow: var(--lp-shadow);
  display: grid;
  gap: 1rem;
  margin-block: var(--block-space-double);
  padding: clamp(1rem, 3vw, 2rem);

  h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", var(--font-serif);
    font-size: clamp(1.6rem, 3.2vw, 2.9rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
    max-inline-size: 20ch;
  }
}

.lp-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.lp-search {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;

  @media (min-width: 70ch) {
    grid-template-columns: 1fr 16rem auto;
  }
}

.lp-featured {
  border: 1px solid var(--lp-border);
  border-radius: 1rem;
  color: var(--color-always-white);
  display: grid;
  gap: 0.4rem;
  padding: 1rem;

  h2 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    margin: 0;
  }

  p {
    margin: 0;
    opacity: 0.9;
  }

  .btn {
    justify-self: start;
    margin-top: 0.35rem;
  }
}

.lp-section {
  margin-block: var(--block-space-double);
}

.lp-section__header {
  align-items: baseline;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  margin-block-end: 0.8rem;

  h3 {
    font-family: "Iowan Old Style", "Palatino Linotype", var(--font-serif);
    font-size: clamp(1.1rem, 1.7vw, 1.6rem);
    margin: 0;
  }
}

.lp-grid {
  gap: clamp(0.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.book {
  --cover-height: auto;
  --space: clamp(2ch, 10%, 6ch);

  container-type: unset;
  column-gap: calc(var(--space) / 2);
  display: grid;
  grid-template-columns: minmax(25%, 20dvw) 1fr;
  inline-size: 100%;
  padding-inline: var(--space);

  @media (max-width: 70ch) {
    grid-template-columns: 1fr;
    padding-inline: var(--inline-space);
  }
}

.book-access {
  &:has(.book-access__switch:checked) {
    .book-access__reader {
      background-color: var(--color-link);
      cursor: not-allowed;
      pointer-events: none;

      img {
        filter: invert(1);
      }
    }
  }
}

.book__cover {
  background-color: var(--cw-cover-bg, #17424e);
  border-radius: 0.3em;
  box-shadow: 0 0 0 1px var(--color-subtle-dark);
  margin: auto;
  transition: background 300ms ease;

  @media (min-width: 70ch) {
    max-block-size: var(--cover-height, 75vh);
  }

  .theme--black &,
  :has(#book_theme_black:checked) & {
    background:
      linear-gradient(165deg, rgba(8, 12, 10, 0.55) 0%, rgba(17, 28, 19, 0.48) 58%, rgba(22, 36, 24, 0.4) 100%),
      url("/assets/covers/meadow-dark-86ff9cb8.svg") no-repeat center;
    background-size: cover, cover;
  }

  .theme--blue &,
  :has(#book_theme_blue:checked) & {
    background:
      linear-gradient(165deg, rgba(7, 26, 31, 0.38) 0%, rgba(15, 52, 61, 0.32) 58%, rgba(19, 74, 85, 0.26) 100%),
      url("/assets/covers/meadow-dark-86ff9cb8.svg") no-repeat center;
    background-size: cover, cover;
  }

  .theme--green &,
  :has(#book_theme_green:checked) & {
    background:
      linear-gradient(165deg, rgba(18, 39, 21, 0.35) 0%, rgba(37, 83, 47, 0.3) 58%, rgba(53, 113, 68, 0.24) 100%),
      url("/assets/covers/meadow-dark-86ff9cb8.svg") no-repeat center;
    background-size: cover, cover;
  }

  .theme--orange &,
  :has(#book_theme_orange:checked) & {
    background:
      linear-gradient(165deg, rgba(43, 24, 13, 0.32) 0%, rgba(105, 61, 30, 0.27) 58%, rgba(144, 90, 49, 0.22) 100%),
      url("/assets/covers/meadow-dark-86ff9cb8.svg") no-repeat center;
    background-size: cover, cover;
  }

  .theme--magenta &,
  :has(#book_theme_magenta:checked) & {
    background:
      linear-gradient(165deg, rgba(36, 13, 28, 0.34) 0%, rgba(90, 41, 78, 0.28) 58%, rgba(124, 56, 103, 0.24) 100%),
      url("/assets/covers/meadow-dark-86ff9cb8.svg") no-repeat center;
    background-size: cover, cover;
  }

  .theme--violet &,
  :has(#book_theme_violet:checked) &{
    background:
      linear-gradient(165deg, rgba(25, 22, 48, 0.34) 0%, rgba(61, 51, 111, 0.28) 58%, rgba(84, 71, 144, 0.24) 100%),
      url("/assets/covers/meadow-dark-86ff9cb8.svg") no-repeat center;
    background-size: cover, cover;
  }

  .theme--white &,
  :has(#book_theme_white:checked) & {
    background:
      linear-gradient(165deg, rgba(255, 255, 255, 0.35) 0%, rgba(246, 243, 235, 0.28) 58%, rgba(237, 232, 219, 0.24) 100%),
      url("/assets/covers/meadow-light-ab895061.svg") no-repeat center;
    background-size: cover, cover;
  }
}

.btn--circle:has(#book_theme_white:checked) {
  img.checked {
    filter: invert(0);
  }

  @media (prefers-color-scheme: dark) {
    img.checked {
      filter: invert(0);
    }
  }
}

.book__cover--add {
  inset: auto 50% calc(var(--block-space) * -1) auto;
  margin-inline-end: calc(var(--btn-size) * -0.5);
  position: absolute;
  z-index: 1;
}

.book__cover-wrapper {
  color: var(--color-always-white);
  display: inline-grid;
  margin: auto;
  place-items: start;

  > * {
    grid-area: 1 / 1;
  }

  @media (max-width: 70ch) {
    .book & {
      font-size: 3em;
    }
  }

  @media (min-width: 150ch) {
    .book & {
      font-size: 1.5em;
    }
  }

  .theme--white & .book__title {
    color: var(--color-always-black);
  }
}

.book__cover--remove {
  margin-block-start: calc(var(--block-space) * -1);
  z-index: 0;
}

.book__form {
  @media (max-width: 70ch) {
    flex-direction: column;
  }
}

.book__nav {
  font-size: var(--font-medium-responsive);
  margin: var(--block-space-double) auto;

  .btn {
    max-inline-size: 50ch;
  }
}

.book__navbar {
  .btn--placeholder {
    display: none;
  }

  &:has(.btn.fullscreen):has(.btn.settings) {
    .placeholder-start {
      display: inline-flex;
    }
  }

  &:not(:has(.btn.fullscreen)):not(:has(.btn.settings)) {
    .placeholder-end {
      display: inline-flex;
    }
  }
}

.book__sidebar {
  inset-block-start: var(--block-space);
  position: sticky;
  z-index: 1;
}

.book__title {
  font-weight: 750;
}

.book__toolbar {
  inset-block-start: 0;
  z-index: 2;
}

/* Bookmarks */
.bookmark {
  --icon-size: 1.5em;

  display: block;
  inset: var(--progress, 0) calc(var(--icon-size) / 4) auto calc(var(--icon-size) * -0.5);
  margin-block-start: calc(var(--icon-size) * -0.5);
  position: absolute;

  .bookmark__icon {
    display: flex;
    flex-grow: 1;

    svg {
      block-size: var(--icon-size);
      flex-shrink: 0;
      inline-size: var(--icon-size);
    }

    &::after {
      border-block-end: 0.07em dashed var(--color-marker);
      content: "";
      display: flex;
      flex-grow: 1;
      margin: auto;
    }
  }
}

.bookmark__link {
  border-radius: 0.3em;
  color: var(--color-link);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.guest-checkout-modal {
  --panel-size: min(34rem, calc(100vw - 2.5rem));
  border-radius: 1rem;
  margin: auto;
  padding: 1.5rem 1.5rem 1.25rem;
  transform: translateY(10%);
}

.guest-checkout-modal::backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--color-always-black) 55%, transparent);
}

.guest-checkout-modal__close-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.guest-checkout-modal__label {
  display: block;
  font-weight: 600;
}

.guest-checkout-modal__actions {
  margin-top: 0.25rem;
}