:root {
  --content: "Publico Text", "Iowan Old Style", "Palatino", "Optima", "Palatino Linotype", "URW Palladio  L", P052, book, ui-serif, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-color: oklch(61.76% .088 229.76);
  --size-300: clamp(.7rem, .66rem + .2vw, .8rem);
  --size-400: clamp(.88rem, .83rem + .24vw, 1rem);
  --size-500: clamp(1.09rem, 1rem + .47vw, 1.33rem);
  --size-600: clamp(1.37rem, 1.21rem + .8vw, 1.78rem);
  --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
  --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
  --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
  --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
  --space-3xs: clamp(.31rem, calc(.29rem + .12vw), .38rem);
  --space-2xs: clamp(.69rem, calc(.66rem + .12vw), .75rem);
  --space-xs: clamp(1rem, calc(.95rem + .24vw), 1.13rem);
  --space-s: clamp(1.31rem, calc(1.24rem + .37vw), 1.5rem);
  --space-m: clamp(2rem, calc(1.9rem + .49vw), 2.25rem);
  --space-l: clamp(2.63rem, calc(2.48rem + .73vw), 3rem);
  --space-xl: clamp(3.94rem, calc(3.72rem + 1.1vw), 4.5rem);
  --space-2xl: clamp(5.25rem, calc(4.96rem + 1.46vw), 6rem);
  --space-3xl: clamp(7.88rem, calc(7.44rem + 2.2vw), 9rem);
  --space-3xs-2xs: clamp(.31rem, calc(.14rem + .85vw), .75rem);
  --space-2xs-xs: clamp(.69rem, calc(.52rem + .85vw), 1.13rem);
  --space-xs-s: clamp(1rem, calc(.8rem + .98vw), 1.5rem);
  --space-s-m: clamp(1.31rem, calc(.95rem + 1.83vw), 2.25rem);
  --space-m-l: clamp(2rem, calc(1.61rem + 1.95vw), 3rem);
  --space-l-xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.5rem);
  --space-xl-2xl: clamp(3.94rem, calc(3.13rem + 4.02vw), 6rem);
  --space-2xl-3xl: clamp(5.25rem, calc(3.79rem + 7.32vw), 9rem);
  --space-s-l: clamp(1.31rem, calc(.65rem + 3.29vw), 3rem);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100dvh;
  font-family: var(--content);
  background: oklch(95.81% 0 0);
  line-height: 1.5;
}

nav {
  position: fixed;
  top: 8px;
  right: 16px;
}

nav ul {
  text-align: right;
  list-style: none;
  display: none;
  position: fixed;
  top: 32px;
  right: 16px;
}

nav > ul.open {
  display: block;
}

nav li {
  backdrop-filter: blur(10px);
  border: none;
  padding: 16px;
}

nav svg {
  margin-top: 10px;
}

nav button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

nav button:hover, a.form-link {
  color: var(--heading-color);
}

a.form-link:hover {
  color: oklch(50% .088 235);
}

section#cover {
  background: url("https://res.cloudinary.com/dcloudinary/image/upload/v1691913992/pablo/cygilfwekxucsv82rb1i.jpg") center / cover no-repeat;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  height: 100dvh;
  display: flex;
}

h2 {
  margin-bottom: var(--space-s);
}

section#cover h1 {
  font-family: var(--content);
  font-size: min(64px, 12dvh);
}

section#cover .cover-text {
  backdrop-filter: blur(4px);
  text-align: center;
  background-color: rgba(255, 255, 255, .3);
  border-radius: 4px;
  padding: 10px;
  position: absolute;
  bottom: 32px;
}

main {
  scroll-snap-type: y mandatory;
  background: oklch(98% .02 91.48);
}

main > section.book-page {
  scroll-snap-align: start;
  min-width: 100dvw;
  min-height: 100dvh;
}

main > section.book-page.centered {
  justify-content: center;
  align-items: center;
  display: flex;
}

main > section.book-page.centered .intro {
  width: min(70ch, 100% - 64px);
}

section.book-page p {
  max-width: min(70ch, 100% - 64px);
  margin-bottom: 1.5ex;
  line-height: 1.5;
}

img.main {
  object-fit: contain;
  width: 60dvw;
  max-height: 60dvh;
}

.sticky {
  backdrop-filter: blur(10px);
  width: fit-content;
  color: var(--heading-color);
  border-radius: 4px;
  align-self: flex-start;
  margin-left: 1rem;
  padding: 10px;
  display: block;
  position: sticky;
  top: .5rem;
}

.book-page.carousel {
  margin-right: 4dvw;
  display: flex;
  overflow: scroll hidden;
}

.book-page.carousel:last-child {
  margin-right: 4dvw;
}

.book-page.carousel img {
  object-fit: contain;
  width: 90dvw;
  height: 70dvh;
  max-height: 90vh;
  margin-top: 4dvh;
  margin-left: 2rem;
}

@media screen and (max-width: 768px) {
  .book-page.carousel img {
    height: auto;
  }
}

.text-heavy {
  max-width: min(70ch, 100% - 64px);
  margin: 0 auto;
}

.text-heavy p {
  margin-bottom: var(--space-s);
  margin: 0 auto;
}

.text-heavy aside {
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.text-heavy aside img {
  object-fit: contain;
  height: 200px;
  margin: 1rem;
}

aside img {
  width: calc(100% / (var(--img-count)  - 2rem));
}

blockquote {
  text-align: center;
  font-size: 2rem;
  font-style: oblique;
}

.carousel figcaption {
  text-align: center;
  margin: 0 auto;
  font-style: oblique;
}

.carousel figure {
  min-width: 70dvw;
  min-height: 70dvh;
}

@media screen and (max-width: 768px) {
  .carousel figure {
    min-height: auto;
  }
}

.carousel h3 {
  text-align: center;
  backdrop-filter: blur(10px);
  border-radius: 4px;
  height: fit-content;
  margin-top: 60px;
  padding: 10px;
  position: sticky;
  left: 50%;
}

dialog img {
  max-width: 100dvw;
  max-height: calc(100dvh - 180px);
}

dialog {
  background: oklch(98% .02 91.48);
  border: none;
  margin: 32px auto 0;
  padding: 8px;
}

dialog button {
  box-shadow: none;
  background: oklch(90% .02 91.48);
  border: none;
  border-radius: 4px;
  margin-top: 8px;
}