@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500&family=Playfair+Display:wght@600&display=swap");

:root {
    color-scheme: light;
    --sky: #cfe9ff;
    --sea: #b7dcf5;
    --sand: #fff0d7;
    --coral: #f6a38f;
    --driftwood: #6e6357;
    --ink: #3d3a34;
    --card: #fff9f1;
    --card-border: #f0dcc7;
}

body {
    font-family: "Crimson Pro", "Georgia", "Times New Roman", serif;
    margin: 0;
    min-height: 100vh;
    background: #f8fbff;
    color: var(--ink);
}

.story {
    width: min(860px, 92vw);
    margin: 40px auto 80px;
}

.story-header {
    text-align: center;
    margin-bottom: 24px;
}

.story-header h1 {
    font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    margin: 0;
    color: #2f4c63;
    letter-spacing: 0.01em;
}

.story-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: clamp(1.08rem, 1.8vw, 1.25rem);
    line-height: 1.8;
}

.story-body p {
    margin: 0;
}

.illustration {
    width: min(560px, 100%);
    height: auto;
    margin: 12px auto;
    display: block;
    border-radius: 16px;
    border: 2px solid #ffffff;
    box-shadow: 0 12px 24px rgba(73, 97, 117, 0.18);
}