@font-face {
    font-family: "Patrick Hand";
    src: url("/patrick-hand-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.gary-note {
    --note-paper: #fffaf0;
    --note-rule: rgba(74, 124, 169, 0.20);
    --note-margin: rgba(184, 66, 66, 0.40);
    --note-ink: #1C3B78;
    --note-line-height: 2.25rem;

text-shadow:.15px .15px 0 rgba(10,25,70,.18);

    position: relative;
    box-sizing: border-box;
    width: min(720px, 92%);
    max-width: 720px;
    margin: 1.4rem 1.1rem 2rem 2rem;
    padding: 2rem 1.85rem 1.7rem 4.35rem;
    float: right;

    color: var(--note-ink);
    background-color: var(--note-paper);
    background-image:
        linear-gradient(
            to right,
            transparent 0,
            transparent 3.10rem,
            var(--note-margin) 3.10rem,
            var(--note-margin) calc(3.10rem + 1px),
            transparent calc(3.10rem + 1px),
            transparent 3.28rem,
            var(--note-margin) 3.28rem,
            var(--note-margin) calc(3.28rem + 1px),
            transparent calc(3.28rem + 1px)
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--note-line-height) - 1px),
            var(--note-rule) calc(var(--note-line-height) - 1px),
            var(--note-rule) var(--note-line-height)
        ),
        radial-gradient(
            ellipse at 20% 15%,
            rgba(126, 98, 54, 0.025),
            transparent 42%
        );

    border: 1px solid rgba(86, 72, 51, 0.20);
    border-radius: 5px 10px 7px 4px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.10),
        0 12px 28px rgba(0, 0, 0, 0.09);

    transform: rotate(-1deg);
    transform-origin: center;
    will-change: transform;
}

.gary-note-title {
    margin: 0 0 0.85rem;
    font-family: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
    font-size: clamp(2rem, 3.5vw, 2.65rem);
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--note-ink);
}

.gary-note-title span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.47em;
    line-height: 1.15;
    letter-spacing: 0.04em;
    opacity: 0.72;
}

.gary-note-body {
    font-family: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
    font-size: clamp(1.24rem, 2vw, 1.42rem);
    line-height: var(--note-line-height);
    color: var(--note-ink);
    text-align: left;
}

.gary-note-body p {
    margin: 0 0 var(--note-line-height);
}

.gary-note-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .gary-note {
        --note-line-height: 2.08rem;

        width: auto;
        max-width: none;
        margin: 1.55rem 0.35rem;
        padding: 1.65rem 1.05rem 1.4rem 3.25rem;
        float: none;

        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.22rem,
                var(--note-margin) 2.22rem,
                var(--note-margin) calc(2.22rem + 1px),
                transparent calc(2.22rem + 1px),
                transparent 2.38rem,
                var(--note-margin) 2.38rem,
                var(--note-margin) calc(2.38rem + 1px),
                transparent calc(2.38rem + 1px)
            ),
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--note-line-height) - 1px),
                var(--note-rule) calc(var(--note-line-height) - 1px),
                var(--note-rule) var(--note-line-height)
            ),
            radial-gradient(
                ellipse at 20% 15%,
                rgba(126, 98, 54, 0.025),
                transparent 42%
            );

        transform: rotate(-1deg);
    }

    .gary-note-title {
        font-size: 2rem;
    }

    .gary-note-body {
        font-size: 1.19rem;
    }
}

@media print {
    .gary-note {
        transform: none;
        box-shadow: none;
        break-inside: avoid;
    }
}