:root {
    --pp: min(34vw, 500px, calc(var(--ph) * .735));
    --ph: min(69dvh, 690px);
    --preview-teal: #0d3e42;
    --preview-teal-light: #1d5356;
    --preview-ink: #0a2223;
    --preview-paper: #f2ebd0;
    --preview-paper-warm: #ebdcb9;
    --preview-sage: #708f8c;
    --preview-brass: #b89654;
    --preview-brass-light: #ddc78f;
    --page-pad-x: clamp(2.15rem, 2.7vw, 3.25rem);
    --page-pad-top: clamp(2rem, 4dvh, 3rem);
    --page-pad-bottom: clamp(3.25rem, 5.2dvh, 4rem);
    --page-copy: clamp(.94rem, .16vw + .82rem, 1rem);
    --page-heading: clamp(2.25rem, 1.4vw + 1rem, 2.75rem);
}

.preview-body {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #061a1c;
}

.preview {
    position: relative;
    isolation: isolate;
    --scene-x: 0;
    --scene-y: 0;
    --scene-light-x: 50%;
    --scene-light-y: 38%;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    gap: clamp(.7rem, 1.5dvh, 1.15rem);
    padding: clamp(.8rem, 1.8dvh, 1.25rem) max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background-color: #08282b;
    background-image:
        radial-gradient(circle at var(--scene-light-x) var(--scene-light-y), rgba(221, 199, 143, .2), transparent 18%),
        radial-gradient(ellipse at 50% 35%, rgba(47, 105, 105, .78) 0, rgba(13, 62, 66, .56) 30%, rgba(6, 26, 28, .92) 72%),
        linear-gradient(180deg, #0b3437 0, #061a1c 100%);
    color: var(--preview-ink);
}

.preview > .archon-webgl-scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .95;
}

.preview > .archon-webgl-scene canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.book-splash {
    position: absolute;
    z-index: 620;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #f6e4ac;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 33%, rgba(246, 228, 172, .24), transparent 12%),
        radial-gradient(circle at 50% 55%, rgba(29, 83, 86, .42), transparent 24%),
        radial-gradient(ellipse at center, rgba(13, 62, 66, .98), rgba(3, 16, 17, 1) 72%);
    animation: bookSplashSequence 3.85s cubic-bezier(.22, .72, .18, 1) forwards;
}

.book-splash.is-dismissed {
    visibility: hidden;
    opacity: 0;
}

.book-splash::before,
.book-splash::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.book-splash::before {
    inset: 1.2rem;
    border: 1px solid rgba(221, 199, 143, .28);
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(246, 228, 172, .09) 47%, transparent 54%),
        radial-gradient(rgba(242, 235, 208, .16) .5px, transparent .7px);
    background-size: 100% 100%, 8px 8px;
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, .28);
    animation: bookSplashFrame 3.4s ease forwards;
}

.book-splash::after {
    width: min(92vw, 52rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(221, 199, 143, .86), transparent);
    transform: translateY(4.2rem) scaleX(.35);
    animation: bookSplashRule 3.35s cubic-bezier(.22, .72, .18, 1) forwards;
}

.book-splash__mark {
    position: absolute;
    width: clamp(8rem, 24vw, 15rem);
    aspect-ratio: 1;
    border: 1px solid rgba(221, 199, 143, .42);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(246, 228, 172, .1), transparent 66%),
        url('/assets/images/brand/archon-logo-transparent.png') center / 112% auto no-repeat;
    opacity: .2;
    filter: drop-shadow(0 1rem 1.4rem rgba(0, 0, 0, .28)) drop-shadow(0 0 1.4rem rgba(221, 199, 143, .12));
    transform: translateY(-5.2rem) scale(.88);
    animation: bookSplashMark 3.25s ease forwards;
}

.book-splash__copy {
    position: relative;
    z-index: 1;
    max-width: min(90vw, 760px);
    text-align: center;
    text-shadow: 0 .28rem .9rem rgba(0, 0, 0, .42);
}

.book-splash__copy::before {
    content: "";
    display: block;
    width: clamp(3rem, 8vw, 4.8rem);
    margin: 0 auto 1.05rem;
    border-top: 1px solid rgba(221, 199, 143, .78);
    box-shadow: 0 .18rem .8rem rgba(221, 199, 143, .22);
}

.book-splash__copy p {
    margin: 0 0 .85rem;
    color: var(--preview-brass-light);
    font: 800 clamp(.64rem, 1.6vw, .82rem)/1 Inter, Arial, sans-serif;
    letter-spacing: .34em;
}

.book-splash__copy h1 {
    margin: 0 auto .8rem;
    color: #f6e4ac;
    font: 600 clamp(3rem, 9vw, 7rem)/.84 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.045em;
    text-transform: uppercase;
    text-wrap: balance;
    filter: drop-shadow(0 .45rem .7rem rgba(0, 0, 0, .34));
}

.book-splash__copy span {
    display: block;
    color: #f5e9c5;
    font: 500 clamp(.95rem, 2vw, 1.2rem)/1.45 "Cormorant Garamond", Georgia, serif;
}

@keyframes bookSplashSequence {
    0% {
        visibility: visible;
        opacity: 0;
        transform: scale(1.035);
        filter: blur(.8px);
    }
    10% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    86% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        transform: scale(.982) translateY(-.65rem);
        filter: blur(.4px);
    }
}

@keyframes bookSplashRule {
    0% {
        opacity: 0;
        transform: translateY(4.2rem) scaleX(.12);
    }
    35%,
    80% {
        opacity: .88;
        transform: translateY(4.2rem) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateY(4.2rem) scaleX(.42);
    }
}

@keyframes bookSplashFrame {
    0% {
        opacity: 0;
        transform: scale(.985);
    }
    24%,
    82% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

@keyframes bookSplashMark {
    0% {
        opacity: 0;
        transform: translateY(-3.2rem) rotate(-6deg) scale(.7);
    }
    35% {
        opacity: .16;
        transform: translateY(-4rem) rotate(0deg) scale(.9);
    }
    100% {
        opacity: .08;
        transform: translateY(-4.8rem) rotate(5deg) scale(1.05);
    }
}

.book-intro {
    position: absolute;
    z-index: 520;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow: hidden;
    color: #f6e4ac;
    background:
        radial-gradient(circle at 50% 28%, rgba(221, 199, 143, .2), transparent 23%),
        radial-gradient(ellipse at center, rgba(13, 62, 66, .93), rgba(3, 16, 17, .98) 72%);
    transition: opacity .55s ease, visibility .55s ease;
}

.book-intro.is-dismissed {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.book-intro__book {
    position: absolute;
    width: min(86vw, 980px);
    height: min(68dvh, 620px);
    perspective: 1800px;
    transform-style: preserve-3d;
    filter: drop-shadow(0 2.2rem 2rem rgba(0, 0, 0, .38));
    animation: introOpenBook 1.15s cubic-bezier(.2, .72, .16, 1) both;
}

.book-intro__page {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    border: 1px solid rgba(174, 133, 60, .64);
    background:
        radial-gradient(rgba(61, 43, 18, .16) .55px, transparent .75px),
        linear-gradient(90deg, rgba(91, 62, 24, .24), transparent 18%, transparent 82%, rgba(91, 62, 24, .18)),
        #d9c79a;
    background-size: 7px 7px, 100% 100%, 100% 100%;
    box-shadow: inset 0 0 3.2rem rgba(55, 36, 12, .26), 0 .6rem 1.6rem rgba(0, 0, 0, .16);
}

.book-intro__page--left {
    right: 50%;
    border-radius: .45rem 0 0 .45rem;
    transform-origin: right center;
    transform: rotateY(7deg);
}

.book-intro__page--right {
    left: 50%;
    border-radius: 0 .45rem .45rem 0;
    transform-origin: left center;
    transform: rotateY(-7deg);
}

.book-intro__spine {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.25rem;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(71, 45, 13, .34), rgba(255, 250, 221, .55), rgba(71, 45, 13, .34));
    box-shadow: 0 0 1.6rem rgba(67, 44, 11, .28);
}

.book-intro__copy {
    position: relative;
    z-index: 3;
    max-width: min(86vw, 760px);
    text-align: center;
    text-shadow: 0 .22rem .65rem rgba(0, 0, 0, .42);
    animation: introCopyArrive .85s ease .32s both;
}

.book-intro .book-kicker {
    margin-bottom: 1rem;
    color: var(--preview-brass-light);
    font: 700 .72rem/1 Inter, Arial, sans-serif;
    letter-spacing: .26em;
}

.book-intro h1 {
    max-width: 10ch;
    margin: 0 auto .85rem;
    color: #f6e4ac;
    font: 600 clamp(3.5rem, 9vw, 7.4rem)/.82 "Cormorant Garamond", Georgia, serif;
    text-transform: uppercase;
}

.book-intro p:not(.book-kicker) {
    max-width: 36rem;
    margin: 0 auto 1.65rem;
    color: #f5e9c5;
    font: 500 clamp(1rem, 2vw, 1.25rem)/1.55 "Cormorant Garamond", Georgia, serif;
}

.book-intro__button {
    min-height: 48px;
    padding: .85rem 1.35rem;
    border: 1px solid rgba(246, 228, 172, .75);
    background: rgba(13, 62, 66, .82);
    color: #f6e4ac;
    font: 700 .72rem/1 Inter, Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    box-shadow: 0 .8rem 1.5rem rgba(0, 0, 0, .28);
}

.book-intro__button:hover,
.book-intro__button:focus-visible {
    background: rgba(29, 83, 86, .95);
    transform: translateY(-1px);
}

.preview:not(.has-started) .preview-side-navigation,
.preview:not(.has-started) .preview-controls {
    opacity: 0;
    pointer-events: none;
}

.preview.is-starting .preview-reader {
    animation: previewReaderStart 1.25s cubic-bezier(.18, .76, .2, 1) both;
}

@keyframes introOpenBook {
    from {
        opacity: 0;
        transform: perspective(1600px) translateY(2rem) rotateX(10deg) scale(.88);
    }
    to {
        opacity: 1;
        transform: perspective(1600px) translateY(0) rotateX(0deg) scale(1);
    }
}

@keyframes introCopyArrive {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes previewReaderStart {
    0% {
        opacity: .38;
        transform: perspective(1500px) translate3d(0, 0, 11rem) rotateX(10deg) rotateY(-28deg) scale(1.16);
        filter: blur(.25px) drop-shadow(0 2rem 1.8rem rgba(0, 0, 0, .4));
    }
    34% {
        opacity: 1;
        filter: blur(0) drop-shadow(0 2.2rem 1.9rem rgba(0, 0, 0, .36));
    }
    58% {
        transform: perspective(1500px) translate3d(0, -1rem, -6rem) rotateX(4deg) rotateY(378deg) scale(.86);
        filter: blur(0) drop-shadow(0 2.4rem 2rem rgba(0, 0, 0, .34));
    }
    100% {
        opacity: 1;
        transform: perspective(1800px) rotateX(calc(var(--scene-y) * -1.4deg)) rotateY(calc(var(--scene-x) * 1.8deg));
        filter: none;
    }
}

.preview::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background-image: radial-gradient(rgba(242, 235, 208, .25) .45px, transparent .65px);
    background-size: 7px 7px;
}

.preview::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -10%;
    bottom: -22%;
    left: -10%;
    height: 46%;
    pointer-events: none;
    background: radial-gradient(ellipse at center top, rgba(0, 0, 0, .08), rgba(0, 0, 0, .42) 64%, transparent 73%);
    transform: perspective(700px) rotateX(58deg);
    transform-origin: top center;
}

.preview-library,
.preview-reader {
    grid-area: 1 / 1;
}

.preview-reader {
    position: relative;
    z-index: 3;
    display: grid;
    width: calc(var(--pp) * 2);
    min-width: 0;
    height: 100%;
    overflow: visible;
    justify-self: center;
    place-items: center;
    transform: perspective(1800px) rotateX(calc(var(--scene-y) * -1.4deg)) rotateY(calc(var(--scene-x) * 1.8deg));
    transition: transform .18s ease-out;
}

.preview-stage {
    grid-area: 1 / 1;
}

.preview-library {
    position: relative;
    z-index: 2;
    width: min(100vw, calc(var(--pp) * 2 + 28rem));
    height: 100%;
    overflow: visible;
    pointer-events: none;
    user-select: none;
    opacity: .82;
    transition: opacity .65s ease;
}

.preview:not([data-state="0"]):not([data-state="10"]) .preview-library {
    opacity: .22;
}

.preview[data-state="10"] .preview-library {
    opacity: .58;
}

.preview-ambient-book {
    --book-x: 0px;
    --book-y: 0px;
    --book-rotation: 0deg;
    --book-scale: 1;
    --book-opacity: .52;
    --book-delay: 0s;
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(3.6rem, 4.5vw, 5rem);
    height: clamp(17rem, 47dvh, 27rem);
    border: 1px solid rgba(221, 199, 143, .36);
    border-radius: 3px 9px 9px 3px;
    background-color: #244b4d;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, .34), transparent 20%, rgba(255, 255, 255, .045) 55%, rgba(0, 0, 0, .18)),
        linear-gradient(180deg, transparent 15%, rgba(221, 199, 143, .52) 15% 16%, transparent 16% 83%, rgba(221, 199, 143, .52) 83% 84%, transparent 84%);
    box-shadow: inset .45rem 0 .85rem rgba(0, 0, 0, .28), 0 1.4rem 2.3rem rgba(0, 0, 0, .34);
    opacity: var(--book-opacity);
    transform: translate(calc(-50% + var(--book-x)), calc(-50% + var(--book-y))) rotate(var(--book-rotation)) scale(var(--book-scale));
    transform-origin: center bottom;
    animation: previewBookArrival 1.35s cubic-bezier(.16, 1, .3, 1) var(--book-delay) both;
}

.preview-ambient-book::before {
    content: "";
    position: absolute;
    inset: .6rem .55rem;
    border: 1px solid rgba(235, 220, 185, .18);
    box-shadow: inset 0 0 1rem rgba(0, 0, 0, .12);
}

.preview-ambient-book::after {
    content: "";
    position: absolute;
    top: 27%;
    left: 50%;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid rgba(221, 199, 143, .38);
    border-radius: 50%;
    transform: translateX(-50%);
}

.preview-ambient-book--1 {
    --book-x: calc(0px - var(--pp) - 3.75rem);
    --book-y: 2.8rem;
    --book-rotation: -10deg;
    --book-scale: .88;
    --book-opacity: .34;
    --book-delay: .04s;
    background-color: #293f3f;
}

.preview-ambient-book--2 {
    --book-x: calc(1.25rem - var(--pp));
    --book-y: .7rem;
    --book-rotation: -5deg;
    --book-scale: 1.03;
    --book-opacity: .48;
    --book-delay: .13s;
    background-color: #755f42;
}

.preview-ambient-book--3 {
    --book-x: calc(6.25rem - var(--pp));
    --book-y: 4.2rem;
    --book-rotation: -14deg;
    --book-scale: .78;
    --book-opacity: .58;
    --book-delay: .22s;
    background-color: #506c63;
}

.preview-ambient-book--4 {
    --book-x: calc(var(--pp) - 6.25rem);
    --book-y: 4.2rem;
    --book-rotation: 14deg;
    --book-scale: .78;
    --book-opacity: .58;
    --book-delay: .28s;
    background-color: #523f36;
}

.preview-ambient-book--5 {
    --book-x: calc(var(--pp) - 1.25rem);
    --book-y: .7rem;
    --book-rotation: 5deg;
    --book-scale: 1.03;
    --book-opacity: .48;
    --book-delay: .17s;
    background-color: #31595a;
}

.preview-ambient-book--6 {
    --book-x: calc(var(--pp) + 3.75rem);
    --book-y: 2.8rem;
    --book-rotation: 10deg;
    --book-scale: .88;
    --book-opacity: .34;
    --book-delay: .08s;
    background-color: #776641;
}

.book-welcome[open] ~ .preview .preview-ambient-book {
    animation-play-state: paused;
}

@keyframes previewBookArrival {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 5rem)) rotate(0) scale(.38);
    }

    to {
        opacity: var(--book-opacity);
        transform: translate(calc(-50% + var(--book-x)), calc(-50% + var(--book-y))) rotate(var(--book-rotation)) scale(var(--book-scale));
    }
}

.preview-stage {
    position: relative;
    z-index: 1;
    align-self: center;
    width: calc(var(--pp) * 2);
    height: var(--ph);
    perspective: 6000px;
    perspective-origin: center center;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.3, .72, .2, 1);
}

.preview:not([data-state="0"]):not([data-state="10"]) .preview-stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: .5rem -.65rem -.72rem .5rem;
    border: 1px solid rgba(92, 67, 29, .42);
    border-radius: 2px 6px 7px 3px;
    background:
        repeating-linear-gradient(0deg, #d6c59b 0 1px, #f4e8c5 1px 3px, #cdbc91 3px 4px),
        var(--preview-paper-warm);
    box-shadow: 0 2rem 3.8rem rgba(0, 0, 0, .38), 0 .55rem 1.2rem rgba(0, 0, 0, .28);
}

.preview-sheet {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--pp);
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.3, .72, .2, 1);
}

.preview-sheet.is-flipped {
    transform: rotateY(-180deg);
}

.preview :is(
    .preview-face,
    .preview-settled-page,
    .preview-turn-overlay,
    .preview-turn-underlay
) {
    overflow: hidden;
    overflow: clip;
    padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
    border: 1px solid rgba(104, 77, 33, .24);
    background-color: var(--preview-paper);
    background-image:
        radial-gradient(rgba(91, 69, 28, .105) .48px, transparent .7px),
        linear-gradient(135deg, rgba(255, 255, 255, .26), transparent 38%, rgba(126, 88, 31, .045));
    background-size: 7px 7px, 100% 100%;
    color: var(--preview-ink);
    font: var(--page-copy)/1.48 Inter, Arial, sans-serif;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.preview :is(
    .preview-face.front,
    .preview-settled-page.is-right,
    .preview-turn-overlay.is-right,
    .preview-turn-underlay.is-right
) {
    box-shadow: inset 1.15rem 0 1.9rem rgba(73, 50, 20, .14), inset -.35rem 0 .8rem rgba(255, 255, 255, .22);
}

.preview :is(
    .preview-face.back,
    .preview-settled-page.is-left,
    .preview-turn-overlay.is-left,
    .preview-turn-underlay.is-left
) {
    box-shadow: inset -1.15rem 0 1.9rem rgba(73, 50, 20, .14), inset .35rem 0 .8rem rgba(255, 255, 255, .22);
}

.preview-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
}

.preview-face.back {
    transform: rotateY(180deg);
}

.preview-spine {
    position: absolute;
    z-index: 99;
    top: .25rem;
    bottom: .2rem;
    left: 50%;
    width: 22px;
    pointer-events: none;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(45, 31, 13, .38), rgba(112, 79, 29, .16) 28%, rgba(255, 249, 220, .48) 49%, rgba(73, 49, 17, .18) 72%, rgba(37, 24, 9, .36));
    box-shadow: 0 0 1.2rem rgba(40, 26, 8, .24);
}

.preview-spine::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255, 248, 218, .65);
}

.preview-spine::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -2rem;
    left: 50%;
    width: 1.35rem;
    height: 3.25rem;
    background: #8e6a33;
    box-shadow: inset 0 0 .45rem rgba(48, 31, 8, .38);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    transform: translateX(-50%);
}

.preview[data-state="0"] .preview-stage {
    transform: translateX(-25%);
}

.preview[data-state="0"] .preview-sheet:not([data-sheet="0"]) {
    visibility: hidden;
}

.preview[data-state="10"] .preview-stage {
    transform: translateX(25%);
}

.preview[data-state="10"] .preview-sheet:not([data-sheet="9"]) {
    visibility: hidden;
}

.preview[data-state="0"] .preview-spine,
.preview[data-state="10"] .preview-spine {
    display: none;
}

/* Collector's-edition cover */
.preview .preview-face[data-face="cover"],
.preview .preview-face[data-face="back-cover"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(221, 199, 143, .76);
    border-radius: 3px 8px 8px 3px;
    background-color: var(--preview-teal);
    background-image:
        repeating-linear-gradient(89deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(2deg, rgba(0, 0, 0, .026) 0 1px, transparent 1px 5px),
        linear-gradient(120deg, #082e32, #0d3e42 52%, #175154);
    background-size: auto, auto, 100% 100%;
    color: var(--preview-paper);
    box-shadow:
        inset .85rem 0 1.5rem rgba(0, 0, 0, .34),
        inset 0 0 0 .55rem rgba(184, 150, 84, .08),
        inset 0 0 4.5rem rgba(0, 0, 0, .28),
        1.3rem 1.8rem 2.8rem rgba(0, 0, 0, .42);
}

.preview .preview-face[data-face="cover"]::before,
.preview .preview-face[data-face="back-cover"]::before {
    content: "";
    position: absolute;
    inset: 1.25rem;
    pointer-events: none;
    border: 1px solid rgba(221, 199, 143, .62);
    outline: 1px solid rgba(242, 235, 208, .12);
    outline-offset: -.55rem;
    box-shadow: inset 0 0 0 .2rem rgba(184, 150, 84, .06), 0 0 1rem rgba(0, 0, 0, .16);
}

.preview .preview-face[data-face="cover"]::after,
.preview .preview-face[data-face="back-cover"]::after {
    content: "";
    position: absolute;
    top: clamp(2.7rem, 7.5%, 3.7rem);
    left: 50%;
    width: clamp(4.5rem, 20%, 6.4rem);
    aspect-ratio: 1;
    pointer-events: none;
    border: 1px solid rgba(221, 199, 143, .55);
    border-radius: 50%;
    background: url('/assets/images/brand/archon-symbol.svg') center / 94% no-repeat;
    box-shadow: 0 .6rem 1.25rem rgba(0, 0, 0, .25), inset 0 0 0 .25rem rgba(242, 235, 208, .05);
    transform: translateX(-50%);
}

/* The supplied transparent wordmark replaces only the temporary front-cover medallion. */
.preview .preview-face[data-face="cover"]::after {
    top: clamp(2.35rem, 6.2%, 3.15rem);
    width: clamp(7.9rem, 28%, 9.6rem);
    aspect-ratio: 1;
    border: 0;
    border-radius: 0;
    background-image: url('/assets/images/brand/archon-logo-transparent.png');
    background-position: center;
    background-size: contain;
    box-shadow: none;
    filter: brightness(1.18) contrast(1.08) drop-shadow(0 0 .12rem rgba(246, 228, 172, .82)) drop-shadow(0 .38rem .5rem rgba(0, 0, 0, .36));
}

.preview .preview-face[data-face="cover"] > *,
.preview .preview-face[data-face="back-cover"] > * {
    position: relative;
    z-index: 1;
}

.preview .preview-face[data-face="cover"] h1 {
    display: block;
    max-width: 8.2ch;
    margin: clamp(5.5rem, 15dvh, 7.5rem) auto 1rem;
    color: #f6e4ac;
    font: 600 clamp(3.35rem, 4vw, 4.55rem)/.82 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.035em;
    text-wrap: balance;
    text-shadow: 0 1px 0 #4a3518, 0 .3rem .75rem rgba(0, 0, 0, .34);
}

.preview .preview-face[data-face="cover"] h1::after {
    content: "";
    display: block;
    width: 4.8rem;
    margin: 1.05rem auto 0;
    border-top: 1px solid rgba(221, 199, 143, .8);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}

.preview .preview-face[data-face="cover"] p {
    max-width: 22rem;
    margin: 0;
    color: #f5e9c5;
}

.preview .preview-face[data-face="cover"] p:first-of-type {
    font: 500 clamp(1.08rem, 1.8vw, 1.35rem)/1.25 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .025em;
}

.preview .preview-face[data-face="cover"] p:last-of-type {
    position: absolute;
    right: 3.2rem;
    bottom: 3.3rem;
    left: 3.2rem;
    color: var(--preview-brass-light);
    font: 600 .63rem/1.45 Inter, Arial, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.preview .preview-face[data-face="back-cover"] {
    padding-top: 8rem;
    color: var(--preview-brass-light);
    font: 600 clamp(1rem, 1.5vw, 1.2rem)/1.35 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.preview .preview-face[data-face="inside-front"],
.preview .preview-face[data-face="inside-back"] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2.3rem;
    background-color: #e4d5b1;
    background-image:
        radial-gradient(circle at center, rgba(13, 62, 66, .07) 0 1px, transparent 1px),
        linear-gradient(135deg, rgba(255, 255, 255, .24), transparent 54%);
    background-size: 9px 9px, 100% 100%;
    color: rgba(13, 62, 66, .72);
    font: 700 .6rem/1 Inter, Arial, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.preview .preview-face[data-face="inside-front"]::before,
.preview .preview-face[data-face="inside-back"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(46%, 13rem);
    aspect-ratio: 1;
    opacity: .095;
    background: url('/assets/images/brand/archon-symbol.svg') center / contain no-repeat;
    filter: grayscale(1);
    transform: translate(-50%, -50%);
}

.preview .preview-face[data-face="inside-front"]::before {
    content: none;
}

.preview .preview-face[data-face="inside-front"] .preview-inside-cover-logo {
    position: absolute;
    z-index: 1;
    top: 48%;
    left: 50%;
    width: min(64%, 17rem);
    max-height: 62%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 .55rem .65rem rgba(13, 62, 66, .2));
    transform: translate(-50%, -50%);
}

.preview .preview-face[data-face="inside-front"] .preview-inside-cover-label {
    position: relative;
    z-index: 1;
}

.preview .preview-face[data-face="inside-front"]::after,
.preview .preview-face[data-face="inside-back"]::after {
    content: "";
    position: absolute;
    inset: 1.35rem;
    border: 1px solid rgba(13, 62, 66, .13);
    pointer-events: none;
}

/* Editorial page system */
.preview :is(
    .preview-face,
    .preview-settled-page,
    .preview-turn-overlay,
    .preview-turn-underlay
) h2 {
    max-width: 12ch;
    margin: 0 0 1rem;
    color: var(--preview-teal);
    font: 600 var(--page-heading)/.98 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.preview :is(
    .preview-face,
    .preview-settled-page,
    .preview-turn-overlay,
    .preview-turn-underlay
) h3 {
    margin: 0 0 .25rem;
    color: var(--preview-teal);
    font: 600 clamp(1.18rem, .35vw + .9rem, 1.35rem)/1.08 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.01em;
}

.preview :is(
    .preview-face,
    .preview-settled-page,
    .preview-turn-overlay,
    .preview-turn-underlay
) p {
    max-width: 42ch;
    margin: 0 0 .78rem;
    overflow-wrap: break-word;
    hyphens: auto;
}

.preview :is(
    .preview-settled-page,
    .preview-turn-overlay,
    .preview-turn-underlay
) .chapter-marker {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .9rem;
    color: var(--preview-teal-light);
    font: 700 .66rem/1 Inter, Arial, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.preview :is(
    .preview-settled-page,
    .preview-turn-overlay,
    .preview-turn-underlay
) .chapter-marker::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(13, 62, 66, .22);
}

.preview .chapter-promise {
    margin-top: 1.35rem;
    padding: 1rem 0 0 1rem;
    border-top: 1px solid rgba(13, 62, 66, .2);
    border-left: 2px solid var(--preview-brass);
    color: #27494b;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.08rem;
    font-style: italic;
}

.preview .chapter-item {
    padding: .62rem 0;
    border-top: 1px solid rgba(13, 62, 66, .17);
}

.preview .chapter-item p {
    margin-bottom: .25rem;
    color: #284749;
    font-size: .91em;
    line-height: 1.42;
}

.preview .chapter-item a,
.preview .book-toc a,
.preview :is(.preview-settled-page, .preview-turn-overlay, .preview-turn-underlay) > p a {
    color: var(--preview-teal);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(13, 62, 66, .32);
    text-underline-offset: .2em;
}

.preview .chapter-item a {
    font-size: .75rem;
    letter-spacing: .04em;
}

.preview .book-link {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin: .55rem 0 1rem;
    padding: .65rem .95rem;
    border: 1px solid var(--preview-teal);
    background: var(--preview-teal);
    color: var(--preview-paper);
    font: 700 .69rem/1 Inter, Arial, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: .25rem .3rem 0 rgba(112, 143, 140, .22);
}

.preview .book-link:hover {
    background: var(--preview-teal-light);
}

.preview .book-toc {
    display: block;
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: .9rem;
    font-weight: 500;
}

.preview .book-toc ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: book-toc;
}

.preview .book-toc li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: baseline;
    padding: .37rem 0;
    border-bottom: 1px solid rgba(13, 62, 66, .14);
    counter-increment: book-toc;
}

.preview .book-toc li::before {
    content: "0" counter(book-toc);
    color: var(--preview-brass);
    font: 700 .6rem/1 Inter, Arial, sans-serif;
    letter-spacing: .08em;
}

.preview .process-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.preview .process-list li {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: .8rem;
    align-items: start;
    padding: .68rem 0;
    border-bottom: 1px solid rgba(13, 62, 66, .16);
}

.preview .process-list b {
    color: var(--preview-brass);
    font: 600 1.45rem/1 "Cormorant Garamond", Georgia, serif;
}

.preview .process-list span {
    color: #29494b;
    font-size: .91em;
}

.preview .process-list strong {
    display: block;
    margin-bottom: .12rem;
    color: var(--preview-teal);
    font: 600 1.1rem/1 "Cormorant Garamond", Georgia, serif;
}

.preview blockquote {
    margin: 0 0 1.05rem;
    padding: .15rem 0 .15rem 1rem;
    border: 0;
    border-left: 2px solid var(--preview-brass);
}

.preview blockquote > p {
    margin-bottom: .45rem;
    color: #153b3d;
    font: 600 1.13rem/1.35 "Cormorant Garamond", Georgia, serif;
    font-style: italic;
}

.preview blockquote footer {
    display: block;
    padding: 0;
    background: transparent;
    color: var(--preview-teal);
    font: 700 .7rem/1.35 Inter, Arial, sans-serif;
    letter-spacing: .05em;
}

.preview blockquote footer small {
    display: block;
    color: #486765;
    font-size: .64rem;
    font-weight: 500;
}

.preview .preview-face .page-no,
.preview .preview-settled-page .page-no,
.preview .preview-turn-overlay .page-no,
.preview .preview-turn-underlay .page-no {
    position: absolute;
    right: var(--page-pad-x);
    bottom: 1rem;
    left: var(--page-pad-x);
    max-width: none;
    margin: 0;
    padding-top: .45rem;
    border-top: 1px solid rgba(13, 62, 66, .15);
    transform: none;
    color: #4f716e;
    text-align: center;
    font: 700 .62rem/1 Inter, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: .16em;
}

.preview :is(a, button, input):focus-visible {
    outline: 3px solid #efcf74;
    outline-offset: 3px;
}

/* Reader controls */
.preview-side-navigation {
    position: absolute;
    z-index: 260;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    display: block;
    width: calc(var(--pp) * 2);
    height: var(--ph);
    margin: 0;
    padding: 0;
    gap: 0;
    border: 0;
    background: none;
    font: inherit;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.preview-side-navigation button {
    position: absolute;
    top: 50%;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(221, 199, 143, .68);
    border-radius: 50%;
    background: rgba(6, 31, 33, .9);
    box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .06);
    color: #faecc4;
    font: 700 1.15rem/1 Inter, Arial, sans-serif;
    pointer-events: auto;
    transform: translateY(-50%);
    transition: opacity .2s ease, visibility .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.preview-side-navigation__previous {
    left: -4.25rem;
}

.preview-side-navigation__next {
    right: -4.25rem;
}

.preview-side-navigation button:not(:disabled):hover {
    border-color: var(--preview-brass-light);
    background: rgba(13, 62, 66, .98);
    transform: translateY(-50%) scale(1.06);
}

.preview-side-navigation button:disabled {
    cursor: not-allowed;
    opacity: .32;
    pointer-events: none;
}

.preview[data-state="0"] .preview-side-navigation__previous,
.preview[data-state="10"] .preview-side-navigation__next {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.preview[data-state="0"] .preview-side-navigation,
.preview[data-state="10"] .preview-side-navigation {
    width: var(--pp);
}

.preview-controls {
    grid-area: 2 / 1;
    position: relative;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    color: var(--preview-paper);
    font-family: Inter, Arial, sans-serif;
}

.preview-controls__progress,
.preview-controls__tools {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem;
    border: 1px solid rgba(221, 199, 143, .3);
    background: rgba(4, 22, 24, .72);
    box-shadow: 0 .65rem 1.5rem rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .04);
    backdrop-filter: blur(12px);
}

.preview-controls button {
    min-width: 44px;
    min-height: 44px;
    padding: .65rem .8rem;
    border: 1px solid rgba(235, 220, 185, .34);
    border-radius: 0;
    background: rgba(242, 235, 208, .04);
    color: var(--preview-paper);
    font: 700 .65rem/1 Inter, Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.preview-controls button:not(:disabled):hover {
    border-color: var(--preview-brass-light);
    background: rgba(242, 235, 208, .12);
    transform: translateY(-1px);
}

.preview-controls button:disabled {
    cursor: not-allowed;
    opacity: .34;
}

.preview-controls output {
    min-width: 9.5rem;
    padding: 0 .65rem;
    color: var(--preview-brass-light);
    text-align: center;
    font: 700 .65rem/1 Inter, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.preview-controls__progress {
    min-height: 44px;
    justify-content: center;
}

.preview-controls__tools button {
    color: #d9e0d7;
    font-size: .59rem;
}

/* Welcome bookplate */
.book-welcome {
    width: min(92vw, 570px);
    max-height: min(90dvh, 700px);
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(184, 150, 84, .8);
    border-radius: 2px;
    background-color: var(--preview-paper);
    background-image:
        radial-gradient(rgba(91, 69, 28, .1) .45px, transparent .7px),
        linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 56%);
    background-size: 7px 7px, 100% 100%;
    color: var(--preview-ink);
    box-shadow: 0 2.2rem 5rem rgba(0, 0, 0, .52), inset 0 0 2.6rem rgba(88, 62, 24, .1);
}

.book-welcome::backdrop {
    background: rgba(3, 16, 17, .88);
    backdrop-filter: blur(7px);
}

.book-welcome__inner {
    position: relative;
    padding: clamp(2rem, 5vw, 3.4rem);
}

.book-welcome__inner::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(13, 62, 66, .18);
    pointer-events: none;
}

.book-welcome__inner > * {
    position: relative;
}

.book-welcome .book-kicker {
    margin-bottom: 1.2rem;
    color: var(--preview-teal-light);
    font: 700 .64rem/1 Inter, Arial, sans-serif;
    letter-spacing: .2em;
}

.book-welcome h1 {
    max-width: 12ch;
    margin: 0 0 1rem;
    color: var(--preview-teal);
    font: 600 clamp(2.5rem, 6vw, 3.65rem)/.92 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.book-welcome [data-book-welcome-message] {
    margin-bottom: 1.4rem;
    color: #335355;
}

.book-welcome label {
    display: block;
    margin-bottom: .45rem;
    color: var(--preview-teal);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.book-welcome input {
    width: 100%;
    min-height: 50px;
    padding: .75rem .9rem;
    border: 1px solid rgba(13, 62, 66, .42);
    border-radius: 0;
    background: rgba(255, 253, 242, .66);
    color: var(--preview-ink);
    font: 600 1.15rem "Cormorant Garamond", Georgia, serif;
}

.book-welcome small {
    display: block;
    margin-top: .45rem;
    color: #4e6968;
    font-size: .69rem;
}

.book-form-error {
    min-height: 1.4em;
    margin: .45rem 0 0;
    color: #8a2d23;
    font-size: .75rem;
}

.book-welcome__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: 1rem;
}

.book-bookmark {
    --bookmark-left: 50vw;
    --bookmark-top: max(.35rem, calc(50dvh - var(--ph) / 2));
    --bookmark-width: min(72vw, 350px);
    --bookmark-max-height: min(86dvh, calc(var(--ph) * .9));
    --bookmark-drop-distance: 110dvh;
    position: fixed;
    top: var(--bookmark-top);
    left: var(--bookmark-left);
    width: var(--bookmark-width);
    max-width: calc(var(--pp) * .66);
    max-height: var(--bookmark-max-height);
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--preview-ink);
    transform: translateX(-50%);
    perspective: 1200px;
}

.book-bookmark::backdrop {
    background: transparent;
    backdrop-filter: none;
}

.book-bookmark[open]::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -.9rem;
    left: 50%;
    width: 3.15rem;
    height: 4.8rem;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 45%, rgba(13, 62, 66, .96) 0 .25rem, rgba(246, 228, 172, .9) .26rem .34rem, transparent .35rem),
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(184, 150, 84, .95) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(105deg, transparent 43%, rgba(184, 150, 84, .86) 44% 46%, transparent 47%),
        linear-gradient(75deg, transparent 53%, rgba(184, 150, 84, .78) 54% 56%, transparent 57%),
        linear-gradient(92deg, transparent 48%, rgba(13, 62, 66, .76) 49% 51%, transparent 52%);
    background-position:
        50% 1.95rem,
        50% 0,
        50% 2.55rem,
        50% 2.65rem,
        50% 2.45rem;
    background-size:
        1rem 1rem,
        100% 2.35rem,
        100% 2.15rem,
        100% 2.25rem,
        100% 2.35rem;
    background-repeat: no-repeat;
    filter: drop-shadow(0 .18rem .16rem rgba(0, 0, 0, .22));
    transform: translateX(-50%);
    transform-origin: 50% 0;
    animation: bookmarkThreadDrop 1.28s cubic-bezier(.13, .82, .18, 1) both;
}

.book-bookmark[open]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 7%;
    bottom: .75rem;
    left: 7%;
    height: 2.45rem;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .34), rgba(0, 0, 0, .16) 43%, transparent 70%);
    pointer-events: none;
    animation: bookmarkLandingShadow 1.28s cubic-bezier(.13, .82, .18, 1) both;
}

.book-bookmark__panel {
    position: relative;
    max-height: var(--bookmark-max-height);
    overflow: auto;
    padding: clamp(1.18rem, 2vw, 1.5rem) clamp(.76rem, 1.7vw, 1rem) clamp(3.1rem, 5vw, 3.85rem);
    border: 1px solid rgba(184, 150, 84, .82);
    border-radius: .2rem .2rem 0 0;
    background:
        linear-gradient(90deg, rgba(92, 56, 17, .18), transparent 9%, transparent 91%, rgba(92, 56, 17, .18)),
        linear-gradient(90deg, transparent 48.5%, rgba(132, 89, 35, .14) 49.2%, rgba(255, 251, 228, .48) 50%, rgba(132, 89, 35, .12) 50.8%, transparent 51.5%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 6px),
        radial-gradient(rgba(91, 69, 28, .12) .5px, transparent .7px),
        radial-gradient(circle at 34% 18%, rgba(255, 249, 219, .36), transparent 23%),
        radial-gradient(circle at 68% 78%, rgba(117, 72, 20, .14), transparent 26%),
        var(--preview-paper);
    background-size: 100% 100%, 100% 100%, 6px 100%, 7px 7px, 100% 100%, 100% 100%, 100% 100%;
    box-shadow:
        0 1.15rem 1.35rem rgba(0, 0, 0, .22),
        .12rem .22rem 0 rgba(74, 43, 13, .14),
        inset .16rem 0 .25rem rgba(82, 48, 12, .14),
        inset -.16rem 0 .25rem rgba(255, 249, 220, .32),
        inset 0 0 0 .34rem rgba(184, 150, 84, .08);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.65rem), 50% 100%, 0 calc(100% - 2.65rem));
    scrollbar-width: thin;
    transform-origin: top center;
    will-change: transform, opacity, filter;
    animation: bookmarkDropOntoBook 1.28s cubic-bezier(.13, .82, .18, 1) both;
}

.book-bookmark__panel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: .82rem;
    border-bottom: 1px solid rgba(128, 91, 33, .24);
    background:
        radial-gradient(circle at 50% 54%, rgba(13, 62, 66, .24) 0 .12rem, transparent .13rem),
        linear-gradient(90deg, rgba(128, 91, 33, .18), rgba(255, 247, 212, .5) 48%, rgba(128, 91, 33, .16));
    opacity: .9;
}

.book-bookmark__panel::before {
    content: "";
    position: absolute;
    inset: .95rem .68rem 2.75rem;
    pointer-events: none;
    border: 1px solid rgba(13, 62, 66, .16);
    background:
        linear-gradient(90deg, transparent 48.5%, rgba(13, 62, 66, .09) 49.5%, rgba(255, 252, 230, .3) 50.3%, transparent 51.5%),
        linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 28%, transparent 76%, rgba(94, 58, 17, .08));
    box-shadow: inset 0 0 0 1px rgba(246, 228, 172, .18);
}

.book-bookmark__panel > * {
    position: relative;
}

.book-bookmark h2 {
    max-width: 9ch;
    margin: 0 0 .78rem;
    color: var(--preview-teal);
    font: 600 clamp(1.78rem, 3.7vw, 2.55rem)/.92 "Cormorant Garamond", Georgia, serif;
}

.book-bookmark__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: .48rem;
}

.book-bookmark__status {
    min-height: 1.85rem;
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid rgba(13, 62, 66, .18);
    background: rgba(13, 62, 66, .07);
    color: var(--preview-teal);
    font: 700 .72rem/1.35 Inter, Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.book-bookmark__status:empty {
    display: none;
}

.book-bookmark__status[data-state="success"] {
    border-color: rgba(29, 83, 86, .35);
    background: rgba(29, 83, 86, .12);
}

.book-bookmark__status[data-state="error"] {
    border-color: rgba(126, 47, 36, .35);
    background: rgba(126, 47, 36, .1);
    color: #7e2f24;
}

.book-bookmark__form label {
    display: grid;
    gap: .3rem;
    margin: 0;
    color: var(--preview-teal);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.book-bookmark__form input,
.book-bookmark__form select,
.book-bookmark__form textarea {
    min-height: 36px;
    padding: .46rem .55rem;
    border: 1px solid rgba(13, 62, 66, .35);
    background: rgba(255, 252, 236, .88);
    color: var(--preview-ink);
    font: 500 .75rem/1.3 Inter, Arial, sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

.book-bookmark__form textarea {
    min-height: 4.7rem;
    resize: vertical;
}

.book-bookmark__wide {
    grid-column: 1 / -1;
}

.book-bookmark .consent {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #355;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.book-bookmark .consent input {
    width: auto;
    min-height: 0;
    margin-top: .2rem;
}

.book-bookmark__close {
    position: absolute;
    z-index: 3;
    top: -.62rem;
    right: -.62rem;
    margin: 0;
}

.book-bookmark__close button {
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border: 1px solid rgba(246, 228, 172, .78);
    border-radius: 50%;
    background: var(--preview-teal);
    color: #f6e4ac;
    font-size: 1.4rem;
    line-height: 1;
}

@keyframes bookmarkLandingShadow {
    0%,
    34% {
        opacity: 0;
        transform: scaleX(.35) scaleY(.4);
    }
    58% {
        opacity: .72;
        transform: scaleX(1.08) scaleY(1);
    }
    73% {
        opacity: .46;
        transform: scaleX(.94) scaleY(.82);
    }
    100% {
        opacity: .55;
        transform: scaleX(1) scaleY(.9);
    }
}

@keyframes bookmarkThreadDrop {
    0% {
        opacity: 0;
        transform: translate3d(-50%, calc(var(--bookmark-drop-distance) * -1), 9rem) rotateX(28deg) rotateZ(-7deg) scale(.86);
    }
    18% {
        opacity: 1;
    }
    58% {
        opacity: 1;
        transform: translate3d(-50%, 1rem, 0) rotateX(-2.2deg) rotateZ(1.6deg) scale(1.008);
    }
    73% {
        transform: translate3d(-50%, -.42rem, 0) rotateX(1.1deg) rotateZ(-.75deg) scale(.997);
    }
    88% {
        transform: translate3d(-50%, .1rem, 0) rotateX(-.35deg) rotateZ(.32deg) scale(1.001);
    }
    100% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) rotateX(0deg) rotateZ(0deg) scale(1);
    }
}

@keyframes bookmarkDropOntoBook {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(var(--bookmark-drop-distance) * -1), 9rem) rotateX(28deg) rotateZ(-5deg) scale(.86);
        filter: blur(1.6px);
    }
    18% {
        opacity: 1;
    }
    58% {
        opacity: 1;
        transform: translate3d(0, 1rem, 0) rotateX(-2.2deg) rotateZ(.65deg) scale(1.008);
        filter: blur(0);
    }
    73% {
        transform: translate3d(0, -.42rem, 0) rotateX(1.1deg) rotateZ(-.24deg) scale(.997);
    }
    88% {
        transform: translate3d(0, .1rem, 0) rotateX(-.35deg) rotateZ(.08deg) scale(1.001);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(1);
        filter: none;
    }
}

.book-action {
    min-height: 46px;
    padding: .72rem 1.1rem;
    border: 1px solid var(--preview-teal);
    background: var(--preview-teal);
    color: var(--preview-paper);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.book-action:hover {
    background: var(--preview-teal-light);
}

.book-guest {
    min-height: 44px;
    padding: .6rem 0;
    border: 0;
    background: transparent;
    color: var(--preview-teal);
    font-size: .75rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .25em;
}

.preview-noscript {
    position: fixed;
    z-index: 500;
    top: 50%;
    left: 50%;
    width: min(92vw, 620px);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid var(--preview-brass);
    background: var(--preview-paper);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, .48);
    transform: translate(-50%, -50%);
}

.preview-noscript h1 {
    margin: 0 0 1rem;
    color: var(--preview-teal);
    font: 600 clamp(2.8rem, 7vw, 4.5rem)/.9 "Cormorant Garamond", Georgia, serif;
}

.preview-noscript nav {
    display: grid;
    gap: .55rem;
    margin: 1.5rem 0 0;
    font-size: .86rem;
    font-weight: 700;
}

.preview-noscript nav a {
    padding: .7rem 0;
    border-top: 1px solid rgba(13, 62, 66, .2);
    color: var(--preview-teal);
    text-decoration: underline;
    text-underline-offset: .22em;
}

@media (max-width: 1100px) {
    :root {
        --page-pad-x: clamp(1.8rem, 3.1vw, 2.45rem);
        --page-pad-top: clamp(1.7rem, 3.2dvh, 2.25rem);
        --page-pad-bottom: clamp(2.8rem, 4.6dvh, 3.3rem);
        --page-copy: clamp(.9rem, .35vw + .73rem, .96rem);
        --page-heading: clamp(2.05rem, 2vw + .8rem, 2.5rem);
    }

}

@media (max-width: 800px) {
    :root {
        --ph: min(58dvh, 500px, calc(100dvh - 218px));
        --pp: min(92vw, 390px, calc(var(--ph) * .84));
        --page-pad-x: clamp(.95rem, 4.3vw, 1.4rem);
        --page-pad-top: clamp(.95rem, 2.7dvh, 1.42rem);
        --page-pad-bottom: clamp(1.9rem, 4dvh, 2.55rem);
        --page-copy: clamp(.8rem, 2.35vw, .9rem);
        --page-heading: clamp(1.62rem, 6.5vw, 2.12rem);
    }

    .preview {
        grid-template-rows: minmax(0, 1fr) auto;
        gap: .5rem;
        padding: max(.55rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-right))
            max(.65rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left));
    }

    .preview-library {
        display: block;
        z-index: 1;
        width: 100vw;
        height: 100%;
        opacity: .46;
        overflow: hidden;
        transform: translateY(-.4rem);
    }

    .preview:not([data-state="0"]):not([data-state="10"]) .preview-library {
        opacity: .12;
    }

    .preview[data-state="10"] .preview-library {
        opacity: .36;
    }

    .preview-ambient-book {
        width: clamp(2.2rem, 8.4vw, 3.25rem);
        height: clamp(9rem, 31dvh, 15.5rem);
        box-shadow: inset .32rem 0 .65rem rgba(0, 0, 0, .26), 0 1rem 1.8rem rgba(0, 0, 0, .32);
    }

    .preview-ambient-book--1 {
        --book-x: -34vw;
        --book-y: 1.1rem;
        --book-rotation: -11deg;
        --book-scale: .86;
        --book-opacity: .36;
    }

    .preview-ambient-book--2 {
        --book-x: -24vw;
        --book-y: -1.8rem;
        --book-rotation: -5deg;
        --book-scale: 1.02;
        --book-opacity: .42;
    }

    .preview-ambient-book--3 {
        --book-x: -15vw;
        --book-y: 3.1rem;
        --book-rotation: -16deg;
        --book-scale: .76;
        --book-opacity: .48;
    }

    .preview-ambient-book--4 {
        --book-x: 15vw;
        --book-y: 3.1rem;
        --book-rotation: 16deg;
        --book-scale: .76;
        --book-opacity: .48;
    }

    .preview-ambient-book--5 {
        --book-x: 24vw;
        --book-y: -1.8rem;
        --book-rotation: 5deg;
        --book-scale: 1.02;
        --book-opacity: .42;
    }

    .preview-ambient-book--6 {
        --book-x: 34vw;
        --book-y: 1.1rem;
        --book-rotation: 11deg;
        --book-scale: .86;
        --book-opacity: .36;
    }

    .book-intro__book {
        width: min(92vw, 560px);
        height: min(42dvh, 360px);
        min-height: 250px;
        max-height: calc(100dvh - 330px);
        border-radius: .4rem;
    }

    .book-intro__copy {
        max-width: min(78vw, 340px);
    }

    .book-intro h1 {
        max-width: 8.8ch;
        font-size: clamp(1.85rem, 8.7vw, 3rem);
        line-height: .9;
    }

    .book-intro p:not(.book-kicker) {
        max-width: min(70vw, 18rem);
        font-size: clamp(.8rem, 3.1vw, .96rem);
        line-height: 1.45;
    }

    .book-intro__button {
        min-height: 44px;
        padding: .78rem 1.05rem;
        font-size: .66rem;
    }

    .preview .preview-face[data-face="cover"]::after {
        top: clamp(3.45rem, 8.9dvh, 4.55rem);
        width: clamp(5.2rem, 24vw, 6.55rem);
        opacity: .9;
        background-position: center;
        background-size: contain;
    }

    .book-bookmark {
        top: var(--bookmark-top);
        width: min(var(--bookmark-width), var(--pp));
        max-width: min(var(--bookmark-width), var(--pp));
    }

    .book-bookmark__panel {
        height: min(var(--bookmark-max-height), var(--ph));
        max-height: min(var(--bookmark-max-height), var(--ph));
        padding: .92rem .55rem 2.55rem;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75rem), 50% 100%, 0 calc(100% - 1.75rem));
    }

    .book-bookmark__form {
        grid-template-columns: 1fr;
    }

    .book-bookmark h2 {
        font-size: clamp(1.24rem, 6.1vw, 1.62rem);
    }

    .book-bookmark .book-kicker {
        font-size: .5rem;
        letter-spacing: .13em;
    }

    .book-bookmark__form {
        gap: .34rem;
    }

    .book-bookmark label {
        gap: .22rem;
        margin-bottom: .28rem;
        font-size: .56rem;
        letter-spacing: .045em;
    }

    .book-bookmark input,
    .book-bookmark textarea,
    .book-bookmark select {
        min-height: 32px;
        padding: .42rem .45rem;
        font-size: .72rem;
    }

    .book-bookmark textarea {
        min-height: 4.8rem;
    }

    .book-bookmark__status {
        min-height: 1.35rem;
        padding: .38rem .45rem;
        font-size: .58rem;
    }

    .book-bookmark .book-action {
        min-height: 36px;
        padding: .54rem .5rem;
        font-size: .56rem;
    }

    .book-bookmark__close {
        top: -.48rem;
        right: -.3rem;
    }

    @keyframes bookmarkDropOntoBook {
        0% {
            opacity: 0;
            transform: translate3d(0, calc(var(--bookmark-drop-distance) * -1), 3.4rem) rotateX(18deg) rotateZ(-3deg) scale(.9);
            filter: blur(1px);
        }
        16% {
            opacity: 1;
        }
        60% {
            opacity: 1;
            transform: translate3d(0, .72rem, 0) rotateX(-1.5deg) rotateZ(.42deg) scale(1.006);
            filter: blur(0);
        }
        78% {
            transform: translate3d(0, -.24rem, 0) rotateX(.7deg) rotateZ(-.16deg) scale(.998);
        }
        90% {
            transform: translate3d(0, .06rem, 0) rotateX(-.22deg) rotateZ(.05deg) scale(1);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(1);
            filter: none;
        }
    }

    .preview > .archon-webgl-scene {
        opacity: .22;
    }

    .preview-reader {
        transform: none;
        align-self: end;
        max-height: calc(100dvh - 128px);
    }

    .preview-stage {
        width: var(--pp);
        filter: drop-shadow(0 1.2rem 1.35rem rgba(0, 0, 0, .42));
    }

    .preview:not([data-state="0"]):not([data-state="10"]) .preview-stage {
        border-radius: 0 13px 13px 0;
    }

    .preview:not([data-state="0"]):not([data-state="10"]) .preview-stage::before {
        inset: .52rem -1.08rem -1rem -.78rem;
        border-radius: 5px 15px 16px 6px;
        border-color: rgba(98, 71, 28, .48);
        background:
            linear-gradient(90deg, rgba(66, 42, 13, .18), transparent 8%, transparent 88%, rgba(79, 51, 14, .28)),
            repeating-linear-gradient(0deg, #c8b680 0 1px, #f8ecc6 1px 3px, #d2bf8a 3px 4px);
        box-shadow:
            0 1.7rem 2.2rem rgba(0, 0, 0, .36),
            .42rem .62rem 0 rgba(86, 61, 24, .3),
            inset .72rem 0 .9rem rgba(61, 41, 15, .2),
            inset -1.15rem 0 1.35rem rgba(78, 49, 14, .2);
    }

    .preview:not([data-state="0"]):not([data-state="10"]) .preview-stage::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -.62rem -1.28rem -1.18rem -1.28rem;
        border: 1px solid rgba(221, 199, 143, .5);
        border-radius: 7px 18px 18px 8px;
        background:
            linear-gradient(90deg, rgba(0, 0, 0, .36), transparent 14%, rgba(255, 255, 255, .035) 52%, rgba(0, 0, 0, .22)),
            linear-gradient(135deg, #092d30, #15494b 52%, #08272a);
        box-shadow:
            inset .95rem 0 1.35rem rgba(0, 0, 0, .34),
            inset -.55rem 0 .9rem rgba(255, 255, 255, .045),
            0 2rem 3rem rgba(0, 0, 0, .45);
        pointer-events: none;
    }

    .preview-reader {
        width: var(--pp);
    }

    .preview .preview-side-navigation {
        width: var(--pp);
        height: var(--ph);
    }

    .preview-sheet {
        left: 0;
    }

    .preview-spine {
        display: block;
        z-index: 98;
        left: -.36rem;
        top: .2rem;
        bottom: -.9rem;
        width: .72rem;
        border-radius: 6px 0 0 6px;
        background: linear-gradient(90deg, rgba(43, 28, 10, .42), rgba(177, 146, 80, .2) 48%, rgba(255, 246, 205, .25));
        box-shadow: inset -.18rem 0 .42rem rgba(0, 0, 0, .25), .16rem 0 .4rem rgba(71, 47, 13, .2);
    }

    .preview-spine::before,
    .preview-spine::after {
        display: none;
    }

    .preview[data-state="0"] .preview-stage,
    .preview[data-state="10"] .preview-stage {
        transform: none;
    }

    .preview[data-state="1"] [data-sheet="0"],
    .preview[data-state="2"] [data-sheet="0"],
    .preview[data-state="3"] [data-sheet="0"],
    .preview[data-state="4"] [data-sheet="0"],
    .preview[data-state="5"] [data-sheet="0"],
    .preview[data-state="6"] [data-sheet="0"],
    .preview[data-state="7"] [data-sheet="0"],
    .preview[data-state="8"] [data-sheet="0"],
    .preview[data-state="9"] [data-sheet="0"],
    .preview[data-state="10"] [data-sheet="0"] {
        visibility: hidden;
    }

    .preview .preview-face[data-face="cover"] h1 {
        max-width: 7.15ch;
        margin-top: clamp(5.25rem, 11.2dvh, 6.25rem);
        font-size: clamp(1.82rem, 8.45vw, 2.55rem);
        line-height: .9;
        overflow-wrap: normal;
    }

    .preview .preview-face[data-face="cover"] p:first-of-type {
        max-width: 16rem;
        font-size: clamp(.95rem, 4.1vw, 1.12rem);
    }

    .preview .preview-face[data-face="cover"] p:last-of-type {
        right: 1.45rem;
        bottom: 2rem;
        left: 1.45rem;
        font-size: .54rem;
        letter-spacing: .13em;
    }

    .preview .preview-face[data-face="inside-front"] .preview-inside-cover-logo {
        width: min(70%, 15rem);
        max-height: 60%;
    }

    .preview-controls {
        width: min(96vw, 430px);
        flex-direction: column;
        gap: .34rem;
        align-self: start;
    }

    .preview-controls__progress,
    .preview-controls__tools {
        width: 100%;
    }

    .preview-side-navigation button {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        border-color: rgba(246, 228, 172, .8);
        background: rgba(6, 31, 33, .88);
        box-shadow: 0 .55rem 1.15rem rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .08);
        font-size: 1rem;
    }

    .preview-side-navigation__previous {
        left: .35rem;
    }

    .preview-side-navigation__next {
        right: .35rem;
    }

    .preview-side-navigation button:not(:disabled) {
        visibility: visible;
        opacity: 1;
    }

    .preview-controls__progress {
        display: flex;
        min-height: 36px;
        padding: .2rem;
    }

    .preview-controls output {
        min-width: 7.8rem;
        padding: 0 .25rem;
        font-size: .58rem;
    }

    .preview-controls__tools {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .28rem;
    }

    .preview-controls button {
        min-height: 40px;
        padding: .5rem .38rem;
    }

    .preview-controls__tools button {
        font-size: .55rem;
        letter-spacing: .045em;
    }

    .preview .chapter-item {
        padding: .5rem 0;
    }

    .preview .book-toc li {
        grid-template-columns: 1.65rem minmax(0, 1fr);
        padding: .24rem 0;
        font-size: .86rem;
    }

    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="services-more"],
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="genres"],
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="reviews"],
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="reviews-more"] {
        padding-top: .74rem;
        padding-bottom: 2.85rem;
    }

    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="services-more"] h2,
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="genres"] h2,
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="reviews"] h2,
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="reviews-more"] h2 {
        max-width: 15ch;
        margin-bottom: .34rem;
        font-size: clamp(1.18rem, 5vw, 1.56rem);
        line-height: .92;
    }

    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="services-more"] .chapter-marker,
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="genres"] .chapter-marker,
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="reviews"] .chapter-marker,
    .preview :is(
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    )[data-book-page-rendered="reviews-more"] .chapter-marker {
        margin-bottom: .32rem;
        font-size: .5rem;
        letter-spacing: .12em;
    }

    .preview [data-book-page-rendered="services-more"] .chapter-item,
    .preview [data-book-page-rendered="genres"] .chapter-item {
        padding: .26rem 0;
    }

    .preview [data-book-page-rendered="services-more"] .chapter-item h3,
    .preview [data-book-page-rendered="genres"] .chapter-item h3 {
        margin-bottom: .08rem;
        font-size: clamp(.92rem, 4.25vw, 1.12rem);
        line-height: 1;
    }

    .preview [data-book-page-rendered="services-more"] .chapter-item p,
    .preview [data-book-page-rendered="genres"] .chapter-item p {
        margin-bottom: 0;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: .7rem;
        line-height: 1.18;
    }

    .preview [data-book-page-rendered="reviews"] blockquote,
    .preview [data-book-page-rendered="reviews-more"] blockquote {
        margin-bottom: .34rem;
        padding: .05rem 0 .05rem .52rem;
    }

    .preview [data-book-page-rendered="reviews"] blockquote > p,
    .preview [data-book-page-rendered="reviews-more"] blockquote > p {
        display: -webkit-box;
        overflow: hidden;
        margin-bottom: .12rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: clamp(.74rem, 3.2vw, .86rem);
        line-height: 1.13;
    }

    .preview [data-book-page-rendered="reviews"] blockquote footer,
    .preview [data-book-page-rendered="reviews-more"] blockquote footer {
        font-size: .52rem;
        line-height: 1.08;
    }

    .preview [data-book-page-rendered="reviews"] blockquote footer small,
    .preview [data-book-page-rendered="reviews-more"] blockquote footer small {
        font-size: .5rem;
    }
}

@media (max-width: 800px) and (max-height: 760px) {
    :root {
        --ph: min(54dvh, 430px, calc(100dvh - 206px));
        --pp: min(90vw, 360px, calc(var(--ph) * .86));
        --page-pad-x: clamp(.82rem, 4vw, 1.14rem);
        --page-pad-top: .88rem;
        --page-pad-bottom: 1.82rem;
        --page-copy: clamp(.76rem, 2.22vw, .86rem);
        --page-heading: clamp(1.42rem, 6.1vw, 1.9rem);
    }

    .book-intro__book {
        width: min(92vw, 520px);
        height: min(38dvh, 320px);
        min-height: 220px;
        max-height: calc(100dvh - 310px);
    }

    .book-intro__copy {
        max-width: min(76vw, 320px);
    }

    .book-intro h1 {
        font-size: clamp(1.58rem, 7.7vw, 2.35rem);
    }

    .book-intro p:not(.book-kicker) {
        max-width: min(70vw, 16rem);
        font-size: clamp(.72rem, 2.85vw, .84rem);
    }

    .book-intro__button {
        min-height: 40px;
        padding: .68rem .9rem;
        font-size: .58rem;
    }

    .preview .preview-face[data-face="cover"]::after {
        width: clamp(4.8rem, 21vw, 5.9rem);
        top: 3.2rem;
    }

    .preview .chapter-marker {
        margin-bottom: .55rem;
        font-size: .56rem;
        letter-spacing: .14em;
    }

    .preview .chapter-item {
        padding: .38rem 0;
    }

    .preview .chapter-item p,
    .preview .process-list span {
        line-height: 1.32;
    }

    .preview .book-link {
        min-height: 38px;
        margin: .35rem 0 .65rem;
        padding: .58rem .72rem;
        font-size: .6rem;
    }

    .preview .preview-face[data-face="cover"] h1 {
        margin-top: clamp(4.75rem, 10.2dvh, 5.45rem);
        font-size: clamp(1.52rem, 7.15vw, 2rem);
    }

    .preview .preview-face[data-face="cover"] p:first-of-type {
        font-size: clamp(.86rem, 3.5vw, 1rem);
    }

    .preview .preview-face[data-face="cover"] p:last-of-type {
        bottom: 1.55rem;
        font-size: .48rem;
        letter-spacing: .11em;
    }

    .preview .book-toc {
        font-size: .8rem;
    }
}

@media (max-width: 480px) {
    .book-splash__copy h1 {
        max-width: 8.4ch;
        font-size: clamp(2.25rem, 12.6vw, 3.45rem);
        line-height: .86;
    }

    .book-splash__copy span {
        max-width: 18rem;
        margin: 0 auto;
    }

    .preview::after {
        height: 34%;
    }

    .preview :is(
        .preview-face,
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    ) {
        line-height: 1.4;
    }

    .preview :is(
        .preview-face,
        .preview-settled-page,
        .preview-turn-overlay,
        .preview-turn-underlay
    ) h2 {
        margin-bottom: .65rem;
    }

    .preview .process-list li {
        grid-template-columns: 2.1rem 1fr;
        gap: .55rem;
        padding: .46rem 0;
    }

    .preview blockquote {
        margin-bottom: .7rem;
        padding-left: .75rem;
    }

    .preview blockquote > p {
        font-size: 1rem;
        line-height: 1.26;
    }

    .book-bookmark {
        width: min(var(--bookmark-width), var(--pp)) !important;
        max-width: min(var(--bookmark-width), var(--pp));
    }

    .book-bookmark__panel {
        height: min(var(--bookmark-max-height), var(--ph));
        max-height: min(var(--bookmark-max-height), var(--ph));
        padding: .86rem .5rem 2.45rem;
    }
}

@media (max-height: 720px) and (min-width: 801px) {
    :root {
        --ph: min(66dvh, 560px);
        --page-pad-top: 1.6rem;
        --page-pad-bottom: 2.7rem;
    }

    .preview-controls button {
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .book-splash,
    .book-splash::after,
    .book-splash__mark,
    .book-intro,
    .book-intro__book,
    .book-intro__copy,
    .preview.is-starting .preview-reader,
    .book-bookmark[open]::after,
    .book-bookmark[open]::before,
    .book-bookmark__panel {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .preview > .archon-webgl-scene {
        display: none;
    }

    .preview-library {
        display: none;
    }

    .preview-ambient-book {
        animation: none !important;
    }

    .preview-reader {
        transform: none;
    }

    .preview-stage,
    .preview-sheet,
    .preview-controls button {
        transition-duration: .01ms !important;
    }

    .book-welcome::backdrop {
        backdrop-filter: none;
    }

    .book-bookmark::backdrop {
        backdrop-filter: none;
    }

    .book-bookmark__panel {
        animation: none !important;
    }
}