/* Radio Vibe: the supplied logo's amber, pink and violet, with readable type. */
:root {
    --paper: #12101c;
    --ink: #faf7ff;
    --muted: #c7c0d5;
    --orange: #ffb65b;
    --line: #ffffff26;
    --pink: #ff57b5;
    --panel: #211b30;
    --gradient: linear-gradient(115deg, #ffbf58, #ff6b79 45%, #ed4ec6 75%, #9e70ff)
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 135px;
    color-scheme: dark
}

body {
    font-size: 18px;
    line-height: 1.7;
    background: radial-gradient(ellipse at 85% 12%, #60236930, transparent 36%), radial-gradient(ellipse at 0% 48%, #4e2b7b25, transparent 35%), var(--paper)
}

body:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient)
}

.shell {
    max-width: 1440px;
    padding: 0 64px
}

.site-header {
    height: 130px;
    gap: 24px;
    position: relative;
    z-index: 20
}

.brand {
    flex-shrink: 0
}

.brand-logo {
    display: block;
    width: 146px;
    height: 104px;
    object-fit: contain
}

.nav {
    font-size: 16px;
    gap: 25px
}

.nav a {
    padding: 12px 0;
    transition: color .2s
}

.nav a:hover {
    color: var(--pink)
}

.nav a.active {
    color: #ffc579
}

.nav a.active:after {
    background: var(--gradient);
    width: 28px;
    height: 3px;
    border-radius: 4px
}

.nav .appointment-link {
    border: 1px solid #d282d58c;
    background: #ffffff07;
    padding: 12px 18px;
    border-radius: 30px
}

.nav .appointment-link:hover {
    background: #ffffff10
}

.menu-toggle {
    font-size: 22px;
    color: var(--ink);
    border-radius: 12px;
    min-width: 48px;
    min-height: 48px
}

.eyebrow {
    font-size: 13px;
    letter-spacing: 1.7px;
    line-height: 1.8;
    color: #e7bddc
}

.dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 15px #ff8c7870
}

.hero {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding: 64px 0 74px
}

.hero h1 {
    font-size: clamp(52px, 5.5vw, 80px);
    line-height: 1.55;
    letter-spacing: -1px;
    margin: 24px 0 18px;
    font-weight: 600
}

.hero h1 span {
    color: #ffb36c;
    background: var(--gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.hero p {
    font-size: 21px;
    line-height: 1.95;
    max-width: 520px;
    color: #dbd5e5
}

.actions {
    gap: 26px;
    margin-top: 32px
}

.btn {
    font-size: 17px;
    min-height: 54px;
    padding: 14px 24px;
    border: 0;
    border-radius: 32px;
    background: var(--gradient);
    color: #251027;
    font-weight: 700;
    gap: 20px;
    box-shadow: 0 8px 30px #ed4ec61a;
    transition: transform .2s, box-shadow .2s
}

.btn:hover,
.btn.orange:hover {
    background: var(--gradient);
    transform: translateY(-3px);
    box-shadow: 0 9px 32px #ed4ec63d
}

.btn.orange {
    background: var(--gradient);
    border: 0
}

.btn.light {
    background: #ffffff08;
    color: var(--ink);
    border: 1px solid #dba0cd85
}

.btn.light:hover {
    background: #ffffff16
}

.btn:disabled {
    opacity: .65;
    cursor: wait;
    transform: none
}

.text-link {
    font-size: 17px;
    line-height: 1.8;
    border-color: #c090bb7a;
    gap: 18px
}

.text-link:hover {
    color: #ffc579
}

.text-link span {
    transition: transform .2s
}

.card:hover .text-link span,
.text-link:hover span {
    transform: translate(3px, -3px)
}

.hero-note {
    font-size: 16px !important;
    margin-top: 28px;
    color: var(--muted) !important
}

.hero-art {
    padding: 15px 0 26px;
    min-width: 0
}

.hero-art:before {
    content: '';
    position: absolute;
    inset: -24px;
    border: 1px solid #c888d229;
    border-radius: 48% 48% 30px 30px;
    transform: rotate(5deg);
    pointer-events: none
}

.image-frame {
    border: 1px solid #e4a6cd66;
    border-radius: 46% 46% 22px 22px;
    background: #eee4d3;
    padding-top: 44px;
    box-shadow: 0 24px 75px #0006
}

.image-frame img {
    height: 380px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal
}

.on-air {
    top: 32px;
    left: 28px;
    background: #241a2b;
    color: #ffdcaa;
    border: 1px solid #ffd2a34d;
    font-size: 11px;
    padding: 9px 14px;
    letter-spacing: 1px
}

.art-caption {
    background: #251d31;
    color: var(--ink);
    border-top: 1px solid #ffffff20;
    font-size: 16px;
    padding: 20px 24px
}

.art-caption strong {
    font-size: 25px;
    font-weight: 600
}

.floating-note {
    right: -16px;
    bottom: 2px;
    background: #3b2541;
    border: 1px solid #c57fa675;
    font-size: 18px;
    border-radius: 12px;
    padding: 13px 22px;
    box-shadow: 0 10px 30px #0004;
    transform: rotate(-4deg)
}

.wave {
    gap: 5px
}

.wave i {
    width: 3px;
    border-radius: 8px;
    background: var(--gradient);
    opacity: 1;
    transform-origin: center
}

.wave i:nth-child(3n) {
    background: #ff66b7
}

.wave i:nth-child(3n + 1) {
    background: #ffb45d
}

.wave i:nth-child(3n + 2) {
    background: #bf7cff
}

.hero-art:hover .wave i,
.empty-state:hover .wave i {
    animation: equalizer .8s ease-in-out infinite alternate
}

.wave i:nth-child(even) {
    animation-delay: .25s
}

.wave i:nth-child(3n) {
    animation-delay: .4s
}

@keyframes equalizer {
    to {
        transform: scaleY(.35)
    }
}

.quote-strip {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(100deg, #f09a5510, #d045bc15, #9968e817);
    padding: 25px 24px;
    gap: 36px
}

.quote-strip p {
    font-size: 22px;
    line-height: 1.9;
    text-align: center;
    color: #ece1ef
}

.section {
    padding: 70px 0
}

.section-top {
    gap: 24px;
    margin-bottom: 32px
}

.section h2,
.page-heading {
    font-size: 38px;
    font-weight: 500;
    line-height: 1.7
}

.section-top>p {
    font-size: 17px;
    color: var(--muted)
}

.cards {
    gap: 24px
}

.card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid #ffffff20;
    border-radius: 22px;
    background: linear-gradient(140deg, #32213c, #1c1827);
    box-shadow: 0 10px 35px #0002;
    transition: transform .25s, border-color .25s, box-shadow .25s
}

.card:nth-child(2) {
    background: linear-gradient(140deg, #34223a, #1c1827)
}

.card:nth-child(3) {
    background: linear-gradient(140deg, #282442, #1c1827)
}

.card:before {
    content: '';
    position: absolute;
    left: 30px;
    right: 30px;
    top: 0;
    height: 2px;
    background: var(--gradient);
    opacity: .7
}

.card:hover {
    transform: translateY(-7px);
    border-color: #e08dcc90;
    box-shadow: 0 20px 40px #0004
}

.icon {
    font-size: 32px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: #ffad5910;
    border: 1px solid #ffbc6633;
    border-radius: 17px
}

.number {
    font-size: 12px;
    letter-spacing: 1px;
    color: #c6b5cd
}

.card h3 {
    font-size: 30px;
    margin: 28px 0 10px
}

.card p {
    font-size: 18px;
    line-height: 1.95;
    margin-bottom: 28px
}

.card .text-link {
    font-size: 16px
}

.book-banner {
    grid-template-columns: 210px 1fr auto;
    gap: 38px;
    padding: 46px;
    border: 1px solid #be8fc340;
    border-radius: 25px;
    background: radial-gradient(ellipse at 10% 50%, #b85a6930, transparent 48%), linear-gradient(115deg, #302037, #211b32)
}

.mini-book {
    width: 168px;
    height: 245px;
    padding: 26px 18px;
    background: linear-gradient(145deg, #562438, #211a37);
    border-left: 6px solid #8f4560;
    box-shadow: 8px 9px 0 #785d71, 16px 20px 25px #0004;
    color: #ffecd3;
    transition: transform .3s
}

.book-banner:hover .mini-book {
    transform: rotate(-3deg) translateY(-4px)
}

.mini-book .book-title {
    font-size: 26px;
    line-height: 1.7
}

.mini-book small {
    font-size: 11px;
    letter-spacing: .7px
}

.mini-book .book-author {
    font-size: 14px
}

.book-banner h2 {
    font-size: 34px;
    line-height: 1.7;
    margin: 16px 0
}

.book-banner p {
    font-size: 18px;
    color: var(--muted)
}

.pill {
    font-size: 13px;
    padding: 7px 14px;
    letter-spacing: .8px;
    color: #ffca8b;
    border-color: #e3ae644d;
    background: #ffb4570b
}

.closing {
    padding: 65px 0
}

.closing p {
    font-size: 30px;
    line-height: 1.9;
    margin-bottom: 20px
}

.closing span {
    font-size: 17px;
    color: inherit
}

.site-footer {
    padding: 30px 0;
    gap: 30px
}

.site-footer .brand-logo {
    width: 120px;
    height: 85px
}

.footer-note,
.footer-links {
    font-size: 15px
}

.footer-links {
    gap: 25px
}

.footer-links a:hover {
    color: var(--orange)
}

.page-intro {
    max-width: 900px;
    padding: 56px 0 34px
}

.page-intro h1 {
    font-size: 52px;
    line-height: 1.65;
    margin: 18px 0
}

.page-intro p,
.prose p {
    font-size: 20px;
    line-height: 2;
    color: #d4cddd
}

.page-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 55px;
    padding-bottom: 75px
}

.prose p {
    margin: 0 0 24px
}

.prose {
    min-width: 0
}

.form-panel {
    padding: 34px;
    border: 1px solid #c590c747;
    border-radius: 24px;
    background: linear-gradient(140deg, #302238, #201b2c);
    box-shadow: 0 20px 60px #0002
}

.form-panel h2 {
    font-size: 28px;
    line-height: 1.7;
    margin-bottom: 26px
}

.field {
    margin-bottom: 24px
}

.field label {
    font-size: 17px;
    margin-bottom: 10px;
    line-height: 1.8
}

.field label span {
    font-size: 14px;
    color: #cbc0d3
}

.field input,
.field textarea,
.field select {
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink);
    background: #171320;
    border: 1px solid #a68aac66;
    border-radius: 10px;
    padding: 13px 14px;
    min-height: 52px
}

.field input::placeholder,
.field textarea::placeholder {
    color: #b7a9c2;
    opacity: 1
}

.field :is(input, textarea, select):focus {
    border-color: #f797c6;
    box-shadow: 0 0 0 3px #ee67bb20
}

.field textarea {
    min-height: 210px
}

.field-row {
    gap: 18px
}

.check {
    font-size: 17px;
    gap: 12px;
    line-height: 1.9
}

.check input {
    accent-color: #e85db6;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 5px
}

.form-note,
.status {
    font-size: 16px;
    line-height: 1.9
}

.status:empty {
    margin: 0
}

.status.error {
    color: #ffb3ac
}

.status.success {
    color: #9de5bb
}

.contact-box {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff04;
    margin-top: 30px
}

.contact-box a {
    font-size: 17px;
    line-height: 1.8;
    margin: 15px 0
}

.contact-box small {
    font-size: 16px;
    line-height: 1.9;
    display: block
}

.large-book {
    min-height: 510px;
    background: radial-gradient(ellipse, #9b4f6d40, #302239 60%, #201a30);
    border-radius: 24px;
    border: 1px solid #c590c747
}

.large-book .mini-book {
    width: 255px;
    height: 355px
}

.large-book .book-title {
    font-size: 38px
}

.large-book small {
    font-size: 13px
}

.large-book .book-author {
    font-size: 17px
}

.release {
    font-size: 16px;
    letter-spacing: 1px
}

.hint,
.prose p.hint {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.9
}

.tabs {
    gap: 14px
}

.tab {
    font-size: 18px;
    padding: 12px 26px;
    min-height: 52px;
    border-color: #a68aac66;
    color: var(--muted);
    transition: background .2s, color .2s
}

.tab:hover {
    background: #ffffff0a
}

.tab[aria-selected=true] {
    background: var(--gradient);
    color: #251027;
    border-color: transparent;
    font-weight: 600
}

.empty-state {
    padding: 52px 30px;
    border: 1px solid #b178b851;
    border-radius: 24px;
    background: radial-gradient(ellipse at 50% 0, #68365760, transparent 65%), #211b2e
}

.empty-state h2 {
    font-size: 32px;
    line-height: 1.8
}

.empty-state p {
    font-size: 19px
}

.platforms {
    gap: 15px;
    margin-top: 28px
}

.platforms span {
    font-size: 16px;
    padding: 10px 22px;
    background: #ffffff05
}

.blog-entry {
    border-radius: 20px;
    background: var(--panel)
}

.blog-entry h2 {
    font-size: 28px
}

.blog-entry p {
    font-size: 20px;
    color: #d4cddd
}

.skip {
    background: #ffe5bf;
    color: #21102a
}

.reading-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    font-size: 15px;
    color: var(--muted)
}

.reading-tools button {
    border: 1px solid #c59bd06b;
    background: #ffffff05;
    color: var(--ink);
    border-radius: 10px;
    min-height: 44px;
    padding: 7px 15px;
    font-size: 17px
}

.reading-tools button[aria-pressed=true] {
    background: #f2b8df;
    color: #26152e
}

.reading-large .prose p,
.reading-large .page-intro p,
.reading-large .blog-entry p {
    font-size: 24px;
    line-height: 2.1
}

.character-count {
    text-align: right;
    color: var(--muted);
    font-size: 14px;
    margin: 6px 0 0
}

.back-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient);
    border: 0;
    color: #241329;
    font-size: 23px;
    box-shadow: 0 5px 22px #0006;
    z-index: 15
}

.back-top[hidden] {
    display: none
}

@media(min-width:1450px) {
    .shell {
        max-width: 1460px
    }

    .hero h1 {
        font-size: 80px
    }

    .image-frame img {
        height: 410px
    }
}

@media(max-width:1200px) {
    .shell {
        padding: 0 36px
    }

    .nav {
        gap: 16px;
        font-size: 15px
    }

    .brand-logo {
        width: 128px;
        height: 94px
    }

    .hero {
        gap: 36px
    }

    .hero h1 {
        font-size: 62px
    }

    .hero p {
        font-size: 20px
    }

    .book-banner {
        grid-template-columns: 175px 1fr;
        gap: 28px
    }

    .book-banner>.btn {
        grid-column: 2;
        width: max-content
    }

    .cards {
        gap: 18px
    }

    .card {
        padding: 24px
    }

    .card h3 {
        font-size: 27px
    }

    .number {
        font-size: 11px
    }

    .page-grid {
        gap: 32px
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0
    }
}

@media(max-width:980px) {
    .site-header {
        height: 110px
    }

    .menu-toggle {
        display: block
    }

    .nav {
        display: none;
        position: absolute;
        top: 109px;
        left: 0;
        right: 0;
        background: #21192f;
        border: 1px solid #c99acf40;
        border-radius: 0 0 18px 18px;
        padding: 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        box-shadow: 0 20px 40px #0005;
        font-size: 18px
    }

    .nav.open {
        display: flex
    }

    .nav a.active:after {
        display: none
    }

    .nav .appointment-link {
        text-align: center;
        margin-top: 8px
    }

    .hero {
        gap: 30px
    }

    .hero h1 {
        font-size: 53px
    }

    .image-frame img {
        height: 320px
    }

    .on-air {
        font-size: 10px;
        left: 15px;
        padding: 8px 10px
    }

    .art-caption {
        font-size: 14px;
        padding: 18px
    }

    .art-caption strong {
        font-size: 23px
    }

    .floating-note {
        font-size: 16px
    }

    .cards {
        grid-template-columns: 1fr
    }

    .card {
        padding: 28px
    }

    .card h3 {
        font-size: 30px
    }

    .card p {
        font-size: 19px
    }

    .number {
        font-size: 13px
    }

    .section-top {
        align-items: start
    }

    .section h2 {
        font-size: 32px
    }

    .section-top>p {
        max-width: 220px
    }

    .page-grid {
        grid-template-columns: 1fr
    }

    .form-panel {
        max-width: 760px;
        width: 100%
    }

    .field-row {
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }

    .large-book {
        max-width: 650px;
        margin: auto
    }

    .book-grid .prose {
        order: 2
    }

    .footer-note {
        max-width: 260px
    }
}

@media(max-width:760px) {
    html {
        scroll-padding-top: 24px
    }

    .shell {
        padding: 0 22px
    }

    .site-header {
        height: 104px
    }

    .brand-logo {
        width: 122px;
        height: 88px
    }

    .nav {
        top: 103px
    }

    .hero {
        grid-template-columns: 1fr;
        padding: 38px 0 50px;
        gap: 38px
    }

    .hero h1 {
        font-size: clamp(48px, 10vw, 68px);
        line-height: 1.6;
        letter-spacing: 0;
        margin: 20px 0 12px
    }

    .hero p {
        font-size: 20px
    }

    .hero-note {
        font-size: 16px !important
    }

    .eyebrow {
        font-size: 12px;
        letter-spacing: 1px
    }

    .hero-art {
        max-width: 520px;
        width: calc(100% - 10px)
    }

    .hero-art:before {
        inset: -10px
    }

    .image-frame img {
        height: auto;
        min-height: 240px;
        aspect-ratio: 1.45;
        object-fit: cover
    }

    .on-air {
        font-size: 10px;
        top: 25px;
        left: 20px
    }

    .art-caption {
        font-size: 15px;
        padding: 20px
    }

    .floating-note {
        font-size: 17px;
        right: -5px
    }

    .quote-strip {
        gap: 16px;
        padding: 22px 15px
    }

    .quote-strip p {
        font-size: 19px
    }

    .quote-strip .wave {
        min-width: 30px;
        gap: 3px
    }

    .quote-strip .wave:last-child {
        display: none
    }

    .section {
        padding: 48px 0
    }

    .section-top {
        display: block
    }

    .section-top>p {
        max-width: none;
        font-size: 17px
    }

    .section h2 {
        font-size: 30px
    }

    .card {
        padding: 26px
    }

    .card p {
        font-size: 18px
    }

    .book-banner {
        grid-template-columns: 1fr;
        padding: 32px 25px;
        gap: 27px;
        text-align: center
    }

    .book-banner .mini-book {
        margin: 0 auto;
        width: 180px;
        height: 255px
    }

    .book-banner .mini-book .book-title {
        font-size: 28px
    }

    .book-banner .mini-book small {
        font-size: 12px
    }

    .book-banner .mini-book .book-author {
        font-size: 15px
    }

    .book-banner>.btn {
        grid-column: auto;
        width: 100%
    }

    .book-banner h2 {
        font-size: 30px
    }

    .book-banner p {
        font-size: 18px
    }

    .closing {
        padding: 48px 0
    }

    .closing p {
        font-size: 25px
    }

    .site-footer {
        flex-wrap: wrap;
        gap: 20px
    }

    .site-footer .brand-logo {
        width: 110px;
        height: 78px
    }

    .footer-links {
        font-size: 15px;
        flex-wrap: wrap;
        gap: 15px
    }

    .footer-note {
        max-width: none;
        width: 100%;
        font-size: 15px;
        order: 3
    }

    .page-intro {
        padding: 36px 0 25px
    }

    .page-intro h1 {
        font-size: 38px;
        overflow-wrap: anywhere
    }

    .page-intro p,
    .prose p {
        font-size: 19px;
        line-height: 2
    }

    .page-grid {
        gap: 28px;
        padding-bottom: 50px
    }

    .form-panel {
        padding: 24px 20px;
        border-radius: 20px
    }

    .form-panel h2 {
        font-size: 26px
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0
    }

    .field input,
    .field textarea,
    .field select {
        font-size: 17px
    }

    .contact-box {
        padding: 22px 18px
    }

    .contact-box a {
        font-size: 16px
    }

    .large-book {
        min-height: 465px
    }

    .large-book .mini-book {
        width: 225px;
        height: 330px
    }

    .large-book .book-title {
        font-size: 34px
    }

    .large-book small {
        font-size: 12px
    }

    .large-book .book-author {
        font-size: 16px
    }

    .empty-state {
        padding: 35px 20px
    }

    .empty-state h2 {
        font-size: 27px
    }

    .empty-state p {
        font-size: 18px
    }

    .platforms span {
        font-size: 15px;
        padding: 8px 15px
    }

    .reading-tools {
        padding-top: 20px;
        font-size: 14px
    }

    .reading-large .prose p,
    .reading-large .page-intro p,
    .reading-large .blog-entry p {
        font-size: 22px
    }

    .back-top {
        right: 15px;
        bottom: 15px
    }

    .book-banner[style] {
        grid-template-columns: 1fr !important
    }

    .book-banner .eyebrow {
        justify-content: center
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important
    }
}

/* Full hero atmosphere; decorations never capture clicks or obscure content. */
.hero {
    position: relative;
    isolation: isolate;
    --glow-x: 65%;
    --glow-y: 40%
}

.hero-backdrop {
    position: absolute;
    inset: 14px -24px 25px;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    border-radius: 30px;
    background: linear-gradient(125deg, #1a1126 0%, #171221 42%, #28152e 100%);
    border: 1px solid #d09be416
}

.hero-backdrop:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #12101c55, transparent 70%);
    pointer-events: none
}

.hero-aurora {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 42% 52% at var(--glow-x) var(--glow-y), #c842a32b, transparent 100%), radial-gradient(ellipse at 95% 15%, #7a43c52d, transparent 60%), radial-gradient(ellipse at 5% 95%, #d6864220, transparent 55%)
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#deb8ed32 .8px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(120deg, transparent 15%, #000 70%);
    opacity: .5
}

.hero-orbits {
    position: absolute;
    width: 780px;
    height: 780px;
    right: -200px;
    top: -100px;
    border: 1px solid #d083d61c;
    border-radius: 50%;
    animation: radio-drift 22s ease-in-out infinite alternate
}

.hero-orbits i {
    position: absolute;
    border: 1px solid #d083d61c;
    border-radius: 50%;
    inset: 60px
}

.hero-orbits i:nth-child(2) {
    inset: 120px
}

.hero-orbits i:nth-child(3) {
    inset: 180px
}

.hero-orbits:before,
.hero-orbits:after {
    content: '';
    position: absolute;
    left: 16%;
    top: 13%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffaf69;
    box-shadow: 0 0 20px #ffb65b70
}

.hero-orbits:after {
    left: auto;
    top: auto;
    right: 14%;
    bottom: 15%;
    background: #e88bda
}

.hero-signal {
    position: absolute;
    bottom: 1%;
    left: -5%;
    width: 110%;
    height: 220px;
    opacity: .15;
    stroke-width: 1.2;
    animation: signal-drift 14s ease-in-out infinite alternate
}

.hero-art>.on-air {
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    white-space: normal;
    text-align: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .75px;
    padding: 10px 16px;
    background: #26192ff5;
    border: 1px solid #eab3cf85;
    box-shadow: 0 6px 24px #0004;
    z-index: 3
}

@keyframes radio-drift {
    from {
        transform: rotate(-8deg) scale(.97)
    }

    to {
        transform: rotate(12deg) scale(1.03)
    }
}

@keyframes signal-drift {
    from {
        transform: translateY(-8px)
    }

    to {
        transform: translateY(12px)
    }
}

@media(max-width:760px) {
    .hero-backdrop {
        inset: 12px -12px 20px;
        border-radius: 22px
    }

    .hero-orbits {
        width: 580px;
        height: 580px;
        right: -300px;
        top: 38%
    }

    .hero-signal {
        height: 180px;
        bottom: 35%;
        opacity: .12
    }

    .hero-art>.on-air {
        top: 23px;
        font-size: 11px;
        padding: 9px 13px;
        max-width: calc(100% - 16px)
    }

    .hero-aurora {
        background: radial-gradient(ellipse at 95% 60%, #b83b982a, transparent 65%), radial-gradient(ellipse at 5% 10%, #a163cf1f, transparent 60%)
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-orbits,
    .hero-signal {
        animation: none
    }
}

/* Shared edge-to-edge background for the home header and hero. */
.nav .appointment-link.active:after {
    content: none
}

body.has-masthead {
    position: relative;
    isolation: isolate
}

.has-masthead>.hero-backdrop {
    inset: 0 0 auto;
    z-index: -1;
    width: auto;
    border: 0;
    border-bottom: 1px solid #d09be421;
    border-radius: 0;
    --glow-x: 65%;
    --glow-y: 40%
}

.has-masthead .site-header {
    background: transparent
}

.has-masthead>.hero-backdrop .hero-orbits {
    right: -60px;
    top: -130px;
    width: 1000px;
    height: 1000px
}

.has-masthead>.hero-backdrop .hero-signal {
    bottom: 0;
    height: 260px
}

@media(max-width:760px) {
    .has-masthead>.hero-backdrop .hero-orbits {
        width: 640px;
        height: 640px;
        right: -330px;
        top: 25%
    }

    .has-masthead>.hero-backdrop .hero-signal {
        height: 180px;
        bottom: 25%
    }
}

/* Editorial Hindi typography for the hero introduction. */
.hero-copy {
    position: relative;
    min-width: 0;
    padding: 4px 0 8px
}

.hero-kicker {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid #efb9d426;
    border-radius: 30px;
    background: #f1b5d608;
    color: #f0c6e0;
    letter-spacing: 1.5px;
    font-size: 12px
}

.kicker-divider {
    color: #c28aa9;
    margin: 0 2px
}

.hero .hero-title {
    font-size: clamp(58px, 5.8vw, 84px);
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -1.4px;
    margin: 30px 0 36px;
    padding-top: 5px
}

.hero .hero-title-accent {
    position: relative;
    display: inline-block;
    padding: 0 8px 12px 0;
    background-size: 180% 100%;
    background-position: 0 50%;
    transition: background-position 1s ease;
    text-shadow: none
}

.hero-copy:hover .hero-title-accent {
    background-position: 100% 50%
}

.title-flourish {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 22px;
    color: #f6a4c3;
    overflow: visible;
    stroke-dasharray: 320;
    stroke-dashoffset: 0;
    animation: flourish-in 1.3s ease-out both
}

.hero-introduction {
    padding-left: 21px;
    border-left: 2px solid #e790ba78;
    max-width: 540px
}

.hero .hero-lead {
    font-family: var(--serif);
    font-size: 25px;
    line-height: 1.9;
    color: #e5dceb;
    margin: 0 0 14px;
    letter-spacing: 0;
    font-weight: 400
}

.hero-lead strong {
    font-weight: 600;
    color: #ffe0bb
}

.hero .hero-description {
    font-size: 18px;
    line-height: 1.95;
    color: #cfc4db;
    margin: 0;
    max-width: 510px;
    text-wrap: pretty
}

.hero-copy>.actions {
    margin-top: 31px
}

.hero-copy>.hero-note {
    font-size: 15px !important;
    line-height: 1.85;
    margin-top: 25px;
    max-width: 500px
}

.hero-copy>.hero-kicker,
.hero-copy>.hero-title,
.hero-copy>.hero-introduction {
    animation: copy-in .65s ease-out both
}

.hero-copy>.hero-title {
    animation-delay: .08s
}

.hero-copy>.hero-introduction {
    animation-delay: .16s
}

@keyframes copy-in {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes flourish-in {
    from {
        stroke-dashoffset: 320
    }

    to {
        stroke-dashoffset: 0
    }
}

@media(max-width:1200px) {
    .hero .hero-title {
        font-size: 64px
    }

    .hero .hero-lead {
        font-size: 23px
    }

    .hero .hero-description {
        font-size: 18px
    }

    .hero-kicker {
        letter-spacing: 1px;
        font-size: 11px
    }
}

@media(max-width:980px) {
    .hero .hero-title {
        font-size: 56px;
        letter-spacing: -.6px
    }

    .hero .hero-lead {
        font-size: 22px
    }

    .hero-introduction {
        padding-left: 16px
    }

    .hero .hero-description br {
        display: none
    }
}

@media(max-width:760px) {
    .hero-copy {
        padding-top: 0
    }

    .hero-kicker {
        font-size: 11px;
        gap: 7px;
        letter-spacing: .8px;
        padding: 8px 11px
    }

    .hero .hero-title {
        font-size: clamp(52px, 11vw, 70px);
        line-height: 1.5;
        margin: 24px 0 29px;
        letter-spacing: 0
    }

    .hero .hero-title-accent {
        padding-bottom: 13px
    }

    .hero .hero-lead {
        font-size: 23px;
        line-height: 1.9;
        margin-bottom: 12px
    }

    .hero .hero-description {
        font-size: 18px;
        line-height: 1.95
    }

    .hero-introduction {
        padding-left: 16px
    }

    .hero-copy>.hero-note {
        font-size: 15px !important
    }

    .hero-copy>.actions {
        margin-top: 27px
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-copy>.hero-kicker,
    .hero-copy>.hero-title,
    .hero-copy>.hero-introduction,
    .title-flourish {
        animation: none
    }

    .hero .hero-title-accent {
        transition: none
    }
}

/* A handwritten signature, paired with an understated editorial first line. */
.hero .hero-title {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 28px 0 34px;
    padding: 0;
    line-height: 1.35;
    letter-spacing: 0
}

.hero .hero-title .title-opening {
    display: block;
    width: fit-content;
    font-family: var(--serif);
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.6;
    font-weight: 500;
    color: #f8eaf5;
    background: none;
    -webkit-text-fill-color: currentColor;
    letter-spacing: -.7px
}

.hero .hero-title .title-finale {
    display: flex;
    align-items: center;
    position: relative;
    gap: 18px;
    padding: 0 2px 15px 0;
    background: none;
    color: #f38ac9;
    -webkit-text-fill-color: currentColor
}

.hero .hero-title .hero-title-accent {
    font-family: 'Kalam', 'Noto Sans Devanagari', sans-serif;
    font-size: clamp(78px, 7.7vw, 112px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -2px;
    white-space: nowrap;
    display: block;
    padding: 0 5px 0 0;
    transform: rotate(-3deg);
    background: linear-gradient(110deg, #ffd078 3%, #ff997d 34%, #ff75bd 67%, #c989ff);
    background-size: 170% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 18px #ef68b31a)
}

.hero-copy:hover .hero-title .hero-title-accent {
    background-position: 100% 50%
}

.title-heart {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    color: #e695ce;
    transform: rotate(9deg);
    margin-top: 8px;
    transition: transform .35s ease
}

.hero-copy:hover .title-heart {
    transform: rotate(0deg) scale(1.07)
}

.title-finale .title-flourish {
    width: calc(100% - 48px);
    height: 25px;
    bottom: 0;
    left: 3px;
    color: #ec94c7
}

@media(max-width:1200px) {
    .hero .hero-title .title-opening {
        font-size: 46px
    }

    .hero .hero-title .hero-title-accent {
        font-size: 90px
    }

    .title-heart {
        width: 66px;
        height: 66px;
        flex-basis: 66px
    }

    .hero .hero-title .title-finale {
        gap: 12px
    }
}

@media(max-width:980px) {
    .hero .hero-title .title-opening {
        font-size: 40px
    }

    .hero .hero-title .hero-title-accent {
        font-size: 76px
    }

    .title-heart {
        width: 52px;
        height: 52px;
        flex-basis: 52px
    }

    .hero .hero-title .title-finale {
        gap: 8px
    }
}

@media(max-width:760px) {
    .hero .hero-title {
        margin: 24px 0 29px
    }

    .hero .hero-title .title-opening {
        font-size: clamp(38px, 9vw, 50px)
    }

    .hero .hero-title .hero-title-accent {
        font-size: clamp(72px, 17vw, 98px);
        letter-spacing: -1px
    }

    .title-heart {
        width: clamp(48px, 12vw, 68px);
        height: clamp(48px, 12vw, 68px);
        flex-basis: clamp(48px, 12vw, 68px)
    }

    .hero .hero-title .title-finale {
        gap: 10px;
        padding-bottom: 17px
    }

    .title-finale .title-flourish {
        width: calc(100% - 20px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .title-heart {
        transition: none
    }

    .hero-copy:hover .title-heart {
        transform: rotate(9deg)
    }
}

/* A breathing space after the hero, followed by a browsable quote strip. */
.quote-strip {
    position: relative;
    margin-top: 44px;
    min-height: 174px;
    padding: 24px 28px;
    gap: 28px;
    display: grid;
    grid-template-columns: 48px 72px minmax(0, 1fr) 72px 48px;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid #c991d343;
    border-radius: 24px;
    background: radial-gradient(ellipse at 50% 0, #a3458530, transparent 75%), linear-gradient(110deg, #282032, #211c32);
    box-shadow: 0 14px 40px #0002;
    transition: border-color .3s, box-shadow .3s
}

.quote-strip:before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f3a5d5, transparent)
}

.quote-strip:hover,
.quote-strip:focus-within {
    border-color: #dd9ccb85;
    box-shadow: 0 15px 45px #a73d8512
}

.quote-content {
    text-align: center;
    min-width: 0
}

.quote-label {
    display: block;
    color: #efb9d7;
    font-size: 13px;
    letter-spacing: .6px;
    margin-bottom: 10px
}

.quote-strip .quote-text {
    font-size: 23px;
    line-height: 1.9;
    margin: 0;
    min-height: 44px;
    text-wrap: balance;
    color: #f2e8f5
}

.quote-arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #dba8d342;
    border-radius: 50%;
    background: #ffffff04;
    color: #f5d6e9;
    font-size: 23px;
    transition: background .2s, transform .2s, border-color .2s
}

.quote-arrow:hover {
    background: #ed95cc1c;
    border-color: #f0b0d8;
    transform: scale(1.06)
}

.quote-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 8px
}

.quote-dots button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 30px;
    border: 0;
    background: none;
    border-radius: 8px;
    padding: 0
}

.quote-dots button span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 10px;
    background: #8c7599;
    transition: width .2s, background .2s
}

.quote-dots button[aria-pressed=true] span {
    width: 22px;
    background: linear-gradient(90deg, #ffb65b, #ed75c9)
}

.quote-strip:hover .wave i,
.quote-strip:focus-within .wave i {
    animation: equalizer .85s ease-in-out 4 alternate
}

@media(max-width:980px) {
    .quote-strip {
        gap: 16px;
        grid-template-columns: 46px 48px minmax(0, 1fr) 48px 46px;
        padding: 24px 20px
    }

    .quote-strip .quote-text {
        font-size: 21px
    }
}

@media(max-width:760px) {
    .quote-strip {
        margin-top: 30px;
        min-height: 190px;
        padding: 24px 12px 17px;
        gap: 8px;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        border-radius: 20px
    }

    .quote-strip>.wave {
        display: none
    }

    .quote-content {
        grid-column: 2;
        grid-row: 1
    }

    .quote-prev {
        grid-column: 1;
        grid-row: 1
    }

    .quote-next {
        grid-column: 3;
        grid-row: 1
    }

    .quote-arrow {
        width: 42px;
        height: 44px;
        font-size: 21px
    }

    .quote-strip .quote-text {
        font-size: 19px;
        min-height: 73px;
        line-height: 1.9
    }

    .quote-label {
        font-size: 12px;
        margin-bottom: 9px
    }

    .quote-dots button {
        width: 36px;
        height: 32px
    }
}

@media(prefers-reduced-motion:reduce) {
    .quote-strip .wave i {
        animation: none !important
    }

    .quote-arrow,
    .quote-dots button span,
    .quote-strip {
        transition: none
    }
}

.quote-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    margin-bottom: 15px;
    border: 1px solid #f2a6cd70;
    border-radius: 999px;
    background: linear-gradient(110deg, #ffb65b20, #ee79c92a);
    color: #ffe0b8;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0;
    box-shadow: 0 3px 16px #ed75c910
}

@media(max-width:760px) {
    .quote-label {
        font-size: 16px;
        padding: 7px 12px;
        margin-bottom: 13px
    }
}

/* Raised radio-console keys for the three story cards. */
.cards .card .text-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 54px;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: 7px;
    padding: 12px 18px;
    border: 1px solid #d5a4d18c;
    border-bottom-color: #775276;
    border-radius: 12px;
    background: linear-gradient(180deg, #58415e 0%, #3d2b46 48%, #302238 100%);
    color: #fff2e3;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    text-decoration: none;
    text-shadow: 0 1px 2px #0009;
    box-shadow: inset 0 1px 0 #ffe4fb66, inset 0 -2px 0 #140d2280, 0 6px 0 #140d20, 0 7px 0 1px #89618570, 0 12px 18px #0005;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease
}

.cards .card .text-link:before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #ffc36b;
    box-shadow: 0 0 0 3px #211329, 0 0 10px #ffa6508c
}

.cards .card .text-link>span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border-radius: 50%;
    border: 1px solid #dbacdc40;
    background: linear-gradient(#291d32, #493250);
    box-shadow: inset 0 2px 3px #0007, 0 1px 0 #ffffff16;
    color: #ffca88;
    font-size: 18px;
    transform: none
}

.cards .card:hover .text-link,
.cards .card:focus-visible .text-link {
    background: linear-gradient(180deg, #72516f, #4d3250 48%, #3a2741);
    border-color: #efb6d6;
    box-shadow: inset 0 1px 0 #ffe4fb88, inset 0 -2px 0 #140d2280, 0 6px 0 #140d20, 0 7px 0 1px #c486b890, 0 12px 22px #0005, 0 0 20px #f48cb51a;
    color: #fff2e3
}

.cards .card:active .text-link {
    transform: translateY(5px);
    box-shadow: inset 0 2px 5px #120b2266, 0 1px 0 #140d20, 0 2px 0 1px #89618570, 0 4px 8px #0004
}

.cards .card:hover .text-link>span {
    transform: none
}

@media(max-width:760px) {
    .cards .card .text-link {
        font-size: 16px;
        padding: 12px 15px;
        gap: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .cards .card .text-link {
        transition: none
    }
}

/* Logo-inspired illuminated faces, with a deep plum mechanical base. */
.cards .card .text-link {
    background: linear-gradient(110deg, #ffc467 0%, #ff9b80 32%, #f882cb 67%, #c294ff 100%);
    border-color: #ffcbdf;
    border-bottom-color: #c462a5;
    color: #27112f;
    text-shadow: 0 1px 0 #ffffff35;
    box-shadow: inset 0 2px 0 #fff4d780, inset 0 -2px 0 #a5449240, 0 6px 0 #602552, 0 7px 0 1px #cf7bc578, 0 12px 22px #0005, 0 0 22px #ef60b51a
}

.cards .card .text-link:before {
    background: #ffdf8e;
    box-shadow: 0 0 0 3px #572448, 0 0 10px #fff0a2aa
}

.cards .card .text-link>span {
    background: linear-gradient(#532441, #361b46);
    border-color: #70265555;
    color: #ffe0a2;
    box-shadow: inset 0 2px 3px #0005, 0 1px 0 #ffffff60
}

.cards .card:hover .text-link,
.cards .card:focus-visible .text-link {
    background: linear-gradient(110deg, #ffd387 0%, #ffad97 32%, #ff98d8 67%, #d3acff 100%);
    border-color: #ffe3ef;
    color: #27112f;
    box-shadow: inset 0 2px 0 #fff4d7aa, inset 0 -2px 0 #a5449240, 0 6px 0 #602552, 0 7px 0 1px #ec99dd90, 0 12px 24px #0005, 0 0 28px #ef60b535
}

.cards .card:active .text-link {
    box-shadow: inset 0 2px 5px #6d24523d, 0 1px 0 #602552, 0 2px 0 1px #cf7bc578, 0 4px 8px #0004
}

/* Book launch poster: a dimensional cover on a luminous illustrated stage. */
.book-banner.book-promo {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(270px, .85fr) minmax(0, 1.25fr);
    gap: 50px;
    padding: 48px 56px 44px 38px;
    min-height: 480px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #d695c253;
    background: radial-gradient(ellipse at 15% 55%, #bb567433, transparent 49%), radial-gradient(ellipse at 95% 0, #74389536, transparent 58%), linear-gradient(115deg, #302035, #21192f 70%);
    box-shadow: 0 24px 60px #0003
}

.book-promo:before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid #dfabcb12;
    border-radius: 19px;
    pointer-events: none;
    z-index: -1
}

.book-promo:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f6bf79, #e578be, #a685e3, transparent)
}

.book-promo-art {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0 0;
    isolation: isolate;
    align-self: stretch
}

.book-art-label {
    font-size: 11px;
    letter-spacing: 2.4px;
    color: #e5c0d4;
    margin-bottom: 27px;
    text-align: center
}

.book-orbit {
    position: absolute;
    inset: 12% -8% 7%;
    border: 1px solid #f2b69224;
    border-radius: 50%;
    transform: rotate(-28deg);
    z-index: -1;
    background: radial-gradient(ellipse, #faaf6a18, transparent 68%)
}

.book-orbit:before,
.book-orbit:after {
    content: '';
    position: absolute;
    border: 1px solid #e7acda20;
    border-radius: 50%;
    inset: 25px -20px;
    transform: rotate(50deg)
}

.book-orbit:after {
    inset: 55px -35px;
    transform: rotate(90deg);
    border-color: #e7acda13
}

.book-display {
    position: relative;
    perspective: 900px;
    z-index: 1;
    padding-bottom: 10px
}

.book-promo .mini-book {
    width: 200px;
    height: 292px;
    margin: 0;
    padding: 30px 23px;
    border-left: 7px solid #b46885;
    background: radial-gradient(ellipse at 10% 0, #7e3a5b, transparent 75%), linear-gradient(135deg, #512641, #251d38);
    transform: rotate(-9deg) rotateY(-13deg);
    box-shadow: 2px 0 0 #ce98ad, 9px 7px 0 #ad8b9c, 12px 9px 0 #483348, 25px 23px 32px #100b1e80;
    transition: transform .5s ease, box-shadow .5s ease
}

.book-promo:hover .mini-book {
    transform: rotate(-5deg) rotateY(-4deg) translateY(-5px);
    box-shadow: 2px 0 0 #ce98ad, 9px 7px 0 #ad8b9c, 12px 9px 0 #483348, 28px 28px 38px #100b1e80
}

.book-promo .mini-book .book-title {
    font-size: 30px;
    line-height: 1.7
}

.book-promo .mini-book small {
    font-size: 11px
}

.book-promo .mini-book .book-author {
    font-size: 15px
}

.book-pedestal {
    height: 27px;
    width: 260px;
    max-width: 100%;
    border-radius: 50%;
    margin-top: 9px;
    background: radial-gradient(ellipse, #160e24 15%, #ad749b38 60%, transparent 72%);
    border-top: 1px solid #e9b1cf30
}

.book-art-footnote {
    font-family: var(--serif);
    font-size: 15px;
    color: #cbaebf;
    margin-top: 12px
}

.book-promo-copy {
    position: relative;
    min-width: 0;
    padding: 12px 0;
    z-index: 1
}

.promo-topline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.book-promo .pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    letter-spacing: 1px;
    color: #ffdaaa;
    background: #ffbb5810;
    border-color: #f8b96357;
    padding: 8px 12px
}

.promo-edition {
    font-size: 14px;
    color: #cbb6d3
}

.book-promo h2 {
    position: relative;
    font-family: var(--serif);
    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -.6px;
    margin: 24px 0 17px;
    width: fit-content;
    color: #fff0f4
}

.book-promo h2>span {
    font-family: 'Kalam', var(--serif);
    font-size: 1.2em;
    background: linear-gradient(100deg, #ffd092, #ff98b1 60%, #d29ef1);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.promo-spark {
    width: 37px;
    height: 37px;
    color: #f0b97b;
    margin-left: 26px;
    vertical-align: middle;
    transform: rotate(10deg)
}

.book-promo .promo-lead {
    font-size: 21px;
    color: #f5d7e6;
    font-weight: 500;
    margin: 0 0 8px
}

.book-promo .promo-description {
    font-size: 18px;
    line-height: 1.9;
    color: #cbbdd3;
    margin: 0 0 26px
}

.promo-bottom {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.book-promo .promo-button {
    font-size: 16px;
    min-height: 52px;
    border-radius: 12px;
    padding: 13px 20px;
    box-shadow: inset 0 1px 0 #fff7, 0 4px 0 #702d61, 0 9px 22px #0003
}

.book-promo .promo-button:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 #fff7, 0 1px 0 #702d61
}

.promo-note {
    font-size: 13px;
    color: #c4adc8
}

.promo-watermark {
    position: absolute;
    right: 20px;
    top: 6px;
    font-family: Georgia, serif;
    font-size: 240px;
    line-height: 1;
    color: #f2b4dd06;
    pointer-events: none;
    z-index: -1
}

@media(max-width:1100px) {
    .book-banner.book-promo {
        padding: 36px 32px;
        gap: 32px;
        grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr)
    }

    .book-promo .mini-book {
        width: 185px;
        height: 277px
    }

    .book-promo h2 {
        font-size: 39px
    }

    .promo-topline {
        gap: 10px
    }

    .promo-edition {
        font-size: 13px
    }
}

@media(max-width:760px) {
    .book-banner.book-promo {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 32px 24px;
        text-align: center;
        border-radius: 24px
    }

    .book-promo-art {
        width: 100%;
        max-width: 340px;
        margin: auto;
        padding: 0
    }

    .book-art-label {
        margin-bottom: 24px
    }

    .book-promo .mini-book {
        width: 185px;
        height: 270px;
        margin: 0;
        padding: 27px 20px
    }

    .book-promo .mini-book .book-title {
        font-size: 28px
    }

    .book-promo .mini-book small {
        font-size: 11px
    }

    .book-orbit {
        inset: 12% 0 5%
    }

    .book-promo-copy {
        padding: 0
    }

    .promo-topline,
    .promo-bottom {
        justify-content: center
    }

    .book-promo h2 {
        font-size: 37px;
        margin: 22px auto 16px
    }

    .book-promo .promo-lead {
        font-size: 20px
    }

    .book-promo .promo-description {
        font-size: 18px
    }

    .book-promo .promo-description br {
        display: none
    }

    .book-promo .promo-button {
        width: 100%
    }

    .promo-bottom {
        gap: 17px
    }

    .promo-spark {
        width: 29px;
        height: 29px;
        margin-left: 17px
    }

    .promo-watermark {
        font-size: 160px
    }

    .promo-edition {
        width: 100%;
        font-size: 14px
    }
}

@media(prefers-reduced-motion:reduce) {
    .book-promo .mini-book {
        transition: none
    }

    .book-promo:hover .mini-book {
        transform: rotate(-9deg) rotateY(-13deg)
    }
}


/* The novel's own visual world: petrol teal, copper and a record-sleeve stage. */
.book-banner.book-promo {
    grid-template-columns: minmax(290px, .95fr) minmax(0, 1.2fr);
    gap: 58px;
    padding: 46px 60px 44px 40px;
    min-height: 490px;
    border-radius: 22px;
    border: 1px solid #5e918870;
    background: radial-gradient(ellipse at 18% 40%, #29786a55, transparent 52%), linear-gradient(115deg, #123e3c 0%, #102d30 48%, #0b2028 100%);
    box-shadow: 0 26px 65px #0005, 0 1px 0 #ffffff12 inset;
    color: #fff2dd
}

.book-promo:before {
    inset: 13px;
    border-radius: 12px;
    border-color: #94b8a515;
    background: repeating-linear-gradient(0deg, transparent 0 4px, #cbe7d103 4px 5px);
    z-index: -1
}

.book-promo:after {
    height: 3px;
    background: linear-gradient(90deg, #256d62, #e3a368 35%, #f7d5a7 58%, #378173)
}

.book-promo-art {
    min-height: 385px;
    padding-top: 8px
}

.book-promo .book-orbit {
    display: none
}

.promo-record {
    position: absolute;
    width: 330px;
    height: 330px;
    max-width: 95%;
    aspect-ratio: 1;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-43%, -49%);
    z-index: -1;
    border-radius: 50%;
    border: 1px solid #e7bd8766;
    background: repeating-radial-gradient(circle at center, transparent 0 5px, #eec09015 6px, transparent 7px 10px), conic-gradient(from 35deg, #9c623a, #e3b57b 18%, #9b603a 28%, #edc58c 48%, #b57545 61%, #f0cd9b 78%, #9c623a);
    box-shadow: 0 0 0 12px #afccaa06, 0 0 0 13px #b2d3b317, 0 0 0 28px #afccaa04, 0 0 0 29px #b2d3b30d, 0 22px 50px #0004;
    transition: transform .7s ease
}

.record-center {
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    background: #16413b;
    border: 1px solid #f4d1a470;
    box-shadow: 0 0 0 10px #f8d49915
}

.record-center:after {
    content: '';
    position: absolute;
    inset: 43%;
    border-radius: 50%;
    background: #efc590
}

.book-promo:hover .promo-record {
    transform: translate(-43%, -49%) rotate(14deg)
}

.book-promo .book-art-label {
    color: #c2ddd0;
    font-size: 11px;
    letter-spacing: 2.6px;
    position: relative;
    z-index: 2;
    margin-bottom: 25px;
    padding: 5px 12px;
    background: #10302dcc;
    border: 1px solid #8eaf902b;
    border-radius: 4px
}

.book-promo .mini-book {
    width: 205px;
    height: 292px;
    transform: rotate(-9deg) rotateY(-10deg);
    background: radial-gradient(ellipse at 0 0, #74435c, transparent 80%), linear-gradient(140deg, #48283e, #241f30);
    border-left-color: #a86a83;
    box-shadow: 2px 0 0 #ce98ad, 8px 6px 0 #ac8a93, 11px 8px 0 #3a2935, 20px 24px 25px #021917aa
}

.book-promo:hover .mini-book {
    transform: rotate(-5deg) rotateY(-3deg) translateY(-5px);
    box-shadow: 2px 0 0 #ce98ad, 8px 6px 0 #ac8a93, 11px 8px 0 #3a2935, 23px 28px 30px #021917aa
}

.book-promo .book-pedestal {
    background: radial-gradient(ellipse, #001a1c99, transparent 70%);
    border-top-color: #a0c2a521
}

.book-promo .book-art-footnote {
    color: #c9dcd0;
    font-size: 16px;
    margin-top: 8px
}

.book-promo .pill {
    color: #ffdbab;
    border-color: #d69c5f70;
    background: #d3954612;
    box-shadow: none;
    border-radius: 6px;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 8px 12px
}

.book-promo .pill .dot {
    background: #efbd7e;
    box-shadow: 0 0 12px #efbd7e50
}

.book-promo .promo-edition {
    color: #afc7c1;
    font-size: 14px
}

.book-promo .promo-topline {
    gap: 13px
}

.book-promo h2 {
    color: #fff4e5;
    font-size: 48px;
    line-height: 1.5;
    margin: 23px 0 18px;
    letter-spacing: 0
}

.book-promo h2>span {
    background: linear-gradient(110deg, #ffdca3, #efa575 65%, #eaa18d);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1.25em
}

.book-promo .promo-spark {
    color: #eabc81;
    width: 30px;
    height: 30px
}

.book-promo .promo-lead {
    color: #f0dfc7;
    font-size: 21px;
    margin-bottom: 9px
}

.book-promo .promo-description {
    color: #b9d0c9;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 25px
}

.book-promo .promo-note {
    color: #a9c8bc;
    font-size: 13px
}

.book-promo .promo-button {
    background: linear-gradient(115deg, #ffdda2, #ecb67f);
    color: #29352e;
    border: 1px solid #f2d1a1;
    border-radius: 9px;
    box-shadow: inset 0 1px 0 #fff9, 0 4px 0 #946445, 0 10px 22px #00171966;
    font-size: 17px;
    gap: 24px
}

.book-promo .promo-button:hover {
    background: linear-gradient(115deg, #ffe7bb, #f6c88f);
    box-shadow: inset 0 1px 0 #fff9, 0 4px 0 #946445, 0 12px 25px #00171988;
    transform: translateY(-2px)
}

.book-promo .promo-button:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 0 #fff9, 0 1px 0 #946445
}

.book-promo .promo-watermark {
    color: #aacfb209;
    font-size: 250px;
    top: 0;
    right: 25px
}

@media(max-width:1100px) {
    .book-banner.book-promo {
        padding: 35px 32px;
        gap: 36px;
        grid-template-columns: minmax(235px, .85fr) minmax(0, 1.2fr)
    }

    .book-promo h2 {
        font-size: 40px
    }

    .promo-record {
        width: 290px
    }

    .book-promo .mini-book {
        width: 185px;
        height: 277px
    }
}

@media(max-width:760px) {
    .book-banner.book-promo {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px 24px
    }

    .book-promo-art {
        min-height: 365px;
        width: 100%;
        max-width: 340px
    }

    .promo-record {
        width: 290px;
        max-width: 100%;
        transform: translate(-46%, -48%)
    }

    .book-promo:hover .promo-record {
        transform: translate(-46%, -48%) rotate(14deg)
    }

    .book-promo .mini-book {
        width: 185px;
        height: 270px
    }

    .book-promo h2 {
        font-size: 38px;
        margin: 20px auto 18px
    }

    .book-promo .promo-edition {
        font-size: 14px
    }

    .book-promo .promo-button {
        width: 100%;
        font-size: 16px
    }

    .book-promo .promo-lead {
        font-size: 20px
    }

    .book-promo .promo-description {
        font-size: 18px
    }

    .book-promo .promo-watermark {
        font-size: 180px
    }

    .book-promo .book-art-label {
        font-size: 10px
    }
}

@media(prefers-reduced-motion:reduce) {
    .promo-record {
        transition: none
    }

    .book-promo:hover .promo-record {
        transform: translate(-43%, -49%)
    }

    .book-promo:hover .mini-book {
        transform: rotate(-9deg) rotateY(-10deg)
    }
}

/* A personal invitation to meet the author. */
.closing.appointment-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    text-align: left;
    margin: 50px 0;
    padding: 44px 40px;
    border: 1px solid #c489c74d;
    border-radius: 24px;
    background: radial-gradient(ellipse at 100% 50%, #b6498930, transparent 65%), linear-gradient(120deg, #211b31, #302039);
    box-shadow: 0 15px 45px #0002
}

.appointment-cta:before {
    content: '';
    position: absolute;
    right: -80px;
    top: 50%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid #e7a8d51c;
    box-shadow: 0 0 0 35px #e7a8d505, 0 0 0 36px #e7a8d514, 0 0 0 75px #e7a8d503, 0 0 0 76px #e7a8d50c;
    transform: translateY(-50%);
    z-index: -1;
    pointer-events: none
}

.appointment-cta-icon {
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: linear-gradient(145deg, #654158, #34263e);
    border: 1px solid #f3b8d250;
    box-shadow: inset 0 1px 0 #ffdbf044, 0 7px 0 #1a1426, 0 15px 28px #0004;
    color: #ffc888;
    transform: rotate(-6deg);
    transition: transform .3s ease
}

.appointment-cta-icon svg {
    width: 62px;
    height: 62px
}

.appointment-cta:hover .appointment-cta-icon {
    transform: rotate(0deg) translateY(-3px)
}

.appointment-cta-copy {
    min-width: 0
}

.appointment-cta-copy .eyebrow {
    font-size: 14px;
    letter-spacing: .6px;
    color: #eebcda
}

.appointment-cta-copy h2 {
    font-family: var(--serif);
    font-size: 33px;
    font-weight: 500;
    line-height: 1.65;
    margin: 13px 0 12px;
    color: #fff1f7
}

.closing .appointment-cta-copy h2 span {
    font-size: inherit;
    color: #ffc38c;
    background: linear-gradient(100deg, #ffd18e, #f5a1cc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.closing .appointment-cta-copy p {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.9;
    color: #d0bfd7;
    max-width: 520px;
    margin: 0
}

.appointment-cta-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px
}

.appointment-cta-button {
    border-radius: 13px;
    min-height: 60px;
    font-size: 17px;
    gap: 13px;
    padding: 15px 21px;
    border: 1px solid #ffd1e48c;
    background: linear-gradient(110deg, #ffc477, #ff91b0 55%, #ce95ee);
    box-shadow: inset 0 2px 0 #fff5, 0 5px 0 #70305f, 0 12px 25px #0004;
    color: #2b1732
}

.appointment-cta-button>svg {
    width: 23px;
    height: 23px;
    flex-shrink: 0
}

.closing .appointment-cta-button>span {
    font-size: 22px;
    color: inherit;
    transition: transform .2s
}

.appointment-cta-button:hover {
    background: linear-gradient(110deg, #ffd495, #ffa7c0 55%, #dbaff5);
    box-shadow: inset 0 2px 0 #fff7, 0 5px 0 #70305f, 0 15px 32px #f17db523;
    transform: translateY(-2px)
}

.appointment-cta-button:hover>span {
    transform: translate(2px, -2px)
}

.appointment-cta-button:active {
    transform: translateY(4px);
    box-shadow: inset 0 1px 3px #7c34522a, 0 1px 0 #70305f
}

.closing .appointment-cta-note {
    font-size: 14px;
    line-height: 1.8;
    color: #cfb7d2
}

@media(max-width:1100px) {
    .closing.appointment-cta {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 25px;
        padding: 35px
    }

    .appointment-cta-icon {
        width: 80px;
        height: 80px;
        border-radius: 22px
    }

    .appointment-cta-action {
        grid-column: 2;
        align-items: flex-start
    }

    .appointment-cta-copy h2 {
        font-size: 32px
    }
}

@media(max-width:760px) {
    .closing.appointment-cta {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px 24px;
        text-align: center;
        margin: 35px 0
    }

    .appointment-cta-icon {
        margin: 0 auto;
        width: 74px;
        height: 74px
    }

    .appointment-cta-icon svg {
        width: 50px;
        height: 50px
    }

    .appointment-cta-copy .eyebrow {
        justify-content: center;
        font-size: 14px
    }

    .appointment-cta-copy h2 {
        font-size: 29px
    }

    .closing .appointment-cta-copy p {
        font-size: 17px
    }

    .appointment-cta-action {
        grid-column: 1;
        align-items: center;
        width: 100%
    }

    .appointment-cta-button {
        width: 100%;
        font-size: 16px;
        gap: 11px;
        padding: 14px 15px
    }

    .appointment-cta:before {
        right: -210px;
        top: 65%
    }
}

@media(prefers-reduced-motion:reduce) {

    .appointment-cta-icon,
    .appointment-cta-button>span {
        transition: none
    }

    .appointment-cta:hover .appointment-cta-icon {
        transform: rotate(-6deg)
    }
}

/* The book feature sits openly on the page, without a enclosing card. */
.book-banner.book-promo {
    position: relative;
    isolation: isolate;
    overflow: visible;
    grid-template-columns: minmax(280px, .95fr) minmax(0, 1.2fr);
    gap: 64px;
    margin: 28px 0 35px;
    padding: 54px 26px 54px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none
}

.book-promo:before {
    inset: -12px -16px;
    border: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at 24% 52%, #25897926 0%, #1a625a10 33%, transparent 65%);
    pointer-events: none;
    z-index: -1
}

.book-promo:after {
    display: none
}

.book-promo-art {
    min-height: 405px
}

.book-promo .book-art-label {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0 0 8px;
    color: #a8d9ca;
    font-size: 12px;
    letter-spacing: 2.5px
}

.book-promo .book-art-footnote {
    color: #bacfc9;
    font-size: 17px;
    margin-top: 15px
}

.book-promo .promo-record {
    box-shadow: 0 0 0 12px #afccaa04, 0 0 0 13px #b2d3b314, 0 0 0 28px #afccaa03, 0 0 0 29px #b2d3b30c, 0 24px 50px #0004;
    transition: transform .8s ease, filter .8s ease
}

.book-promo:hover .promo-record {
    filter: brightness(1.08);
    transform: translate(-43%, -49%) rotate(20deg)
}

.book-promo .promo-topline {
    gap: 15px
}

.book-promo .pill {
    border-radius: 999px;
    background: #e8b7730d;
    border-color: #d69c5f55;
    padding: 9px 14px;
    font-size: 12px
}

.book-promo h2 {
    font-size: 54px;
    line-height: 1.52;
    margin: 24px 0 22px;
    color: #fff3e8
}

.book-promo h2>span {
    font-size: 1.27em;
    background: linear-gradient(105deg, #ffdb9b, #f5a77e 65%, #edb3cb);
    background-clip: text;
    -webkit-background-clip: text
}

.book-promo .promo-lead {
    font-size: 23px;
    color: #f0dfd0
}

.book-promo .promo-description {
    font-size: 19px;
    line-height: 1.95;
    color: #bfcbd0
}

.book-promo .promo-edition {
    color: #b9c9c7
}

.book-promo .promo-note {
    color: #b5c9c3;
    font-size: 14px
}

.book-promo .promo-watermark {
    color: #d1e4ce07;
    right: 16px;
    top: 25px;
    font-size: 260px
}

.book-promo .promo-bottom {
    gap: 23px
}

.book-promo .promo-button {
    min-height: 56px;
    padding: 14px 23px
}

@media(max-width:1100px) {
    .book-banner.book-promo {
        gap: 38px;
        padding: 40px 10px;
        grid-template-columns: minmax(235px, .85fr) minmax(0, 1.2fr)
    }

    .book-promo h2 {
        font-size: 43px
    }

    .book-promo .promo-lead {
        font-size: 21px
    }

    .book-promo .promo-description {
        font-size: 18px
    }
}

@media(max-width:760px) {
    .book-banner.book-promo {
        grid-template-columns: 1fr;
        gap: 25px;
        margin: 15px 0 25px;
        padding: 24px 0;
        border: 0;
        border-radius: 0;
        background: none
    }

    .book-promo:before {
        inset: 0;
        background: radial-gradient(ellipse at 50% 25%, #25897920, transparent 60%)
    }

    .book-promo-art {
        min-height: 365px
    }

    .book-promo .book-art-label {
        font-size: 11px
    }

    .book-promo h2 {
        font-size: 39px;
        margin: 22px auto 18px
    }

    .book-promo .promo-lead {
        font-size: 21px
    }

    .book-promo .promo-description {
        font-size: 18px
    }

    .book-promo .promo-record {
        max-width: 95%
    }

    .book-promo:hover .promo-record {
        transform: translate(-46%, -48%) rotate(20deg)
    }

    .book-promo .promo-watermark {
        font-size: 170px;
        top: 44%;
        right: 0
    }

    .book-promo .promo-button {
        width: auto;
        max-width: 100%
    }

    .book-promo .promo-bottom {
        flex-direction: column;
        gap: 20px
    }
}

@media(prefers-reduced-motion:reduce) {
    .book-promo .promo-record {
        transition: none
    }

    .book-promo:hover .promo-record {
        transform: translate(-43%, -49%);
        filter: none
    }
}

/* Edge-to-edge atmosphere for the open book feature. */
.book-banner.book-promo {
    padding-top: 68px;
    padding-bottom: 68px
}

.book-promo:before {
    display: none
}

.book-full-backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    --book-x: 28%;
    --book-y: 46%;
    background: linear-gradient(115deg, #102c30 0%, #102328 45%, #151725 100%);
    border: 0;
    border-radius: 0
}

.book-full-backdrop:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #11101c60, transparent 22%, transparent 78%, #11101c70);
    pointer-events: none
}

.book-backdrop-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 36% 65% at var(--book-x) var(--book-y), #368d7138, transparent), radial-gradient(ellipse at 95% 80%, #d58d4920, transparent 55%)
}

.book-backdrop-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#b9d6c333 .8px, transparent 1px);
    background-size: 28px 28px;
    opacity: .45;
    mask-image: linear-gradient(90deg, #000, transparent 55%, #000)
}

.book-backdrop-rings {
    position: absolute;
    left: -180px;
    top: 50%;
    width: 850px;
    height: 850px;
    transform: translateY(-50%);
    border: 1px solid #9dc8b217;
    border-radius: 50%;
    box-shadow: 0 0 0 55px #9dc8b204, 0 0 0 56px #9dc8b212, 0 0 0 120px #9dc8b203, 0 0 0 121px #9dc8b20b
}

.book-backdrop-waves {
    position: absolute;
    left: -5%;
    bottom: 0;
    width: 110%;
    height: 230px;
    color: #d8b985;
    opacity: .12;
    animation: book-wave-drift 16s ease-in-out infinite alternate
}

@keyframes book-wave-drift {
    from {
        transform: translateY(-9px)
    }

    to {
        transform: translateY(12px)
    }
}

@media(max-width:760px) {
    .book-banner.book-promo {
        padding-top: 42px;
        padding-bottom: 42px
    }

    .book-backdrop-rings {
        width: 620px;
        height: 620px;
        left: -230px;
        top: 30%
    }

    .book-backdrop-waves {
        height: 180px;
        bottom: 30%
    }

    .book-backdrop-glow {
        background: radial-gradient(ellipse at 50% 25%, #368d7138, transparent 58%), radial-gradient(ellipse at 100% 90%, #d58d4918, transparent 55%)
    }
}

@media(prefers-reduced-motion:reduce) {
    .book-backdrop-waves {
        animation: none
    }
}

/* Open appointment invitation, without a panel or decorative enclosure. */
.closing.appointment-cta {
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 30px;
    margin: 60px 0 38px;
    padding: 28px 0 35px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible
}

.appointment-cta:before {
    display: none
}

.appointment-cta-icon {
    width: 74px;
    height: 82px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    color: #ffc78e;
    transition: transform .3s ease, color .3s ease
}

.appointment-cta-icon svg {
    width: 68px;
    height: 68px
}

.appointment-cta:hover .appointment-cta-icon {
    transform: translateY(-4px);
    color: #f7a4d5
}

.appointment-cta-copy h2 {
    font-size: 35px;
    margin: 13px 0;
    line-height: 1.65
}

.closing .appointment-cta-copy p {
    font-size: 18px;
    line-height: 1.95;
    max-width: 530px;
    color: #cec2d7
}

.appointment-cta-copy .eyebrow {
    font-size: 14px;
    letter-spacing: .4px
}

.appointment-cta-action {
    gap: 19px
}

.appointment-cta-button {
    min-height: 58px
}

.appointment-cta-button:focus-visible {
    outline: 3px solid #ffce92;
    outline-offset: 7px
}

@media(max-width:1100px) {
    .closing.appointment-cta {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 23px;
        margin-top: 45px
    }

    .appointment-cta-action {
        grid-column: 2;
        align-items: flex-start
    }

    .appointment-cta-copy h2 {
        font-size: 32px
    }
}

@media(max-width:760px) {
    .closing.appointment-cta {
        grid-template-columns: 1fr;
        gap: 17px;
        margin: 32px 0 23px;
        padding: 22px 0 28px;
        text-align: left
    }

    .appointment-cta-icon {
        width: 58px;
        height: 58px;
        margin: 0
    }

    .appointment-cta-icon svg {
        width: 54px;
        height: 54px
    }

    .appointment-cta-copy .eyebrow {
        justify-content: flex-start
    }

    .appointment-cta-copy h2 {
        font-size: 30px
    }

    .closing .appointment-cta-copy p {
        font-size: 18px
    }

    .appointment-cta-action {
        grid-column: 1;
        align-items: flex-start;
        margin-top: 8px
    }

    .appointment-cta-button {
        width: auto;
        max-width: 100%;
        padding: 14px 18px
    }
}

@media(prefers-reduced-motion:reduce) {
    .appointment-cta-icon {
        transition: none
    }

    .appointment-cta:hover .appointment-cta-icon {
        transform: none
    }
}

/* Compose the open invitation around an intimate conversation illustration. */
.closing.appointment-cta {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    grid-template-rows: auto auto;
    column-gap: 60px;
    row-gap: 7px;
    align-items: center;
    padding: 48px 28px 45px;
    margin: 46px 0 30px
}

.appointment-cta-copy {
    grid-column: 1;
    grid-row: 1/3;
    align-self: center
}

.appointment-cta-copy h2 {
    font-size: 41px;
    line-height: 1.65;
    margin: 17px 0 17px;
    letter-spacing: -.4px
}

.closing .appointment-cta-copy p {
    max-width: 580px;
    font-size: 18px;
    line-height: 1.95
}

.appointment-cta-copy .eyebrow {
    font-size: 14px;
    letter-spacing: .7px
}

.appointment-cta-icon {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: end;
    width: 270px;
    height: 135px;
    max-width: 100%;
    margin: 0;
    transform: none
}

.appointment-cta-icon svg.conversation-art {
    width: 100%;
    height: 100%;
    overflow: visible
}

.appointment-cta:hover .appointment-cta-icon {
    transform: none
}

.conversation-left,
.conversation-right {
    transition: transform .4s ease;
    transform-origin: center
}

.appointment-cta:hover .conversation-left {
    transform: translate(-3px, -3px) rotate(-2deg)
}

.appointment-cta:hover .conversation-right {
    transform: translate(3px, -2px) rotate(2deg)
}

.appointment-cta-action {
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    justify-self: center;
    align-self: start;
    gap: 17px;
    margin: 5px 0 0
}

.appointment-cta-button {
    min-height: 60px;
    padding: 15px 23px
}



@media(max-width:1100px) {
    .closing.appointment-cta {
        grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
        column-gap: 30px;
        padding: 35px 5px
    }

    .appointment-cta-copy h2 {
        font-size: 35px
    }

    .appointment-cta-icon {
        width: 240px;
        height: 120px
    }

    .appointment-cta-action {
        grid-column: 2
    }

    .appointment-cta-button {
        font-size: 16px;
        gap: 10px;
        padding: 14px 17px
    }
}

@media(max-width:760px) {
    .closing.appointment-cta {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 12px;
        text-align: center;
        padding: 32px 0 38px;
        margin: 30px 0 20px
    }

    .appointment-cta-copy {
        grid-column: 1;
        grid-row: 1
    }

    .appointment-cta-copy .eyebrow {
        justify-content: center
    }

    .appointment-cta-copy h2 {
        font-size: 32px;
        letter-spacing: 0;
        margin: 15px 0
    }

    .closing .appointment-cta-copy p {
        font-size: 18px;
        margin: 0 auto;
        max-width: 460px
    }

    .appointment-cta-icon {
        grid-column: 1;
        grid-row: 2;
        width: 230px;
        height: 115px;
        margin-top: 8px
    }

    .appointment-cta-action {
        grid-column: 1;
        grid-row: 3;
        align-items: center;
        margin: 0
    }

    .appointment-cta-button {
        width: auto;
        max-width: 100%;
        font-size: 16px
    }

    
}

@media(prefers-reduced-motion:reduce) {

    .conversation-left,
    .conversation-right {
        transition: none
    }

    .appointment-cta:hover .conversation-left,
    .appointment-cta:hover .conversation-right {
        transform: none
    }
}

/* Keep the invitation headline together on wide layouts. */
.closing.appointment-cta {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 30px;
    padding-left: 0;
    padding-right: 0
}

.appointment-cta-copy h2 {
    font-size: clamp(27px, 2.3vw, 34px);
    white-space: nowrap;
    letter-spacing: -.5px;
    line-height: 1.85
}

.closing .appointment-cta-copy h2 span {
    position: relative;
    display: inline-block;
    background: linear-gradient(100deg, #ffd18e, #f5a1cc, #cda1ff, #ffd18e);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    transition: background-position .8s ease
}

.appointment-cta-copy h2 span:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffc680, #f092cb, #bd8de8);
    transform: scaleX(.25);
    transform-origin: left;
    opacity: .4;
    transition: transform .5s ease, opacity .5s ease
}

.appointment-cta:hover h2 span,
.appointment-cta:focus-within h2 span {
    background-position: 100% 50%
}

.appointment-cta:hover h2 span:after,
.appointment-cta:focus-within h2 span:after {
    transform: scaleX(1);
    opacity: 1
}

@media(min-width:761px) and (max-width:1100px) {
    .closing.appointment-cta {
        grid-template-columns: minmax(0, 1fr) 250px;
        column-gap: 22px
    }

    .appointment-cta-copy h2 {
        white-space: normal;
        font-size: 30px;
        letter-spacing: 0
    }

    .appointment-cta-button {
        font-size: 15px;
        padding: 14px 12px
    }
}

@media(max-width:760px) {
    .closing.appointment-cta {
        grid-template-columns: 1fr;
        column-gap: 0
    }

    .appointment-cta-copy h2 {
        font-size: 30px;
        white-space: normal;
        letter-spacing: 0;
        line-height: 1.8
    }
}

@media(prefers-reduced-motion:reduce) {

    .closing .appointment-cta-copy h2 span,
    .appointment-cta-copy h2 span:after {
        transition: none
    }
}
/* A centered invitation gives the CTA one clear focal point. */
.closing.appointment-cta{display:flex;flex-direction:column;align-items:center;gap:25px;position:relative;isolation:isolate;text-align:center;margin:44px 0 25px;padding:54px 24px 52px;overflow:hidden;border:0;background:none;box-shadow:none;border-radius:0}
.closing.appointment-cta:before{display:block;content:'';position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;transform:none;background:radial-gradient(ellipse at 50% 56%,#a3428420,transparent 68%);z-index:-1;pointer-events:none}
.closing.appointment-cta:after{left:20%;right:20%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ebaccc45,transparent)}
.appointment-cta-copy{width:100%;position:relative;z-index:1}
.appointment-cta-copy .eyebrow{justify-content:center;font-size:15px;letter-spacing:.8px;color:#f1bfdc;margin-bottom:20px}
.appointment-cta-copy h2{font-size:clamp(32px,3.3vw,48px);font-weight:600;line-height:1.8;white-space:nowrap;letter-spacing:-.7px;margin:0 0 21px}
.closing .appointment-cta-copy h2 span:after{height:2px;bottom:-2px;transform:scaleX(.65);opacity:.65}
.closing .appointment-cta-copy p{max-width:720px;margin:0 auto;font-size:19px;line-height:1.95;color:#d3c6dc;text-wrap:balance}
.appointment-cta-action{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:19px;margin:0;align-self:center}
.appointment-cta-button{min-height:64px;font-size:19px;padding:16px 30px;gap:18px;box-shadow:inset 0 2px 0 #fff6,0 5px 0 #70305f,0 14px 35px #ee85bf20}
.appointment-cta-button:hover{box-shadow:inset 0 2px 0 #fff8,0 5px 0 #70305f,0 16px 40px #ee85bf40}
.closing .appointment-cta-note{font-size:15px;color:#cdb6d0;letter-spacing:.2px}
.appointment-cta-icon{position:absolute;right:1%;bottom:36px;width:185px;height:100px;margin:0;opacity:.55;pointer-events:none;transform:rotate(-8deg)}
.appointment-cta:hover .appointment-cta-icon{transform:rotate(-8deg)}
.appointment-cta-action:before,.appointment-cta-action:after{content:'';position:absolute;top:26px;width:100px;height:26px;pointer-events:none;background:repeating-linear-gradient(90deg,#e3a5c4 0 2px,transparent 2px 9px);opacity:.38;mask-image:radial-gradient(ellipse,#000 20%,transparent 70%);transition:opacity .3s,transform .3s}
.appointment-cta-action:before{right:calc(100% + 22px)}.appointment-cta-action:after{left:calc(100% + 22px)}
.appointment-cta-action:hover:before,.appointment-cta-action:hover:after{opacity:.8;transform:scaleY(1.3)}
@media(max-width:1100px){.closing.appointment-cta{padding:44px 12px;gap:24px}.appointment-cta-copy h2{font-size:clamp(30px,3.5vw,39px);white-space:nowrap}.appointment-cta-icon{width:130px;height:75px;right:0;opacity:.35}.appointment-cta-button{font-size:18px}}
@media(max-width:760px){.closing.appointment-cta{padding:35px 0 37px;margin:25px 0 20px;gap:23px}.appointment-cta-copy .eyebrow{font-size:14px;margin-bottom:17px}.appointment-cta-copy h2{font-size:30px;white-space:normal;line-height:1.85;letter-spacing:0;margin-bottom:19px}.closing .appointment-cta-copy p{font-size:18px;max-width:460px}.appointment-cta-icon{display:none}.appointment-cta-button{font-size:17px;min-height:60px;padding:15px 21px;gap:13px}.appointment-cta-action:before,.appointment-cta-action:after{width:45px;opacity:.25}.appointment-cta-action:before{right:calc(100% + 8px)}.appointment-cta-action:after{left:calc(100% + 8px)}.closing .appointment-cta-note{font-size:14px}}
@media(prefers-reduced-motion:reduce){.appointment-cta-action:before,.appointment-cta-action:after{transition:none}.appointment-cta-action:hover:before,.appointment-cta-action:hover:after{transform:none}.appointment-cta:hover .appointment-cta-icon{transform:rotate(-8deg)}}