@font-face {
    font-family: "Literata Variable";
    src: url("Literata-VariableFont_opsz,wght.ttf") format("truetype");
}

body {
    font-family: "Literata Variable", serif;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding-inline: clamp(1.5rem, 5vw, 3.5rem);
    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(147, 197, 253, 0.22),
            transparent 52%
        ),
        radial-gradient(
            circle at 82% 12%,
            rgba(244, 182, 217, 0.18),
            transparent 55%
        ),
        linear-gradient(135deg, #f8fafc, #e7ecf9 70%, #dbe4f4);
}

.quote-wrapper {
    width: min(68ch, 100%);
}

.passage-card {
    position: relative;
    margin: 0;
    padding: clamp(2.75rem, 7vw, 4rem);
    border-radius: 2.75rem;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.85),
        rgba(245, 245, 244, 0.65)
    );
    border: 1px solid rgba(168, 174, 188, 0.18);
    box-shadow:
        0 24px 45px rgba(18, 23, 34, 0.18),
        0 8px 20px rgba(42, 40, 55, 0.12);
    backdrop-filter: blur(24px);
    overflow: hidden;
}

.passage-card::before,
.passage-card::after {
    content: "";
    position: absolute;
    z-index: 0;
}

.passage-card::before {
    inset: -20% auto auto -25%;
    width: clamp(12rem, 28vw, 17rem);
    aspect-ratio: 1;
    background: radial-gradient(
        circle,
        rgba(240, 236, 224, 0.6),
        transparent 60%
    );
    filter: blur(10px);
    transform: rotate(-8deg);
}

.passage-card::after {
    inset: auto -22% -28% auto;
    width: clamp(10rem, 24vw, 16rem);
    aspect-ratio: 1;
    background: radial-gradient(
        circle,
        rgba(207, 219, 216, 0.48),
        transparent 62%
    );
    filter: blur(14px);
    transform: rotate(16deg);
}

.passage-text {
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 500;
    font-size: clamp(1.65rem, 4.6vw, 2.8rem);
    line-height: 1.42;
    color: #131d2e;
    text-align: center;
    text-wrap: balance;
    letter-spacing: 0.01em;
}

@media (max-width: 540px) {
    body {
        padding-inline: clamp(1.25rem, 6vw, 2rem);
    }
}