: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);
}

/* Premium completion pass: masthead, editorial rhythm, and collector-grade finishing. */
.preview {
    background-attachment: scroll;
}

.preview::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(246, 228, 172, .045), transparent 18%, transparent 82%, rgba(246, 228, 172, .045)),
        radial-gradient(circle at 50% 0, rgba(221, 199, 143, .14), transparent 34%);
    mix-blend-mode: screen;
    opacity: .72;
}

.preview-masthead {
    position: fixed;
    z-index: 410;
    top: max(.85rem, env(safe-area-inset-top));
    left: 50%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(.75rem, 1.6vw, 1.35rem);
    width: min(calc(100vw - 2rem), 1180px);
    min-height: 4.15rem;
    padding: .48rem .58rem .48rem .76rem;
    border: 1px solid rgba(221, 199, 143, .24);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(7, 31, 33, .72), rgba(5, 22, 24, .52)),
        radial-gradient(circle at 18% 50%, rgba(221, 199, 143, .1), transparent 36%);
    box-shadow: 0 1.4rem 3.3rem rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: translateX(-50%);
}

.preview-body.is-splash-lock .preview-masthead {
    opacity: 0;
    pointer-events: none;
}

.preview-masthead__brand,
.preview-masthead__nav,
.preview-masthead__cta {
    position: relative;
    z-index: 1;
}

.preview-masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: .62rem;
    min-width: max-content;
    color: #f7e8b8;
    text-decoration: none;
}

.preview-masthead__brand img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    filter: drop-shadow(0 .35rem .6rem rgba(0, 0, 0, .35));
}

.preview-masthead__brand span {
    display: grid;
    gap: .08rem;
}

.preview-masthead__brand strong,
.preview-masthead__brand small,
.preview-masthead__nav a,
.preview-masthead__cta {
    font-family: Inter, Arial, sans-serif;
    text-transform: uppercase;
}

.preview-masthead__brand strong {
    font-size: .78rem;
    letter-spacing: .18em;
    line-height: 1;
}

.preview-masthead__brand small {
    color: rgba(246, 228, 172, .72);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .22em;
}

.preview-masthead__nav {
    display: flex;
    justify-content: center;
    gap: clamp(.25rem, .7vw, .65rem);
    min-width: 0;
}

.preview-masthead__nav a {
    padding: .78rem .82rem;
    border-radius: 999px;
    color: rgba(246, 238, 206, .76);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-decoration: none;
    transition: color .22s ease, background .22s ease, transform .22s ease;
}

.preview-masthead__nav a:hover,
.preview-masthead__nav a:focus-visible {
    color: #fff1be;
    background: rgba(246, 228, 172, .1);
    transform: translateY(-1px);
}

.preview-masthead__cta {
    display: inline-grid;
    place-items: center;
    min-height: 3rem;
    padding: .8rem 1.25rem;
    border: 1px solid rgba(246, 228, 172, .46);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(221, 199, 143, .98), rgba(184, 150, 84, .92));
    color: #092527;
    box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .44);
    font: 900 .62rem/1 Inter, Arial, sans-serif;
    letter-spacing: .15em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .22s ease, box-shadow .22s ease;
}

.preview-masthead__cta:hover,
.preview-masthead__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .3), 0 0 0 .28rem rgba(221, 199, 143, .12);
}

.book-intro {
    padding-top: clamp(6.4rem, 11vh, 8.2rem);
}

.book-intro__content {
    position: relative;
}

.book-intro__content::after {
    content: "";
    position: absolute;
    inset: -1.8rem;
    z-index: -1;
    border: 1px solid rgba(221, 199, 143, .08);
    border-radius: 2.4rem;
    background:
        radial-gradient(circle at 78% 24%, rgba(221, 199, 143, .12), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 45%);
    opacity: .88;
}

.book-intro__signature {
    display: grid;
    gap: .55rem;
    margin-top: clamp(1rem, 2.1vw, 1.45rem);
    padding: 1.05rem 1.15rem;
    border: 1px solid rgba(221, 199, 143, .25);
    border-left: 3px solid rgba(221, 199, 143, .75);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(246, 228, 172, .095), rgba(255, 255, 255, .035)),
        rgba(3, 18, 19, .24);
    color: rgba(246, 238, 206, .9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.book-intro__signature span {
    color: var(--preview-brass-light);
    font: 900 .6rem/1 Inter, Arial, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.book-intro__signature strong {
    color: #f5e9c5;
    font: 500 clamp(1.02rem, .4vw + .94rem, 1.18rem)/1.5 "Cormorant Garamond", Georgia, serif;
}

.book-experience-section {
    box-shadow: inset 0 1px 0 rgba(246, 228, 172, .12), inset 0 -1px 0 rgba(246, 228, 172, .12);
}

.book-experience-section__label {
    position: absolute;
    z-index: 24;
    top: max(1.25rem, env(safe-area-inset-top));
    left: 50%;
    pointer-events: none;
    transform: translateX(-50%);
}

.book-experience-section__label span {
    display: inline-grid;
    place-items: center;
    min-height: 2.2rem;
    padding: .62rem 1rem;
    border: 1px solid rgba(221, 199, 143, .22);
    border-radius: 999px;
    background: rgba(4, 24, 26, .5);
    color: rgba(246, 228, 172, .72);
    box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .18);
    font: 800 .56rem/1 Inter, Arial, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.book-below {
    background-image:
        radial-gradient(circle at 14% 8%, rgba(221, 199, 143, .12), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(112, 143, 140, .18), transparent 24%),
        linear-gradient(180deg, rgba(8, 40, 43, .98), rgba(4, 18, 19, 1) 48%, rgba(5, 22, 24, 1));
}

.book-below__intro,
.book-below-portfolio,
.book-below-services,
.book-below-studio,
.book-below-process,
.book-below-quote,
.book-below-cta {
    position: relative;
}

.book-below__intro::before,
.book-below-portfolio::before,
.book-below-services::before,
.book-below-process::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    right: 1.05rem;
    bottom: 1.05rem;
    left: 1.05rem;
    z-index: 0;
    border: 1px solid rgba(221, 199, 143, .08);
    border-radius: inherit;
    pointer-events: none;
}

.book-below__intro > *,
.book-below-portfolio > *,
.book-below-services > *,
.book-below-process > * {
    position: relative;
    z-index: 1;
}

.book-below .book-kicker {
    display: inline-flex;
    align-items: center;
    gap: .72rem;
}

.book-below .book-kicker::before {
    content: "";
    width: 1.55rem;
    border-top: 1px solid currentColor;
    opacity: .7;
}

.book-below-portfolio {
    overflow: hidden;
}

.book-below-portfolio::after {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -8rem;
    width: 22rem;
    aspect-ratio: 1;
    border: 1px solid rgba(221, 199, 143, .1);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(221, 199, 143, .11), transparent 63%);
    pointer-events: none;
}

.book-below-portfolio__shelf {
    background:
        linear-gradient(180deg, rgba(6, 26, 28, .16), rgba(0, 0, 0, .18)),
        radial-gradient(circle at 50% 0, rgba(246, 228, 172, .12), transparent 52%);
}

.published-book {
    filter: drop-shadow(0 1rem 1.6rem rgba(0, 0, 0, .26));
}

.published-book__cover {
    border-color: rgba(246, 228, 172, .34);
}

.published-book__meta {
    border-top: 1px solid rgba(221, 199, 143, .16);
}

.book-below-services__list article,
.book-below-process__steps article,
.book-below-card {
    overflow: hidden;
}

.book-below-services__list article::before,
.book-below-process__steps article::before,
.book-below-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(246, 228, 172, .08), transparent 38%, rgba(112, 143, 140, .05));
    opacity: .76;
}

.book-below-services__list article > *,
.book-below-process__steps article > *,
.book-below-card > * {
    position: relative;
    z-index: 1;
}

.book-below-quote {
    width: min(88vw, 980px);
    margin: 0 auto clamp(2.2rem, 5vw, 4rem);
    padding: clamp(2rem, 4vw, 3.2rem);
    border-block: 1px solid rgba(221, 199, 143, .25);
    color: #f4e7c0;
    text-align: center;
}

.book-below-quote::before,
.book-below-quote::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(2.5rem, 9vw, 7rem);
    border-top: 1px solid rgba(221, 199, 143, .28);
}

.book-below-quote::before {
    left: 0;
    transform: translate(-64%, -50%);
}

.book-below-quote::after {
    right: 0;
    transform: translate(64%, -50%);
}

.book-below-quote p {
    max-width: 18ch;
    margin: 0 auto .9rem;
    color: #f7e8b8;
    font: 600 clamp(2.15rem, 4.5vw, 4.8rem)/.92 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.book-below-quote span {
    color: rgba(221, 199, 143, .82);
    font: 900 .68rem/1 Inter, Arial, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.book-below-cta {
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.book-below-cta__actions a:first-child {
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 42%),
        linear-gradient(135deg, var(--preview-brass-light), var(--preview-brass));
    color: #071f21;
}

.book-below-cta__actions a:first-child:hover,
.book-below-cta__actions a:first-child:focus-visible {
    box-shadow: 0 1rem 2.2rem rgba(184, 150, 84, .24);
}

@media (prefers-reduced-motion: no-preference) {
    .preview-masthead {
        animation: premiumMastheadArrive .75s cubic-bezier(.2, .76, .16, 1) .35s both;
    }

    .book-experience-section__label span {
        animation: premiumLabelFloat 4.8s ease-in-out infinite;
    }

    .published-book__cover::before {
        transition: opacity .25s ease;
    }

    .published-book:hover .published-book__cover::before {
        opacity: .52;
    }
}

@keyframes premiumMastheadArrive {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-1rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes premiumLabelFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(.28rem);
    }
}

@media (max-width: 980px) {
    .preview-masthead {
        grid-template-columns: auto auto;
        justify-content: space-between;
        width: min(calc(100vw - 1.2rem), 720px);
    }

    .preview-masthead__nav {
        display: none;
    }
}

@media (max-width: 640px) {
    .preview-masthead {
        top: max(.5rem, env(safe-area-inset-top));
        min-height: 3.4rem;
        padding: .38rem .42rem .38rem .55rem;
        border-radius: 1.1rem;
    }

    .preview-masthead__brand {
        gap: .42rem;
    }

    .preview-masthead__brand img {
        width: 2.1rem;
        height: 2.1rem;
    }

    .preview-masthead__brand strong {
        font-size: .66rem;
        letter-spacing: .14em;
    }

    .preview-masthead__brand small {
        font-size: .46rem;
        letter-spacing: .14em;
    }

    .preview-masthead__cta {
        min-height: 2.55rem;
        padding: .68rem .78rem;
        font-size: .54rem;
        letter-spacing: .11em;
    }

    .book-intro {
        padding-top: max(5rem, env(safe-area-inset-top));
    }

    .book-intro__content::after {
        inset: -.7rem;
        border-radius: 1.4rem;
    }

    .book-intro__signature {
        padding: .92rem;
        text-align: left;
    }

    .book-experience-section__label {
        display: none;
    }

    .book-below__intro::before,
    .book-below-portfolio::before,
    .book-below-services::before,
    .book-below-process::before {
        inset: .55rem;
    }

    .book-below-quote {
        width: min(92vw, 420px);
        padding: 1.8rem .85rem;
    }

    .book-below-quote::before,
    .book-below-quote::after {
        display: none;
    }

    .book-below-quote p {
        max-width: 12ch;
        font-size: clamp(2.1rem, 12vw, 3.35rem);
    }
}

.preview-body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #061a1c;
}

.preview-body.is-splash-lock {
    overflow: hidden;
}

.preview {
    position: relative;
    isolation: isolate;
    --scene-x: 0;
    --scene-y: 0;
    --scene-light-x: 50%;
    --scene-light-y: 38%;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
    display: block;
    padding: 0;
    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 .book-experience-section > .archon-webgl-scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    max-height: 100dvh;
    overflow: hidden;
    pointer-events: none;
    opacity: .95;
}

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

.book-splash {
    position: fixed;
    z-index: 620;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #f6e4ac;
    pointer-events: auto;
    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 1.65s cubic-bezier(.22, .72, .18, 1) forwards;
}

.book-splash.is-dismissed {
    display: none;
    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 1.6s 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 1.6s 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-seal.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 1.6s 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;
}

.book-splash__skip {
    position: absolute;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    min-height: 42px;
    padding: .72rem 1rem;
    border: 1px solid rgba(246, 228, 172, .5);
    background: rgba(3, 16, 17, .42);
    color: #f6e4ac;
    font: 700 .62rem/1 Inter, Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .78;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.book-splash__skip:hover,
.book-splash__skip:focus-visible {
    opacity: 1;
    background: rgba(13, 62, 66, .82);
    transform: translateY(-1px);
}

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

@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: relative;
    z-index: 4;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
        max(4.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow: hidden;
    color: #f6e4ac;
    background:
        radial-gradient(circle at 82% 14%, rgba(221, 199, 143, .18), transparent 23rem),
        radial-gradient(circle at 20% 82%, rgba(112, 143, 140, .14), transparent 24rem),
        linear-gradient(135deg, rgba(2, 12, 13, .98), rgba(6, 33, 35, .98) 42%, rgba(1, 11, 12, .99));
    transition: opacity .55s ease, visibility .55s ease;
}

.book-intro::before,
.book-intro::after,
.book-intro__grain {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.book-intro::before {
    background:
        linear-gradient(90deg, rgba(221, 199, 143, .14) 1px, transparent 1px),
        linear-gradient(0deg, rgba(221, 199, 143, .08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at 52% 50%, #000, transparent 70%);
    opacity: .18;
}

.book-intro::after {
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .42), transparent);
}

.book-intro__grain {
    z-index: 0;
    background-image: radial-gradient(rgba(246, 228, 172, .18) .55px, transparent .65px);
    background-size: 8px 8px;
    opacity: .22;
    mix-blend-mode: screen;
}

.book-intro.is-dismissed {
    opacity: .62;
}

.book-intro__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(340px, .78fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    width: min(1180px, 92vw);
}

.book-intro__copy {
    max-width: 42rem;
    animation: heroCopyRise .9s cubic-bezier(.2, .72, .16, 1) .16s both;
}

.book-intro .book-kicker {
    margin: 0 0 1.15rem;
    color: var(--preview-brass-light);
    font: 800 clamp(.68rem, .9vw, .78rem)/1 Inter, Arial, sans-serif;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.book-intro h1 {
    max-width: 11ch;
    margin: 0 0 1.1rem;
    color: #f7e8b4;
    font: 600 clamp(3.4rem, 7vw, 7.15rem)/.84 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.045em;
    text-transform: none;
    text-wrap: balance;
    text-shadow: 0 .55rem 1.45rem rgba(0, 0, 0, .42);
}

.book-intro p:not(.book-kicker) {
    max-width: 38rem;
    margin: 0 0 1.8rem;
    color: rgba(245, 233, 197, .86);
    font: 500 clamp(1.02rem, 1.45vw, 1.22rem)/1.65 Inter, Arial, sans-serif;
}

.book-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.book-intro__button,
.book-intro__link {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font: 800 .72rem/1 Inter, Arial, sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}

.book-intro__button {
    padding: .95rem 1.35rem;
    border: 1px solid rgba(246, 228, 172, .86);
    background: linear-gradient(135deg, #f6e4ac, #c79748);
    color: #092426;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .45);
}

.book-intro__button:hover,
.book-intro__button:focus-visible {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #fff0bd, #d7a45a);
}

.book-intro__link {
    padding: .92rem 1.2rem;
    border: 1px solid rgba(246, 228, 172, .35);
    background: rgba(4, 22, 23, .58);
    color: #f6e4ac;
}

.book-intro__link:hover,
.book-intro__link:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(246, 228, 172, .7);
    background: rgba(13, 62, 66, .82);
}

.book-intro__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    max-width: 42rem;
    margin: 0;
}

.book-intro__proof div {
    min-height: 7.2rem;
    padding: 1rem;
    border: 1px solid rgba(246, 228, 172, .18);
    background: rgba(5, 25, 27, .62);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 1rem 1.8rem rgba(0, 0, 0, .18);
}

.book-intro__proof dt {
    margin-bottom: .65rem;
    color: var(--preview-brass-light);
    font: 800 .68rem/1 Inter, Arial, sans-serif;
    letter-spacing: .22em;
}

.book-intro__proof dd {
    margin: 0;
    color: rgba(245, 233, 197, .82);
    font: 700 clamp(.72rem, .95vw, .84rem)/1.38 Inter, Arial, sans-serif;
}

.book-intro__showcase {
    position: relative;
    min-height: min(72dvh, 650px);
    perspective: 1800px;
    animation: heroArtifactArrive .95s cubic-bezier(.18, .78, .2, 1) .28s both;
}

.book-intro__halo {
    position: absolute;
    inset: 10% -8% 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 228, 172, .2), rgba(13, 62, 66, .2) 35%, transparent 68%);
    filter: blur(1px);
}

.book-intro__book {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(31vw, 390px);
    aspect-ratio: .72;
    transform: translate(-50%, -50%) rotate(-8deg);
    filter: drop-shadow(0 1.65rem 1.6rem rgba(0, 0, 0, .36));
    animation: heroBookFloat 5.8s ease-in-out 1.1s infinite;
}

.book-intro__shadow {
    position: absolute;
    inset: 12% -12% -12% 8%;
    transform: rotate(7deg);
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    filter: blur(20px);
}

.book-intro__page {
    position: absolute;
    z-index: 1;
    inset: 4% 2% 1% 8%;
    border-radius: .95rem .45rem .45rem .95rem;
    border: 1px solid rgba(100, 70, 28, .24);
    background:
        repeating-linear-gradient(0deg, rgba(88, 65, 29, .18) 0 1px, transparent 1px 7px),
        linear-gradient(90deg, rgba(92, 63, 23, .18), transparent 22%),
        #e6d5a6;
    box-shadow: 1rem .8rem 0 -.78rem rgba(217, 199, 150, .75), 1.5rem 1.15rem 0 -1.04rem rgba(176, 145, 82, .7);
}

.book-intro__page--back {
    transform: translate(1.2rem, .9rem) rotate(1deg);
}

.book-intro__page--middle {
    transform: translate(.65rem, .42rem) rotate(.45deg);
}

.book-intro__cover {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: clamp(.55rem, 1vw, .8rem);
    padding: clamp(1.15rem, 2vw, 1.65rem);
    border-radius: 1.05rem .55rem .55rem 1.05rem;
    border: 1px solid rgba(246, 228, 172, .65);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .38), transparent 13%, transparent 88%, rgba(255, 255, 255, .07)),
        repeating-linear-gradient(90deg, rgba(246, 228, 172, .035) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 50% 22%, rgba(112, 143, 140, .38), transparent 36%),
        linear-gradient(145deg, #0d3e42, #062b2e);
    box-shadow: inset .78rem 0 1.45rem rgba(0, 0, 0, .34), inset 0 0 0 .72rem rgba(246, 228, 172, .08), 0 .85rem 1.35rem rgba(0, 0, 0, .24), 0 0 0 1px rgba(0, 0, 0, .2);
}

.book-intro__cover::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 7%;
    border: 1px solid rgba(246, 228, 172, .52);
    border-radius: .55rem .24rem .24rem .55rem;
}

.book-intro__cover img {
    position: relative;
    z-index: 1;
    width: min(46%, 11rem);
    opacity: .76;
    filter: drop-shadow(0 .35rem .22rem rgba(0, 0, 0, .42)) drop-shadow(0 0 .75rem rgba(246, 228, 172, .12));
}

.book-intro__cover span {
    position: relative;
    z-index: 1;
    color: rgba(246, 228, 172, .78);
    font: 800 clamp(.55rem, .9vw, .72rem)/1 Inter, Arial, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.book-intro__cover strong {
    position: relative;
    z-index: 1;
    max-width: 9ch;
    color: #f6e4ac;
    text-align: center;
    font: 600 clamp(2.4rem, 4.2vw, 4.2rem)/.82 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.03em;
}

.book-intro__bookmark {
    position: absolute;
    z-index: 3;
    top: -4%;
    right: 18%;
    width: 13%;
    height: 42%;
    transform: translateZ(28px) rotateZ(6deg);
    background: linear-gradient(#b28b45, #7a5527);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
    box-shadow: 0 .5rem .75rem rgba(0, 0, 0, .24);
    animation: heroBookmarkDrop 1.15s cubic-bezier(.18, .82, .16, 1) .7s both;
}

.book-intro__note {
    position: absolute;
    z-index: 3;
    padding: .72rem .95rem;
    border: 1px solid rgba(246, 228, 172, .22);
    background: rgba(242, 235, 208, .92);
    color: #0d3e42;
    font: 800 .64rem/1 Inter, Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 1rem 1.8rem rgba(0, 0, 0, .22);
}

.book-intro__note--one {
    top: 18%;
    left: 0;
    transform: rotate(-8deg);
}

.book-intro__note--two {
    right: 2%;
    top: 28%;
    transform: rotate(7deg);
}

.book-intro__note--three {
    left: 6%;
    bottom: 16%;
    transform: rotate(5deg);
}

.book-intro__scroll {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    transform: translateX(-50%);
    color: rgba(245, 233, 197, .72);
    font: 800 .6rem/1 Inter, Arial, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.book-intro__scroll::before,
.book-intro__scroll::after {
    content: "";
    width: 2.2rem;
    height: 1px;
    background: rgba(246, 228, 172, .34);
}

.book-experience-section {
    position: relative;
    z-index: 3;
    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);
    min-height: 100dvh;
    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));
    overflow: hidden;
}

.book-below {
    position: relative;
    z-index: 3;
    padding: clamp(4rem, 9vw, 7.5rem) max(1rem, env(safe-area-inset-right))
        clamp(4rem, 8vw, 6.5rem) max(1rem, env(safe-area-inset-left));
    color: #f5e9c5;
    background:
        radial-gradient(circle at 15% 10%, rgba(246, 228, 172, .1), transparent 20rem),
        radial-gradient(circle at 90% 48%, rgba(112, 143, 140, .14), transparent 24rem),
        linear-gradient(180deg, rgba(3, 16, 17, .96), rgba(6, 33, 35, .98) 42%, rgba(2, 12, 13, .99));
    overflow: hidden;
}

.book-below::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(242, 235, 208, .18) .55px, transparent .65px);
    background-size: 8px 8px;
    opacity: .2;
}

.book-below__intro,
.book-below__grid,
.book-below-portfolio,
.book-below-services,
.book-below-process,
.book-below-cta {
    position: relative;
    z-index: 1;
    width: min(1180px, 92vw);
    margin-inline: auto;
}

.book-below__intro {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(260px, .62fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.book-below__intro h2 {
    margin-bottom: 1rem;
}

.book-below-visual {
    position: relative;
    min-height: clamp(19rem, 34vw, 28rem);
    border: 1px solid rgba(246, 228, 172, .16);
    background:
        radial-gradient(circle at 50% 38%, rgba(246, 228, 172, .16), transparent 42%),
        linear-gradient(135deg, rgba(13, 62, 66, .44), rgba(2, 12, 13, .58));
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 1.4rem 2.8rem rgba(0, 0, 0, .24);
    overflow: hidden;
}

.book-below-visual::before {
    content: "";
    position: absolute;
    inset: 11%;
    border: 1px solid rgba(246, 228, 172, .18);
}

.book-below-visual__sheet,
.book-below-visual__cover,
.book-below-visual__pen {
    position: absolute;
    display: block;
}

.book-below-visual__sheet {
    width: 42%;
    height: 58%;
    border: 1px solid rgba(13, 62, 66, .18);
    background:
        repeating-linear-gradient(0deg, transparent 0 1rem, rgba(13, 62, 66, .12) 1rem calc(1rem + 1px)),
        radial-gradient(rgba(13, 62, 66, .22) .5px, transparent .65px),
        #f2ebd0;
    background-size: 100% 100%, 7px 7px, 100% 100%;
    box-shadow: 0 1rem 1.8rem rgba(0, 0, 0, .2);
}

.book-below-visual__sheet--one {
    top: 17%;
    left: 14%;
    transform: rotate(-8deg);
}

.book-below-visual__sheet--two {
    right: 12%;
    bottom: 15%;
    transform: rotate(7deg);
}

.book-below-visual__cover {
    top: 27%;
    left: 31%;
    width: 38%;
    height: 52%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(246, 228, 172, .5);
    background:
        repeating-linear-gradient(90deg, rgba(246, 228, 172, .035) 0 1px, transparent 1px 5px),
        linear-gradient(135deg, #0d3e42, #08282b);
    box-shadow: inset .6rem 0 1rem rgba(0, 0, 0, .28), 0 1.2rem 2rem rgba(0, 0, 0, .28);
}

.book-below-visual__cover img {
    width: 52%;
    opacity: .62;
    filter: drop-shadow(0 .35rem .35rem rgba(0, 0, 0, .42));
}

.book-below-visual__pen {
    right: 18%;
    top: 18%;
    width: 4px;
    height: 64%;
    transform: rotate(42deg);
    transform-origin: center;
    background: linear-gradient(#f6e4ac, #b48743 52%, #092426 52%);
    box-shadow: 0 .6rem 1rem rgba(0, 0, 0, .24);
}

.book-below-visual__pen::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1rem;
    width: 1.1rem;
    height: 1.6rem;
    transform: translateX(-50%);
    background: #f6e4ac;
    clip-path: polygon(50% 0, 100% 70%, 50% 100%, 0 70%);
}

.book-below .book-kicker {
    margin: 0 0 .85rem;
    color: var(--preview-brass-light);
    font: 800 .68rem/1 Inter, Arial, sans-serif;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.book-below h2 {
    margin: 0;
    color: #f6e4ac;
    font: 600 clamp(2.3rem, 5vw, 5.2rem)/.9 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.book-below h3 {
    margin: 0;
    color: #f6e4ac;
    font: 600 clamp(1.35rem, 2vw, 2rem)/1 "Cormorant Garamond", Georgia, serif;
}

.book-below p {
    margin: 0;
    color: rgba(245, 233, 197, .78);
    font: 500 clamp(.95rem, 1.2vw, 1.05rem)/1.65 Inter, Arial, sans-serif;
}

.book-below__grid {
    display: grid;
    grid-template-columns: 1.2fr .9fr .9fr;
    gap: clamp(.85rem, 1.6vw, 1.25rem);
    margin-bottom: clamp(3.5rem, 7vw, 6.25rem);
}

.book-below-portfolio {
    display: grid;
    grid-template-columns: minmax(240px, .44fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    margin-bottom: clamp(3.5rem, 7vw, 6.25rem);
}

.book-below-portfolio__copy h2 {
    margin-bottom: 1rem;
}

.book-below-portfolio__shelf {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: clamp(.7rem, 1.35vw, 1.05rem);
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid rgba(246, 228, 172, .14);
    background:
        linear-gradient(180deg, rgba(246, 228, 172, .08), transparent 38%),
        rgba(3, 16, 17, .35);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 1.3rem 2.5rem rgba(0, 0, 0, .2);
}

.book-below-portfolio__shelf::after {
    content: "";
    position: absolute;
    right: .8rem;
    bottom: .55rem;
    left: .8rem;
    height: .45rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 62, 24, .65), rgba(246, 228, 172, .44), rgba(91, 62, 24, .65));
    box-shadow: 0 .7rem 1rem rgba(0, 0, 0, .26);
}

.published-book {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .85rem;
    align-content: start;
    transform: translateY(var(--published-y, 0)) rotate(var(--published-r, 0deg));
}

.published-book--1 {
    --published-y: .7rem;
    --published-r: -3deg;
}

.published-book--2 {
    --published-y: -.45rem;
    --published-r: 2deg;
}

.published-book--3 {
    --published-y: .25rem;
    --published-r: -1deg;
}

.published-book--4 {
    --published-y: -.2rem;
    --published-r: 3deg;
}

.published-book--5 {
    --published-y: .9rem;
    --published-r: -2deg;
}

.published-book__cover {
    position: relative;
    aspect-ratio: 2 / 3;
    margin: 0;
    border: 1px solid rgba(246, 228, 172, .46);
    border-radius: .75rem .32rem .32rem .75rem;
    background: #061a1c;
    box-shadow: inset .5rem 0 1rem rgba(0, 0, 0, .28), 0 1.25rem 1.45rem rgba(0, 0, 0, .28);
    overflow: hidden;
}

.published-book__cover::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .36), transparent 14%, transparent 88%, rgba(255, 255, 255, .08)),
        linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 24%, rgba(0, 0, 0, .14));
}

.published-book__cover::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 5%;
    border: 1px solid rgba(246, 228, 172, .24);
    border-radius: .45rem .16rem .16rem .45rem;
    pointer-events: none;
}

.published-book__cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
}

.published-book__meta {
    display: grid;
    gap: .35rem;
    min-height: 4.5rem;
    padding-inline: .15rem;
}

.published-book__meta p {
    color: var(--preview-brass-light);
    font: 900 .56rem/1 Inter, Arial, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.published-book__meta h3 {
    max-width: 12ch;
    color: #f6e4ac;
    font-size: clamp(1.12rem, 1.6vw, 1.45rem);
    line-height: .98;
}

.book-work-cover {
    position: relative;
    z-index: 1;
    min-height: clamp(18rem, 25vw, 26rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(.85rem, 1.5vw, 1.2rem);
    border: 1px solid rgba(246, 228, 172, .42);
    border-radius: .75rem .32rem .32rem .75rem;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .32), transparent 15%, transparent 86%, rgba(255, 255, 255, .05)),
        repeating-linear-gradient(90deg, rgba(246, 228, 172, .035) 0 1px, transparent 1px 5px),
        linear-gradient(145deg, var(--cover-a), var(--cover-b));
    box-shadow: inset .55rem 0 1rem rgba(0, 0, 0, .28), 0 1.2rem 1.5rem rgba(0, 0, 0, .25);
    overflow: hidden;
}

.book-work-cover--1 {
    --cover-a: #0d3e42;
    --cover-b: #08282b;
    transform: translateY(.9rem) rotate(-3deg);
}

.book-work-cover--2 {
    --cover-a: #1d5356;
    --cover-b: #0a2223;
    transform: translateY(-.35rem) rotate(2deg);
}

.book-work-cover--3 {
    --cover-a: #263f3d;
    --cover-b: #081d1f;
    transform: translateY(1.1rem) rotate(-1deg);
}

.book-work-cover--4 {
    --cover-a: #0f4749;
    --cover-b: #12302d;
    transform: translateY(.15rem) rotate(3deg);
}

.book-work-cover::before {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(246, 228, 172, .38);
    border-radius: .42rem .18rem .18rem .42rem;
}

.book-work-cover::after {
    content: "";
    position: absolute;
    right: -1.3rem;
    bottom: -2.2rem;
    width: 7rem;
    height: 7rem;
    border: 1px solid rgba(246, 228, 172, .16);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 228, 172, .1), transparent 62%);
}

.book-work-cover__art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 8.5rem;
}

.book-work-cover__art::before {
    content: "";
    width: clamp(4rem, 8vw, 6.5rem);
    height: clamp(4rem, 8vw, 6.5rem);
    border: 1px solid rgba(246, 228, 172, .38);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 228, 172, .16), transparent 62%);
}

.book-work-cover__art span {
    position: absolute;
    width: clamp(2.4rem, 4.8vw, 3.8rem);
    height: clamp(2.4rem, 4.8vw, 3.8rem);
    border: 2px solid rgba(246, 228, 172, .72);
    border-radius: 50% 50% 42% 42%;
}

.book-work-cover__art span::before,
.book-work-cover__art span::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(246, 228, 172, .72);
}

.book-work-cover__art span::before {
    bottom: -.75rem;
    width: 36%;
    height: .52rem;
}

.book-work-cover__art span::after {
    bottom: -1.2rem;
    width: 24%;
    height: 2px;
}

.book-work-cover--2 .book-work-cover__art span {
    border-radius: .2rem;
    background: linear-gradient(90deg, transparent 46%, rgba(246, 228, 172, .6) 46% 54%, transparent 54%);
}

.book-work-cover--3 .book-work-cover__art span {
    border-radius: 100% 0 100% 0;
    transform: translateX(-50%) rotate(-16deg);
}

.book-work-cover--4 .book-work-cover__art span {
    border-radius: .2rem .2rem 1rem 1rem;
}

.book-work-cover__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .45rem;
}

.book-work-cover__copy p {
    color: rgba(246, 228, 172, .72);
    font: 800 clamp(.54rem, .85vw, .66rem)/1.25 Inter, Arial, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.book-work-cover__copy h3 {
    max-width: 8ch;
    font-size: clamp(1.55rem, 2.5vw, 2.45rem);
}

.book-work-cover__copy small {
    color: rgba(245, 233, 197, .7);
    font: 800 .56rem/1 Inter, Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.book-below-card,
.book-below-services__list article,
.book-below-process__steps article {
    border: 1px solid rgba(246, 228, 172, .18);
    background:
        linear-gradient(145deg, rgba(13, 62, 66, .64), rgba(3, 16, 17, .72)),
        radial-gradient(circle at 12% 0, rgba(246, 228, 172, .08), transparent 16rem);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 1.2rem 2.2rem rgba(0, 0, 0, .2);
}

.book-below-card {
    position: relative;
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.4rem;
    padding: clamp(1.15rem, 2.2vw, 2rem);
    overflow: hidden;
}

.book-below-card__visual {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: clamp(4.2rem, 7vw, 6.2rem);
    height: clamp(4.2rem, 7vw, 6.2rem);
    border: 1px solid rgba(246, 228, 172, .18);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 228, 172, .14), rgba(13, 62, 66, .18) 62%, transparent 64%);
    opacity: .92;
}

.book-below-card__visual::before,
.book-below-card__visual::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.book-below-card__visual--idea::before {
    width: 42%;
    height: 50%;
    border: 2px solid currentColor;
    border-radius: 50% 50% 42% 42%;
    color: rgba(13, 62, 66, .72);
}

.book-below-card__visual--idea::after {
    width: 18%;
    height: 10%;
    top: 73%;
    border-top: 2px solid rgba(13, 62, 66, .72);
    border-bottom: 2px solid rgba(13, 62, 66, .72);
}

.book-below-card:not(.book-below-card--wide) .book-below-card__visual--idea::before,
.book-below-card:not(.book-below-card--wide) .book-below-card__visual--idea::after {
    color: rgba(246, 228, 172, .68);
    border-color: rgba(246, 228, 172, .68);
}

.book-below-card__visual--writing::before {
    width: 58%;
    height: 3px;
    background: rgba(246, 228, 172, .78);
    transform: translate(-50%, -50%) rotate(-38deg);
    box-shadow: .9rem -.9rem 0 -.05rem rgba(246, 228, 172, .32);
}

.book-below-card__visual--writing::after {
    width: 38%;
    height: 38%;
    border-left: 2px solid rgba(246, 228, 172, .58);
    border-bottom: 2px solid rgba(246, 228, 172, .58);
    transform: translate(-40%, -28%) rotate(-38deg);
}

.book-below-card__visual--book::before {
    width: 62%;
    height: 46%;
    border: 2px solid rgba(246, 228, 172, .65);
    border-radius: .15rem;
    background: linear-gradient(90deg, transparent 48%, rgba(246, 228, 172, .65) 48% 52%, transparent 52%);
}

.book-below-card__visual--book::after {
    width: 42%;
    height: 2px;
    background: rgba(246, 228, 172, .44);
    box-shadow: 0 .55rem rgba(246, 228, 172, .35), 0 -.55rem rgba(246, 228, 172, .35);
}

.book-below-card--wide {
    background:
        linear-gradient(145deg, rgba(242, 235, 208, .94), rgba(235, 220, 185, .92)),
        radial-gradient(circle at 80% 15%, rgba(13, 62, 66, .12), transparent 16rem);
}

.book-below-card--wide h3,
.book-below-card--wide p,
.book-below-card--wide .book-below-card__number {
    color: #0d3e42;
}

.book-below-card--wide p {
    opacity: .86;
}

.book-below-card__number,
.book-below-services__list span,
.book-below-process__steps span {
    color: var(--preview-brass-light);
    font: 900 .68rem/1 Inter, Arial, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.book-below-services {
    display: grid;
    grid-template-columns: minmax(240px, .42fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: start;
    margin-bottom: clamp(3.5rem, 7vw, 6.25rem);
}

.book-below-services__list {
    display: grid;
    gap: .85rem;
}

.book-below-services__list article {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 4.2rem minmax(0, .48fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: clamp(1rem, 1.8vw, 1.45rem);
}

.book-below-services__icon {
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(246, 228, 172, .34);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 46%, rgba(246, 228, 172, .48) 46% 54%, transparent 54%),
        linear-gradient(#0d3e42, #0d3e42) center / 58% 44% no-repeat;
    box-shadow: inset 0 0 0 .35rem rgba(246, 228, 172, .06), 0 .7rem 1.2rem rgba(0, 0, 0, .18);
}

.book-below-process {
    margin-bottom: clamp(3.5rem, 7vw, 6.25rem);
}

.book-below-studio {
    position: relative;
    z-index: 1;
    width: min(1180px, 92vw);
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(260px, .7fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    margin: 0 auto clamp(3.5rem, 7vw, 6.25rem);
    padding: clamp(1rem, 2.5vw, 2rem);
    border: 1px solid rgba(246, 228, 172, .16);
    background: linear-gradient(135deg, rgba(5, 25, 27, .74), rgba(13, 62, 66, .42));
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 1.4rem 2.8rem rgba(0, 0, 0, .18);
    overflow: hidden;
}

.book-below-studio__scene {
    position: relative;
    min-height: clamp(18rem, 30vw, 27rem);
    border: 1px solid rgba(246, 228, 172, .14);
    background:
        radial-gradient(circle at 32% 28%, rgba(246, 228, 172, .2), transparent 18rem),
        linear-gradient(160deg, rgba(242, 235, 208, .08), rgba(2, 12, 13, .2));
    overflow: hidden;
}

.book-below-studio__lamp,
.book-below-studio__paper,
.book-below-studio__ink,
.book-below-studio__quill {
    position: absolute;
    display: block;
}

.book-below-studio__lamp {
    top: -8%;
    left: 16%;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 228, 172, .42), rgba(246, 228, 172, .06) 58%, transparent 62%);
    filter: blur(.25px);
}

.book-below-studio__paper {
    left: 17%;
    bottom: 12%;
    width: 48%;
    height: 62%;
    transform: rotate(-5deg);
    border: 1px solid rgba(13, 62, 66, .16);
    background:
        repeating-linear-gradient(0deg, transparent 0 1rem, rgba(13, 62, 66, .12) 1rem calc(1rem + 1px)),
        #f2ebd0;
    box-shadow: 0 1rem 1.8rem rgba(0, 0, 0, .25);
}

.book-below-studio__paper::before {
    content: "";
    position: absolute;
    top: 16%;
    left: 12%;
    width: 62%;
    height: 2px;
    background: rgba(13, 62, 66, .34);
    box-shadow: 0 1.15rem rgba(13, 62, 66, .24), 0 2.3rem rgba(13, 62, 66, .22), 0 3.45rem rgba(13, 62, 66, .18);
}

.book-below-studio__paper--second {
    left: 34%;
    bottom: 20%;
    transform: rotate(7deg);
    opacity: .82;
}

.book-below-studio__ink {
    right: 18%;
    bottom: 18%;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50% 50% 44% 44%;
    background: radial-gradient(circle at 50% 32%, #123f41 0 24%, #061a1c 25% 68%, #0a2223 69%);
    box-shadow: inset 0 .25rem .5rem rgba(255, 255, 255, .08), 0 .8rem 1.3rem rgba(0, 0, 0, .26);
}

.book-below-studio__quill {
    right: 24%;
    top: 18%;
    width: .35rem;
    height: 64%;
    transform: rotate(37deg);
    background: linear-gradient(#f6e4ac, #b48743 48%, #072326 48%);
    box-shadow: 0 .8rem 1.2rem rgba(0, 0, 0, .2);
}

.book-below-studio__quill::before {
    content: "";
    position: absolute;
    top: -1.2rem;
    left: 50%;
    width: 3.2rem;
    height: 7.5rem;
    transform: translateX(-50%) rotate(-10deg);
    border-radius: 100% 0 100% 0;
    background:
        linear-gradient(90deg, transparent 47%, rgba(13, 62, 66, .45) 47% 53%, transparent 53%),
        linear-gradient(135deg, rgba(246, 228, 172, .95), rgba(185, 197, 185, .5));
    clip-path: polygon(50% 0, 100% 18%, 74% 100%, 50% 74%, 26% 100%, 0 18%);
}

.book-below-process > h2 {
    max-width: 12ch;
    margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.book-below-process__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.book-below-process__steps article {
    position: relative;
    min-height: 13rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    padding: clamp(1rem, 1.8vw, 1.45rem);
    overflow: hidden;
}

.book-below-process__mark {
    width: 3.4rem;
    height: 3.4rem;
    display: block;
    border: 1px solid rgba(246, 228, 172, .26);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(246, 228, 172, .18) 0 22%, transparent 23%),
        conic-gradient(from 45deg, transparent 0 22%, rgba(246, 228, 172, .58) 22% 28%, transparent 28% 72%, rgba(246, 228, 172, .58) 72% 78%, transparent 78%);
}

.book-below-process__steps article::after {
    content: "";
    position: absolute;
    right: -1.6rem;
    bottom: -1.8rem;
    width: 7rem;
    height: 7rem;
    border: 1px solid rgba(246, 228, 172, .1);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 228, 172, .08), transparent 62%);
}

.book-below-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    padding: clamp(1.4rem, 3.2vw, 2.6rem);
    border: 1px solid rgba(246, 228, 172, .28);
    background:
        linear-gradient(135deg, rgba(242, 235, 208, .96), rgba(235, 220, 185, .92)),
        radial-gradient(circle at 90% 20%, rgba(13, 62, 66, .1), transparent 18rem);
    box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, .24);
    overflow: hidden;
}

.book-below-cta__mark {
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: -2.8rem;
    width: clamp(10rem, 20vw, 17rem);
    opacity: .08;
    filter: grayscale(1) sepia(.2);
}

.book-below-cta h2,
.book-below-cta p {
    color: #0d3e42;
}

.book-below-cta p {
    max-width: 36rem;
    margin-top: .75rem;
    opacity: .86;
}

.book-below-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .8rem;
}

.book-below-cta__actions a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.15rem;
    border: 1px solid #0d3e42;
    background: #0d3e42;
    color: #f6e4ac;
    font: 900 .68rem/1 Inter, Arial, sans-serif;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .22s ease, background .22s ease, color .22s ease;
}

.book-below-cta__actions a + a {
    background: transparent;
    color: #0d3e42;
}

.book-below-cta__actions a:hover,
.book-below-cta__actions a:focus-visible {
    transform: translateY(-2px);
}

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

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

.preview:not(.has-started) .preview-side-navigation__next {
    opacity: 1;
    pointer-events: auto;
}

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

@keyframes heroCopyRise {
    from {
        opacity: 0;
        transform: translateY(1.3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroArtifactArrive {
    from {
        opacity: 0;
        transform: translateY(1.5rem) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroBookFloat {
    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-8deg) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-6deg) translateY(-.55rem);
    }
}

@keyframes heroBookmarkDrop {
    from {
        opacity: 0;
        transform: translate3d(0, -4rem, 28px) rotateZ(-8deg);
    }
    70% {
        opacity: 1;
        transform: translate3d(0, .35rem, 28px) rotateZ(8deg);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 28px) rotateZ(6deg);
    }
}

@keyframes previewReaderStart {
    0% {
        opacity: .38;
        transform: perspective(1500px) translate3d(0, 0, 11rem) rotateX(10deg) rotateY(-28deg) scale(1.16);
    }
    34% {
        opacity: 1;
    }
    58% {
        transform: perspective(1500px) translate3d(0, -1rem, -6rem) rotateX(4deg) rotateY(378deg) scale(.86);
    }
    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-seal.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);
    }

    .book-intro__content {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
        gap: clamp(1.4rem, 4vw, 3rem);
    }

    .book-intro h1 {
        font-size: clamp(3rem, 6.8vw, 5.8rem);
    }

    .book-intro__book {
        width: min(34vw, 330px);
    }

    .book-intro__note {
        display: none;
    }

    .book-below__intro,
    .book-below-portfolio,
    .book-below-services,
    .book-below-studio {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .book-below-card--wide {
        grid-column: 1 / -1;
    }

    .book-below-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .book-below-cta {
        grid-template-columns: minmax(0, 1fr);
    }

    .book-below-cta__actions {
        justify-content: flex-start;
    }

}

@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);
    }

    .book-experience-section {
        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 {
        min-height: auto;
        padding-top: max(2.4rem, env(safe-area-inset-top));
        padding-bottom: max(4.2rem, env(safe-area-inset-bottom));
    }

    .book-intro__content {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.65rem;
        width: min(92vw, 420px);
        padding: 1.8rem 0 1rem;
    }

    .book-intro__copy {
        order: 2;
        max-width: 100%;
        text-align: center;
    }

    .book-intro .book-kicker {
        margin-bottom: .75rem;
        font-size: .58rem;
        letter-spacing: .2em;
    }

    .book-intro h1 {
        max-width: 11ch;
        margin-inline: auto;
        font-size: clamp(2.25rem, 13vw, 4.2rem);
        line-height: .86;
    }

    .book-intro p:not(.book-kicker) {
        max-width: 31rem;
        margin-inline: auto;
        font-size: clamp(.92rem, 3.7vw, 1.05rem);
        line-height: 1.52;
    }

    .book-intro__actions {
        justify-content: center;
        gap: .65rem;
        margin-bottom: 1rem;
    }

    .book-intro__button,
    .book-intro__link {
        width: 100%;
        min-height: 46px;
        padding: .82rem 1rem;
        font-size: .62rem;
    }

    .book-intro__proof {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .book-intro__proof div {
        min-height: auto;
        padding: .78rem .9rem;
        text-align: left;
    }

    .book-intro__showcase {
        order: 1;
        min-height: clamp(16rem, 48dvh, 24rem);
    }

    .book-intro__book {
        width: min(58vw, 230px);
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .book-intro__cover strong {
        font-size: clamp(1.55rem, 9vw, 2.45rem);
    }

    .book-intro__scroll {
        display: none;
    }

    .book-below {
        padding-top: clamp(3rem, 14vw, 4.5rem);
        padding-bottom: clamp(3rem, 14vw, 4.5rem);
    }

    .book-below__intro,
    .book-below__grid,
    .book-below-portfolio,
    .book-below-services,
    .book-below-process,
    .book-below-studio,
    .book-below-cta {
        width: min(92vw, 420px);
    }

    .book-below__intro {
        gap: 1rem;
        margin-bottom: 1.4rem;
    }

    .book-below h2 {
        font-size: clamp(2rem, 11vw, 3.25rem);
    }

    .book-below h3 {
        font-size: clamp(1.28rem, 6.8vw, 1.85rem);
    }

    .book-below p {
        font-size: clamp(.9rem, 3.7vw, 1rem);
        line-height: 1.55;
    }

    .book-below__grid,
    .book-below-process__steps,
    .book-below-services__list {
        grid-template-columns: 1fr;
    }

    .book-below__grid,
    .book-below-portfolio,
    .book-below-services,
    .book-below-studio,
    .book-below-process {
        margin-bottom: 2.5rem;
    }

    .book-below-portfolio__shelf {
        grid-template-columns: repeat(5, minmax(10.2rem, 1fr));
        align-items: stretch;
        gap: .75rem;
        margin-inline: calc((92vw - 100%) / -2);
        padding: 1rem max(1rem, 4vw) 1.5rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .published-book {
        scroll-snap-align: center;
        transform: none;
    }

    .published-book__meta h3 {
        font-size: 1.18rem;
    }

    .book-work-cover {
        min-height: 17rem;
        scroll-snap-align: center;
        transform: none;
    }

    .book-work-cover__art {
        min-height: 7rem;
    }

    .book-work-cover__copy h3 {
        font-size: 1.55rem;
    }

    .book-below-visual {
        min-height: clamp(15rem, 74vw, 22rem);
    }

    .book-below-card__visual {
        width: 4.1rem;
        height: 4.1rem;
        opacity: .62;
    }

    .book-below-card,
    .book-below-process__steps article {
        min-height: auto;
    }

    .book-below-services__list article {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .book-below-services__icon {
        width: 2rem;
        height: 2rem;
    }

    .book-below-studio {
        padding: .85rem;
    }

    .book-below-studio__scene {
        min-height: clamp(14rem, 70vw, 20rem);
    }

    .book-below-studio__copy {
        padding: .2rem;
    }

    .book-below-process > h2 {
        max-width: 11ch;
        margin-bottom: 1.25rem;
    }

    .book-below-cta {
        padding: 1.1rem;
    }

    .book-below-cta__mark {
        width: 11rem;
        right: -1.8rem;
        bottom: -1.8rem;
    }

    .book-below-cta__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .book-below-cta__actions a {
        width: 100%;
        min-height: 44px;
        font-size: .62rem;
    }

    .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 .book-experience-section > .archon-webgl-scene {
        opacity: .22;
    }

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

    .preview-stage {
        width: var(--pp);
        filter: none;
    }

    .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: .5rem;
        display: block;
        font-size: .9rem;
        line-height: 1.45;
    }

    .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: block;
        margin-bottom: .4rem;
        font-size: .95rem;
        line-height: 1.4;
    }

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

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

@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__content {
        gap: 1rem;
        padding-top: 1.2rem;
    }

    .book-intro__showcase {
        min-height: clamp(12.5rem, 42dvh, 18rem);
    }

    .book-intro__book {
        width: min(50vw, 190px);
    }

    .book-intro h1 {
        font-size: clamp(1.95rem, 11vw, 3.1rem);
    }

    .book-intro p:not(.book-kicker) {
        font-size: clamp(.82rem, 3.4vw, .94rem);
    }

    .book-intro__proof {
        display: none;
    }

    .book-intro__button,
    .book-intro__link {
        min-height: 40px;
        font-size: .56rem;
    }

    .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__showcase,
    .book-intro__copy,
    .book-intro__bookmark,
    .preview.is-starting .preview-reader,
    .book-bookmark[open]::after,
    .book-bookmark[open]::before,
    .book-bookmark__panel {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .preview .book-experience-section > .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;
    }
}

/* Final design polish */
.preview {
    scroll-behavior: smooth;
}

.preview :focus-visible {
    outline: 2px solid rgba(246, 228, 172, .95);
    outline-offset: 4px;
}

.book-splash {
    background:
        radial-gradient(circle at 50% 33%, rgba(246, 228, 172, .3), transparent 11%),
        radial-gradient(circle at 50% 55%, rgba(29, 83, 86, .5), transparent 24%),
        linear-gradient(135deg, #020b0c, #08282b 48%, #010708);
}

.book-splash__copy {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(246, 228, 172, .18);
    background: rgba(1, 10, 11, .16);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 1.4rem 4rem rgba(0, 0, 0, .16);
}

.book-intro__content,
.book-below__intro,
.book-below-portfolio,
.book-below-services,
.book-below-studio,
.book-below-process,
.book-below-cta {
    filter: none;
}

.book-intro__copy {
    position: relative;
}

.book-intro__copy::before {
    content: "";
    position: absolute;
    top: -.9rem;
    left: 0;
    width: clamp(3.5rem, 8vw, 6rem);
    height: 2px;
    background: linear-gradient(90deg, var(--preview-brass-light), transparent);
}

.book-intro__button,
.book-intro__link,
.book-below-cta__actions a,
.preview-controls button,
.preview-side-navigation button {
    cursor: pointer;
}

.book-intro__button:active,
.book-intro__link:active,
.book-below-cta__actions a:active,
.preview-controls button:not(:disabled):active,
.preview-side-navigation button:not(:disabled):active {
    transform: translateY(0) scale(.985);
}

.book-experience-section {
    border-top: 1px solid rgba(246, 228, 172, .08);
    border-bottom: 1px solid rgba(246, 228, 172, .1);
}

.book-experience-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: clamp(7rem, 18dvh, 12rem);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(246, 228, 172, .06), transparent);
}

.preview-reader,
.preview-controls {
    position: relative;
    z-index: 2;
}

.preview-controls {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.book-below {
    border-top: 1px solid rgba(246, 228, 172, .1);
}

.book-below-card,
.book-below-services__list article,
.book-below-studio,
.book-below-process__steps article,
.book-below-cta,
.book-below-visual,
.book-below-portfolio__shelf {
    border-radius: clamp(.85rem, 1.4vw, 1.35rem);
}

.book-below-card,
.book-below-services__list article,
.book-below-process__steps article,
.published-book,
.book-below-cta__actions a {
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, filter .24s ease;
}

.book-below-card:hover,
.book-below-services__list article:hover,
.book-below-process__steps article:hover {
    transform: translateY(-4px);
    border-color: rgba(246, 228, 172, .32);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 1.6rem 2.6rem rgba(0, 0, 0, .26);
}

.book-below-card--wide:hover {
    box-shadow: inset 0 1px rgba(255, 255, 255, .32), 0 1.6rem 2.8rem rgba(0, 0, 0, .26);
}

.book-below-portfolio__shelf {
    padding-bottom: clamp(1.6rem, 2.6vw, 2.2rem);
}

.published-book__cover {
    background:
        linear-gradient(90deg, rgba(2, 12, 13, .78), transparent 18%),
        #061a1c;
}

.published-book__cover img {
    transition: transform .42s ease, filter .42s ease;
}

.published-book:hover {
    transform: translateY(calc(var(--published-y, 0) - .35rem)) rotate(var(--published-r, 0deg));
    filter: brightness(1.05);
}

.published-book:hover .published-book__cover {
    box-shadow: inset .5rem 0 1rem rgba(0, 0, 0, .3), 0 1.6rem 2rem rgba(0, 0, 0, .34);
}

.published-book:hover .published-book__cover img {
    transform: scale(1.045);
}

.published-book__meta {
    padding-top: .15rem;
}

.book-below-services__list article::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 4.8rem;
    height: 4.8rem;
    border: 1px solid rgba(246, 228, 172, .08);
    border-radius: 50%;
    pointer-events: none;
}

.book-below-studio__scene {
    border-radius: clamp(.75rem, 1.2vw, 1rem);
}

.book-below-cta {
    position: relative;
}

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

.book-bookmark__panel {
    box-shadow: 0 1.2rem 2.2rem rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .34);
}

@media (prefers-reduced-motion: no-preference) {
    .book-below-visual__pen,
    .book-below-studio__quill {
        animation: polishPenFloat 5.4s ease-in-out infinite;
    }

    .book-below-studio__lamp {
        animation: polishLampGlow 4.6s ease-in-out infinite;
    }
}

@keyframes polishPenFloat {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -.35rem;
    }
}

@keyframes polishLampGlow {
    0%,
    100% {
        opacity: .88;
        scale: 1;
    }
    50% {
        opacity: 1;
        scale: 1.04;
    }
}

/* Only the visible section spends time on continuous decorative motion. */
.book-intro.is-motion-paused .book-intro__book,
.book-below-visual.is-motion-paused .book-below-visual__pen,
.book-below-studio.is-motion-paused .book-below-studio__quill,
.book-below-studio.is-motion-paused .book-below-studio__lamp,
.book-experience-section.is-motion-paused .book-experience-section__label,
.book-experience-section.is-motion-paused .preview-ambient-book,
.preview.is-reader-busy .book-experience-section__label,
.preview.is-reader-busy .preview-ambient-book {
    animation-play-state: paused;
}

@media (max-width: 800px) {
    .book-splash__copy {
        width: min(88vw, 24rem);
    }

    .book-intro__copy::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .book-below-card:hover,
    .book-below-services__list article:hover,
    .book-below-process__steps article:hover,
    .published-book:hover {
        transform: none;
    }

    .book-below-portfolio__shelf {
        scrollbar-width: thin;
        scrollbar-color: rgba(246, 228, 172, .42) rgba(3, 16, 17, .35);
    }

    .published-book__cover {
        border-radius: .65rem .28rem .28rem .65rem;
    }

    .book-below-cta::before {
        inset: .65rem;
    }
}

/* Touch devices keep the reading experience responsive by using static decoration. */
@media (max-width: 800px) and (pointer: coarse) {
    .preview-masthead,
    .preview-controls,
    .book-splash__copy,
    .book-welcome::backdrop,
    .book-bookmark::backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .book-intro__book,
    .book-below-visual__pen,
    .book-below-studio__quill,
    .book-below-studio__lamp,
    .preview-ambient-book,
    .book-experience-section__label {
        animation: none !important;
    }

    .book-intro__book,
    .book-intro__shadow {
        filter: none;
    }
}

/* Final cascade layer for the polished production review. */
.preview {
    scroll-behavior: smooth;
    background-attachment: scroll;
}

.preview-masthead {
    position: fixed;
    z-index: 410;
}

.book-intro {
    padding-top: clamp(6.4rem, 11vh, 8.2rem);
}

.book-intro__signature {
    display: grid;
}

.book-experience-section__label {
    position: absolute;
    z-index: 24;
}

.book-below-quote {
    display: block;
}

@media (max-width: 800px) {
    .preview-masthead {
        grid-template-columns: auto auto;
        justify-content: space-between;
        width: min(calc(100vw - 1.2rem), 720px);
        min-height: 3.4rem;
        border-radius: 1.1rem;
    }

    .preview-masthead__nav {
        display: none;
    }

    .book-intro {
        padding-top: max(5rem, env(safe-area-inset-top));
    }

    .book-experience-section__label {
        display: none;
    }
}

/* Hero hierarchy correction: one clear editorial voice, then quiet supporting detail. */
.preview-masthead {
    border-color: rgba(221, 199, 143, .4);
    background:
        linear-gradient(135deg, rgba(4, 24, 26, .94), rgba(3, 17, 19, .9)),
        radial-gradient(circle at 10% 50%, rgba(221, 199, 143, .16), transparent 31%);
    box-shadow: 0 1.15rem 2.8rem rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.preview-masthead__brand {
    gap: .72rem;
    padding: .28rem .72rem .28rem .3rem;
    border: 1px solid rgba(221, 199, 143, .2);
    border-radius: 999px;
    background: rgba(246, 228, 172, .055);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

.preview-masthead__brand img {
    width: 3rem;
    height: 3rem;
    padding: .27rem;
    border: 1px solid rgba(221, 199, 143, .58);
    border-radius: 50%;
    background: rgba(3, 20, 22, .76);
    opacity: 1;
    filter: brightness(1.35) contrast(1.12) drop-shadow(0 .28rem .52rem rgba(0, 0, 0, .42));
}

.preview-masthead__brand span {
    gap: .16rem;
}

.preview-masthead__brand strong {
    color: #fff0bc;
    font-size: .82rem;
    letter-spacing: .16em;
}

.preview-masthead__brand small {
    color: rgba(255, 241, 190, .92);
    font-size: .56rem;
    letter-spacing: .18em;
}

@media (min-width: 801px) {
    .book-intro__content {
        grid-template-columns: minmax(0, .88fr) minmax(320px, .72fr);
        gap: clamp(2.4rem, 5.5vw, 5.5rem);
        width: min(1160px, 90vw);
    }
}

.book-intro__copy {
    max-width: 39rem;
}

.book-intro .book-kicker {
    margin-bottom: 1.35rem;
    color: #e8d39b;
    font-size: clamp(.64rem, .84vw, .74rem);
    letter-spacing: .24em;
}

.book-intro h1 {
    max-width: 10.35ch;
    margin-bottom: 1.35rem;
    font-size: clamp(3.15rem, 5.7vw, 6rem);
    line-height: .91;
    letter-spacing: -.038em;
}

.book-intro p:not(.book-kicker) {
    max-width: 34rem;
    margin-bottom: 1.65rem;
    color: rgba(245, 233, 197, .92);
    font-size: clamp(.98rem, 1.15vw, 1.12rem);
    line-height: 1.62;
}

.book-intro__actions {
    gap: .72rem;
    margin-bottom: 1.5rem;
}

.book-intro__button,
.book-intro__link {
    min-height: 48px;
    font-size: .67rem;
    letter-spacing: .13em;
}

.book-intro__proof {
    gap: 0;
    max-width: 37rem;
    border-top: 1px solid rgba(246, 228, 172, .22);
    border-bottom: 1px solid rgba(246, 228, 172, .16);
}

.book-intro__proof div {
    min-height: 0;
    padding: .9rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.book-intro__proof div + div {
    border-left: 1px solid rgba(246, 228, 172, .16);
}

.book-intro__proof dt {
    margin-bottom: .35rem;
    font-size: .58rem;
    letter-spacing: .18em;
}

.book-intro__proof dd {
    color: rgba(245, 233, 197, .9);
    font-size: clamp(.68rem, .75vw, .76rem);
    font-weight: 700;
    line-height: 1.42;
}

.book-intro__signature {
    max-width: 35rem;
    margin-top: 1.15rem;
    padding: .2rem 0 .2rem 1rem;
    border-left: 2px solid rgba(221, 199, 143, .56);
    background: transparent;
    box-shadow: none;
}

.book-intro__signature span {
    font-size: .56rem;
    letter-spacing: .17em;
}

.book-intro__signature strong {
    margin-top: .3rem;
    font: 500 clamp(.78rem, .9vw, .88rem)/1.45 Inter, Arial, sans-serif;
}

@media (max-width: 800px) {
    .preview-masthead__brand {
        gap: .52rem;
        padding: .24rem .54rem .24rem .25rem;
    }

    .preview-masthead__brand img {
        width: 2.45rem;
        height: 2.45rem;
        padding: .22rem;
    }

    .preview-masthead__brand strong {
        font-size: .66rem;
        letter-spacing: .13em;
    }

    .preview-masthead__brand small {
        font-size: .47rem;
        letter-spacing: .14em;
    }

    .book-intro__content {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.35rem;
        width: min(100%, 420px);
    }

    .book-intro .book-kicker {
        margin-bottom: .9rem;
        font-size: .57rem;
        letter-spacing: .19em;
    }

    .book-intro h1 {
        max-width: 10.5ch;
        margin-bottom: 1rem;
        font-size: clamp(2.15rem, 10.5vw, 3.5rem);
        line-height: .94;
    }

    .book-intro p:not(.book-kicker) {
        max-width: 31rem;
        margin-bottom: 1.25rem;
        font-size: clamp(.9rem, 3.55vw, 1rem);
        line-height: 1.55;
    }

    .book-intro__actions {
        gap: .58rem;
        margin-bottom: 1.1rem;
    }

    .book-intro__proof {
        grid-template-columns: minmax(0, 1fr);
        text-align: left;
    }

    .book-intro__proof div {
        padding: .72rem .52rem;
        border-left: 0;
    }

    .book-intro__proof dt {
        margin-bottom: .25rem;
        font-size: .5rem;
    }

    .book-intro__proof dd {
        font-size: .8rem;
        line-height: 1.35;
    }

    .book-intro__signature {
        margin-top: .85rem;
        padding-left: .78rem;
        text-align: left;
    }

    .book-intro__signature strong {
        font-size: .74rem;
    }
}

/* Phone layouts share the reader's 800px breakpoint, including touch laptops
   and resized windows. Keep decoration in its own flow and reserve a control row. */
@media (max-width: 800px) {
    .preview {
        --ph: clamp(380px, 58svh, 500px);
        --pp: min(calc(100vw - 3rem), 390px, calc(var(--ph) * .84));
        --page-copy: .9rem;
        --page-heading: clamp(1.65rem, 6.5vw, 2.12rem);
        background: #08282b;
    }

    /* Keep the composited book pages inside the reader section. Mobile Chrome can
       otherwise retain a cream page layer after the reader has scrolled away. */
    .book-experience-section {
        isolation: isolate;
        contain: layout paint;
        overflow: clip;
    }

    .book-below {
        isolation: isolate;
        z-index: 4;
    }

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

    .preview-masthead {
        position: absolute;
        animation: none;
        transform: translateX(-50%);
        gap: .5rem;
        grid-template-columns: minmax(0, 1fr) auto;
        background: #04181a;
        box-shadow: inset 0 1px rgba(255,255,255,.1);
    }

    .preview-masthead__brand { min-width: 0; }
    .preview-masthead__brand small { letter-spacing: .07em; }
    .preview-masthead__cta { font-size: .6rem; letter-spacing: .06em; }

    .book-intro {
        padding: 6rem 1rem 3rem;
    }

    .book-intro__content::after { inset: -.5rem; }
    .book-intro__copy { min-width: 0; }

    .book-intro__showcase {
        display: grid;
        place-items: center;
        min-width: 0;
        min-height: 0;
        padding: 2rem;
        perspective: none;
        animation: none;
    }

    .book-intro__book {
        position: relative;
        top: auto;
        left: auto;
        width: min(50vw, 200px);
        transform: rotate(-6deg);
        animation: none !important;
        filter: none;
    }

    .book-intro__cover { padding: 1.1rem; }
    .book-intro__cover span { text-align: center; line-height: 1.4; letter-spacing: .1em; }
    .book-intro__cover strong { font-size: clamp(1.55rem, 7vw, 2rem); line-height: .98; }
    .book-intro__bookmark { animation: none; transform: rotate(6deg); }
    .book-intro__shadow { display: none; }
    .book-intro__signature { border-radius: 0; border-width: 0 0 0 2px; }
    .book-intro__button, .book-intro__link { min-height: 48px; line-height: 1.4; }

    .book-experience-section {
        min-height: 0;
        padding-block: 2.5rem 2rem;
        gap: 1rem;
    }

    .preview-reader {
        height: auto;
        max-height: none;
        grid-template-rows: var(--ph) 48px;
        row-gap: 1.75rem;
        align-self: center;
    }

    .preview .preview-side-navigation {
        position: relative;
        grid-area: 2 / 1;
        inset: auto;
        height: 48px;
        transform: none;
    }

    .preview-controls { align-self: center; }
    .preview-controls__tools button { min-height: 44px; font-size: .62rem; }

    /* Long chapters remain readable without shrinking or cutting off sentences. */
    .preview .preview-settled-page[data-book-page-rendered] {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    .preview :is(.preview-settled-page, .preview-turn-overlay, .preview-turn-underlay)[data-book-page-rendered] .page-no {
        position: static;
        margin-top: 1rem;
    }

    .preview .preview-mobile-turn-layer .preview-turn-overlay {
        overflow: hidden;
    }

    .book-below > :is(div, section) { max-width: 100%; }
    .book-below h2 { line-height: 1.08; }
    .book-below-quote { isolation: isolate; padding: 2rem 1rem; }
    .book-below .book-below-quote p { max-width: 24ch; font: 600 1.8rem/1.2 "Cormorant Garamond", Georgia, serif; }
    .book-below .book-below-cta .book-kicker { color: #355958; }

    .preview-controls,
    .preview-controls__progress,
    .preview-controls__tools,
    .preview-masthead { backdrop-filter: none; -webkit-backdrop-filter: none; }

    .published-slider__viewport { touch-action: pan-y pinch-zoom; }
    .published-slider__viewport::before, .published-slider__viewport::after { width: 1rem; }
    .published-slider .published-book { filter: none; }

    .book-welcome input,
    .book-bookmark__form input,
    .book-bookmark__form select,
    .book-bookmark__form textarea { font-size: 16px; min-height: 44px; }
    .book-bookmark .consent input { min-height: 0; }
    .book-bookmark h2 { font-size: 1.65rem; overflow-wrap: anywhere; }
    .book-bookmark {
        width: var(--bookmark-width) !important;
        max-width: calc(100vw - 2rem);
    }
    .book-bookmark__panel {
        padding-inline: 1rem;
        overscroll-behavior-y: contain;
        will-change: auto;
    }
    .book-bookmark__close button { width: 44px; height: 44px; }

    .book-below-visual__pen,
    .book-below-studio__quill,
    .book-below-studio__lamp,
    .preview-ambient-book { animation: none !important; }
}

/* Published books premium slider */
.published-slider {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(1rem, 2vw, 1.45rem);
    min-width: 0;
}

.published-slider__viewport {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(221, 199, 143, .2);
    border-radius: clamp(1rem, 1.8vw, 1.55rem);
    background:
        radial-gradient(circle at 50% 0, rgba(246, 228, 172, .13), transparent 48%),
        linear-gradient(180deg, rgba(3, 16, 17, .2), rgba(0, 0, 0, .2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1.4rem 3rem rgba(0, 0, 0, .24);
}

.published-slider__viewport::before,
.published-slider__viewport::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: clamp(2rem, 7vw, 6rem);
    pointer-events: none;
}

.published-slider__viewport::before {
    left: 0;
    background: linear-gradient(90deg, rgba(5, 22, 24, .92), transparent);
}

.published-slider__viewport::after {
    right: 0;
    background: linear-gradient(270deg, rgba(5, 22, 24, .92), transparent);
}

.published-slider .book-below-portfolio__shelf {
    display: flex;
    grid-template-columns: none;
    align-items: stretch;
    gap: clamp(.85rem, 1.7vw, 1.35rem);
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: clamp(1.15rem, 2.4vw, 2rem) clamp(1rem, 3vw, 2.35rem) clamp(1.4rem, 2.5vw, 2.15rem);
    overflow: visible;
    scroll-snap-type: none;
    transform: translate3d(var(--published-slider-x, 0px), 0, 0);
    transition: transform .58s cubic-bezier(.2, .72, .16, 1);
    will-change: transform;
}

.published-slider.is-dragging .book-below-portfolio__shelf {
    transition: none;
    cursor: grabbing;
}

.published-slider .published-book {
    flex: 0 0 clamp(12.5rem, 16.5vw, 16.5rem);
    min-width: 0;
    transform: translateY(var(--published-y, 0)) rotate(var(--published-r, 0deg));
}

.published-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.75rem, 1.8vw, 1.15rem);
}

.published-slider__button,
.published-slider__dot {
    border: 1px solid rgba(221, 199, 143, .3);
    background: rgba(3, 16, 17, .52);
    color: #f6e4ac;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 .8rem 1.6rem rgba(0, 0, 0, .22);
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, opacity .22s ease;
}

.published-slider__button {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.1rem;
}

.published-slider__button:hover:not(:disabled),
.published-slider__button:focus-visible,
.published-slider__dot:hover,
.published-slider__dot:focus-visible {
    border-color: rgba(246, 228, 172, .72);
    background: rgba(13, 62, 66, .82);
    transform: translateY(-2px);
}

.published-slider__button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.published-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 2rem;
}

.published-slider__dot {
    width: .58rem;
    height: .58rem;
    padding: 0;
    border-radius: 999px;
    opacity: .56;
}

.published-slider__dot[aria-current="true"] {
    width: 1.75rem;
    opacity: 1;
    background: linear-gradient(135deg, var(--preview-brass-light), var(--preview-brass));
    border-color: rgba(246, 228, 172, .82);
}

@media (max-width: 800px) {
    .published-slider__viewport {
        margin-inline: calc((92vw - 100%) / -2);
        border-radius: .95rem;
    }

    .published-slider .book-below-portfolio__shelf {
        gap: .9rem;
        padding: 1rem max(1rem, 5vw) 1.25rem;
        will-change: auto;
    }

    .published-slider .published-book {
        flex-basis: min(68vw, 15.5rem);
        transform: none;
    }

    .published-slider__button {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .published-slider .book-below-portfolio__shelf {
        transition: none;
    }
}

/* Logo contrast pass: the supplied dark wordmark needs a light badge on teal surfaces. */
.preview-masthead__brand img {
    flex: 0 0 auto;
    width: 3.05rem;
    height: 3.05rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    filter: drop-shadow(0 .3rem .48rem rgba(0, 0, 0, .38));
}

/* Minimal masthead treatment: one outer capsule, no nested logo/button boxes. */
.preview-masthead__brand {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.preview-masthead__brand img {
    width: 2.55rem;
    height: 2.55rem;
    filter: drop-shadow(0 .24rem .42rem rgba(0, 0, 0, .36));
}

.preview-masthead__cta {
    min-height: 0;
    padding: .72rem .82rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f6e4ac;
    box-shadow: none;
}

.preview-masthead__cta:hover,
.preview-masthead__cta:focus-visible {
    background: rgba(246, 228, 172, .08);
    box-shadow: none;
}

.book-intro__cover img {
    width: min(43%, 10rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    object-fit: contain;
    filter: drop-shadow(0 .3rem .28rem rgba(0, 0, 0, .38));
}

@media (max-width: 800px) {
    .preview-masthead__brand img {
        width: 2.2rem;
        height: 2.2rem;
    }

    .book-intro__cover img {
        width: min(40%, 8rem);
    }
}