html {
    scroll-padding-top: 20px;
}

.story-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 5vw;
    min-height: 720px;
}

.story-kicker,.tiny,.timeline-date,.photo-label,.family-photo figcaption {
    font: 12px "DM Mono",monospace;
    letter-spacing: 1px;
}

.story-kicker {
    display: block;
    margin-top: 65px;
    color: var(--paper);
}

.story-hero h1,.story-history h2,.story-timeline h2,.story-goals h2 {
    font-size: clamp(60px,8vw,135px);
    line-height: .9;
    letter-spacing: -.075em;
    margin: 20px 0 32px;
    font-weight: 900;
}

.story-intro>p {
    font-size: clamp(18px,2vw,25px);
    max-width: 560px;
    line-height: 1.5;
}

.story-photo {
    height: 520px;
    position: relative;
    isolation: isolate;
}

.story-red,.story-paper {
    position: absolute;
    inset: 8%;
    background: var(--red);
    transform: rotate(-9deg);
    clip-path: polygon(2% 0,99% 6%,93% 100%,0 94%);
}

.story-paper {
    background: var(--paper);
    transform: rotate(8deg);
    inset: 13% 4% 3% 14%;
}

.story-photo img {
    position: absolute;
    inset: 12% 12% 12% 12%;
    height: 76%;
    width: 76%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.1);
    transform: rotate(3deg);
    border: 9px solid #e8d7bc;
    box-shadow: 0 25px 50px #0008;
}

.photo-label {
    position: absolute;
    bottom: 6%;
    left: 8%;
    background: var(--paper);
    color: var(--ink);
    padding: 12px;
    transform: rotate(-6deg);
}

.photo-scribble {
    position: absolute;
    right: -3%;
    top: 0;
    transform: rotate(10deg);
    font: 23px "Permanent Marker",cursive;
    color: var(--white);
}

.story-history {
    background: #211d1b;
}

.history-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 7vw;
    align-items: start;
    margin-top: 35px;
}

.story-history h2,.story-timeline h2,.story-goals h2 {
    font-size: clamp(52px,6.5vw,110px);
}

.hand-note {
    font: 22px "Permanent Marker",cursive;
    color: var(--paper);
}

.family-photo {
    margin: 70px 0 0;
    background: var(--paper);
    padding: 12px 12px 18px;
    transform: rotate(-4deg);
    max-width: 440px;
}

.family-photo img {
    display: block;
    width: 100%;
    height: 270px;
    object-fit: cover;
    filter: grayscale(1);
}

.family-photo figcaption {
    color: var(--ink);
    padding-top: 13px;
}

.story-letter {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    padding: clamp(26px,4vw,65px);
    transform: rotate(1deg);
    box-shadow: 14px 16px 0 #0006;
    clip-path: polygon(0 1%,99% 0,100% 99%,2% 100%);
}

.story-letter p {
    font-size: clamp(16px,1.5vw,20px);
    line-height: 1.8;
}

.story-letter .tiny {
    color: var(--red);
}

.story-timeline {
    background: var(--paper);
    color: var(--ink);
}

.story-timeline .section-marker,.story-goals .section-marker {
    border-color: #15131255;
}

.timeline-lead {
    font-size: 20px;
}

.timeline-list {
    margin-top: 65px;
    border-top: 2px solid var(--ink);
}

.timeline-item {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 35px;
    padding: 32px 0;
    border-bottom: 2px solid #15131255;
}

.timeline-date {
    color: #b22a24;
    font-weight: 700;
    font-size: 15px;
}

.timeline-item .tiny {
    font-weight: 700;
}

.timeline-item p {
    font-size: clamp(17px,1.8vw,23px);
    line-height: 1.55;
    max-width: 850px;
}

.story-goals {
    background: #211d1b;
}

.goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7vw;
    align-items: center;
    margin-top: 35px;
}

.goals-grid>div>p {
    font-size: 20px;
    line-height: 1.6;
}

.goal-paper {
    background: var(--paper);
    color: var(--ink);
    padding: clamp(25px,4vw,65px);
    transform: rotate(3deg);
    box-shadow: 14px 14px 0 var(--red);
}

.goal-paper p {
    font: 18px "DM Mono",monospace;
    border-bottom: 1px dashed #15131255;
    padding: 14px 0;
}

.goal-stamp {
    display: block;
    margin-top: 30px;
    color: var(--red);
    font: 28px "Permanent Marker",cursive;
    text-align: right;
}

@media (max-width:760px) {
    .story-hero,.history-layout,.goals-grid {
        grid-template-columns: 1fr;
    }

    .story-hero {
        min-height: 0;
        gap: 10px;
    }

    .story-kicker {
        margin-top: 35px;
    }

    .story-photo {
        height: 370px;
    }

    .photo-scribble {
        right: 0;
        font-size: 16px;
    }

    .family-photo {
        margin: 35px 0 45px;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .timeline-list {
        margin-top: 40px;
    }

    .story-letter {
        transform: none;
    }

    .goal-paper {
        margin-top: 40px;
    }
}

@media (max-width:380px) {
    .story-photo {
        height: 300px;
    }

    .story-hero h1 {
        font-size: 60px;
    }

    .story-letter {
        padding: 25px;
    }
}