:root {
    --desk: #fffaf4;
    --board: #fffaf4;
    --ink: #5c4a3f;
    --ink-soft: #7a675d;
    --line: rgba(117, 98, 84, 0.12);
    --shadow: rgba(101, 82, 67, 0.12);
    --shadow-soft: rgba(101, 82, 67, 0.05);
    --kraft: #ddccb4;
    --sage: #f0f5ee;
    --cream: #fbf6ee;
    --peach: #f7ece7;
    --sun: #f6f0db;
    --sky: #e4ebf0;
    --rose: #d7c2c7;
    --green: #87957d;
    --tape: #ece0cd;
    --tape-soft: #f5ebdb;
    --link-fill: rgba(236, 211, 122, 0.72);
    --link-fill-hover: rgba(228, 196, 83, 0.84);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--desk);
    color: var(--ink);
    font-family: "Iowan Old Style", Baskerville, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 18px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

.page-shell {
    width: min(100% - 24px, 1060px);
    margin: 0 auto;
    padding: clamp(22px, 4vw, 44px) 0 clamp(40px, 5vw, 72px);
}

.scrapbook {
    padding: clamp(12px, 2vw, 20px) 0 0;
    background: transparent;
}

.collage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 28px 30px;
    align-items: start;
}

.left-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 22px;
    min-width: 0;
    padding-top: 10px;
}

.main-scrap-wrap {
    position: relative;
    max-width: 560px;
    overflow: visible;
}

.main-scrap-wrap::before,
.main-scrap-wrap::after,
.sticky-note::before,
.photo-polaroid::before,
.photo-polaroid::after,
.mini-note::before {
    background: rgba(241, 231, 214, 0.78);
    border: 1px solid rgba(181, 157, 129, 0.18);
    box-shadow: 0 2px 6px rgba(101, 82, 67, 0.08);
    z-index: 2;
}

.main-scrap-wrap::before,
.main-scrap-wrap::after {
    position: absolute;
    top: -12px;
    height: 20px;
    content: "";
    border-radius: 2px;
    opacity: 0.92;
}

.main-scrap-wrap::before {
    left: 34px;
    width: 112px;
    transform: rotate(-2deg);
}

.main-scrap-wrap::after {
    right: 38px;
    width: 64px;
    background: rgba(247, 239, 226, 0.82);
    transform: rotate(3deg);
}

.main-scrap {
    position: relative;
    z-index: 1;
    max-width: none;
    padding: clamp(26px, 4vw, 38px) clamp(22px, 4vw, 32px) 26px;
    color: #514035;
    background:
        linear-gradient(130deg, rgba(255, 255, 255, 0.16), transparent 42%),
        linear-gradient(12deg, rgba(114, 92, 74, 0.035), transparent 34%),
        var(--kraft);
    box-shadow: 0 18px 28px -26px var(--shadow);
    clip-path: polygon(3% 3%, 17% 0, 33% 2%, 49% 1%, 68% 3%, 83% 1%, 97% 4%, 99% 17%, 97% 34%, 100% 54%, 98% 77%, 99% 95%, 82% 97%, 62% 95%, 43% 99%, 24% 96%, 5% 98%, 1% 82%, 3% 59%, 1% 41%, 4% 18%);
    transform: rotate(-0.85deg);
}

.kicker {
    margin: 0 0 10px;
    color: rgba(81, 64, 53, 0.72);
    font-size: 0.98rem;
    font-style: italic;
}

h1 {
    max-width: 9ch;
    margin: 0;
    font-family: "Snell Roundhand", "Apple Chancery", "Bradley Hand", cursive;
    font-size: clamp(3rem, 6vw, 4.8rem);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0;
}

.sticky-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 18px 20px;
    align-items: start;
}

.sticky-note {
    position: relative;
    overflow: visible;
}

.sticky-note::before {
    position: absolute;
    top: -9px;
    left: 16px;
    z-index: 2;
    width: 46px;
    height: 17px;
    content: "";
    background: rgba(241, 231, 214, 0.78);
    border: 1px solid rgba(181, 157, 129, 0.18);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(101, 82, 67, 0.08);
    opacity: 0.9;
    transform: rotate(-4deg);
}

.sticky {
    position: relative;
    margin: 0;
    padding: 18px 18px 20px;
    color: var(--ink);
    box-shadow: 0 14px 22px -24px var(--shadow);
    clip-path: polygon(3% 3%, 24% 0, 53% 2%, 80% 1%, 98% 4%, 100% 27%, 98% 53%, 100% 81%, 97% 97%, 74% 99%, 46% 97%, 18% 100%, 3% 97%, 0 72%, 2% 47%, 0 18%);
}

.sticky-a {
    margin-right: 18px;
}

.sticky-b {
    margin-top: 12px;
    margin-left: 8px;
}

.sticky-c {
    margin-left: 10px;
}

.sticky-d {
    width: 84%;
    margin-top: 6px;
    margin-left: -6px;
}

.sticky-b::before {
    left: 22px;
    width: 40px;
    transform: rotate(2deg);
}

.sticky-c::before {
    left: 18px;
    width: 50px;
    transform: rotate(-5deg);
}

.sticky-d::before {
    left: 20px;
    width: 44px;
    transform: rotate(4deg);
}

.sticky-sage {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 46%),
        repeating-linear-gradient(48deg, rgba(129, 148, 121, 0.045) 0 1px, transparent 1px 13px),
        var(--sage);
    transform: rotate(-0.85deg);
}

.sticky-cream {
    background:
        repeating-linear-gradient(to bottom, rgba(125, 104, 88, 0.065) 0 1px, transparent 1px 25px),
        linear-gradient(140deg, rgba(255, 255, 255, 0.28), transparent 40%),
        var(--cream);
    transform: rotate(0.65deg);
}

.sticky-peach {
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.26), transparent 44%),
        repeating-linear-gradient(90deg, rgba(198, 168, 155, 0.04) 0 1px, transparent 1px 14px),
        var(--peach);
    transform: rotate(-0.45deg);
}

.sticky-sun {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.14)),
        repeating-linear-gradient(90deg, rgba(196, 174, 119, 0.04) 0 2px, transparent 2px 16px),
        var(--sun);
    transform: rotate(0.8deg);
}

.right-stack {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0;
    align-content: start;
    padding-top: 18px;
}

.photo-polaroid {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 14px 14px 30px;
    background: #fffefb;
    border: 1px solid rgba(117, 98, 84, 0.12);
    box-shadow: 0 18px 28px -26px var(--shadow);
    transform: rotate(1.6deg);
}

.photo-polaroid::before,
.photo-polaroid::after {
    position: absolute;
    top: -12px;
    height: 19px;
    content: "";
    border-radius: 2px;
    opacity: 0.94;
}

.photo-polaroid::before {
    left: 26px;
    width: 64px;
    transform: rotate(-4deg);
}

.photo-polaroid::after {
    right: 24px;
    width: 60px;
    background: rgba(247, 239, 226, 0.82);
    transform: rotate(6deg);
}

.photo-frame {
    position: relative;
}

.photo-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid rgba(117, 98, 84, 0.08);
}

.photo-polaroid figcaption {
    margin-top: 10px;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-style: italic;
}

.mini-note {
    position: relative;
    z-index: 1;
    justify-self: end;
    width: min(100%, 206px);
    margin-top: -10px;
    padding: 16px 18px 14px;
    background:
        repeating-linear-gradient(to bottom, rgba(120, 101, 86, 0.08) 0 1px, transparent 1px 25px),
        var(--sky);
    box-shadow: 0 14px 22px -24px var(--shadow);
    clip-path: polygon(4% 3%, 22% 0, 52% 2%, 81% 1%, 98% 4%, 100% 33%, 98% 67%, 100% 95%, 74% 99%, 45% 97%, 18% 100%, 2% 96%, 0 69%, 2% 35%, 0 12%);
    transform: rotate(-1.1deg);
}

.mini-note::before {
    position: absolute;
    top: -10px;
    left: 18px;
    width: 52px;
    height: 17px;
    content: "";
    border-radius: 2px;
    transform: rotate(-4deg);
}

.mini-note ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-note li {
    position: relative;
    padding-left: 20px;
}

.mini-note li::before {
    position: absolute;
    top: 0.05em;
    left: 0;
    content: "✿";
    color: #ab8388;
    font-size: 0.88em;
}

.rose-sticker {
    position: absolute;
    z-index: 3;
    top: 56px;
    left: min(50%, 408px);
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    background: var(--rose);
    border-radius: 999px;
    box-shadow: 0 14px 22px -24px var(--shadow);
    color: #fffaf4;
    font-size: 1.3rem;
    transform: rotate(8deg);
}

.rose-sticker::before {
    position: absolute;
    inset: 9px;
    content: "";
    border: 1px dashed rgba(255, 250, 244, 0.58);
    border-radius: 999px;
}

a,
.soft-link {
    color: var(--ink);
    text-decoration: none;
    padding: 0 0.08em;
    background: var(--link-fill);
    border-radius: 0.25em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-color 160ms ease, color 160ms ease;
}

a:hover,
a:focus-visible,
.soft-link:hover,
.soft-link:focus-visible,
.soft-link.is-hovered {
    color: #44362d;
    background: var(--link-fill-hover);
    outline: none;
}

.hover-swap {
    display: inline;
    cursor: pointer;
}

.hover-swap .hover-text {
    display: none;
}

.hover-swap:hover .normal-text,
.hover-swap:focus-visible .normal-text,
.hover-swap.is-hovered .normal-text {
    display: none;
}

.hover-swap:hover .hover-text,
.hover-swap:focus-visible .hover-text,
.hover-swap.is-hovered .hover-text {
    display: inline;
}

@media (max-width: 860px) {
    body {
        font-size: 17px;
    }

    .collage {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .right-stack {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
        gap: 14px;
        align-items: start;
        padding-top: 0;
    }

    .rose-sticker {
        top: 18px;
        right: 22px;
        left: auto;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 16px;
        line-height: 1.62;
    }

    .page-shell {
        width: min(100% - 18px, 1060px);
        padding-top: 14px;
    }

    .scrapbook {
        padding-top: 6px;
    }

    .collage,
    .right-stack,
    .sticky-grid {
        grid-template-columns: 1fr;
    }

    .left-stack,
    .right-stack {
        gap: 14px;
    }

    .main-scrap,
    .sticky,
    .photo-polaroid,
    .mini-note,
    .rose-sticker {
        transform: none;
    }

    .main-scrap {
        padding: 22px 18px 24px;
    }

    h1 {
        font-size: 2.7rem;
    }

    .sticky-a,
    .sticky-b,
    .sticky-c,
    .sticky-d {
        width: 100%;
        margin: 0;
    }

    .photo-polaroid {
        width: min(100%, 340px);
    }

    .mini-note {
        justify-self: start;
        width: min(100%, 230px);
        margin-top: 0;
    }

    .rose-sticker {
        top: 74px;
        right: 10px;
        width: 54px;
        height: 54px;
        font-size: 1.05rem;
    }
}