/* ============================================================
   WINDERVALE — ABOUT
   A LETTER / PERSONAL / HANDWRITTEN / SLIGHTLY STRANGE
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Kalam:wght@300;400;700&family=Special+Elite&display=swap');


/* ============================================================
   ROOT
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background: #171311;
}

body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background: #171311;

    color: #eadfd8;

    font-family:
        "Kalam",
        cursive;

    overflow-x: hidden;
}


/* ============================================================
   PAGE
   ============================================================ */

.about-page {
    width: 100%;
    min-height: 100vh;

    padding: 28px 40px 30px;

    position: relative;
}


/* ============================================================
   BACK LINK
   ============================================================ */

.back {
    position: fixed;

    top: 27px;
    left: 32px;

    z-index: 100;

    color: #eadfd8;

    text-decoration: none;

    font-family:
        "Kalam",
        cursive;

    font-size: 17px;

    transform: rotate(-2deg);

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.back:hover {
    color: #c94f45;

    transform:
        translateX(-5px)
        rotate(-4deg);
}


/* ============================================================
   THE LETTER
   ============================================================ */

.paper {
    width: min(930px, 88vw);

    min-height: 1120px;

    margin: 72px auto 90px;

    position: relative;

    padding:
        110px
        125px
        115px
        135px;

    background: #cfa7a7;

    color: #241b19;

    transform:
        rotate(-0.55deg);

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.42);

    overflow: hidden;
}


/* ============================================================
   PAPER EDGE
   ============================================================ */

.paper::before {
    content: "";

    position: absolute;

    inset: 13px;

    border:
        1px solid
        rgba(47, 29, 27, 0.23);

    pointer-events: none;
}


/* ============================================================
   PAPER INNER IMPERFECTION
   ============================================================ */

.paper::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -105px;
    top: 285px;

    border:
        2px solid
        rgba(112, 48, 44, 0.22);

    border-radius:
        48%
        52%
        45%
        55%;

    transform:
        rotate(22deg);

    pointer-events: none;
}


/* ============================================================
   DATE
   ============================================================ */

.date {
    position: absolute;

    top: 43px;
    right: 67px;

    font-family:
        "Caveat",
        cursive;

    font-size: 22px;

    font-weight: 600;

    color: #713b37;

    transform:
        rotate(3deg);
}


/* ============================================================
   LETTER
   ============================================================ */

.letter {
    max-width: 620px;

    position: relative;

    z-index: 5;
}


/* ============================================================
   BODY WRITING
   ============================================================ */

.letter p {
    margin:
        0
        0
        30px;

    font-family:
        "Kalam",
        cursive;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.55;

    letter-spacing: 0.005em;
}


/* ============================================================
   OPENING — BIG HANDWRITING
   ============================================================ */

.letter .big {
    margin-bottom: 58px;

    font-family:
        "Caveat",
        cursive;

    font-size:
        clamp(48px, 5.5vw, 72px);

    font-weight: 600;

    line-height: 0.95;

    letter-spacing: -0.025em;

    transform:
        rotate(-1deg);
}


/* ============================================================
   RED EMPHASIS
   ============================================================ */

.letter .big span {
    position: relative;

    color: #74332f;
}


/* rough underline */

.letter .big span::after {
    content: "";

    position: absolute;

    left: -5px;
    right: -8px;

    bottom: 1px;

    height: 5px;

    background: #9e4942;

    opacity: 0.55;

    transform:
        rotate(-2deg);

    z-index: -1;
}


/* ============================================================
   IMPORTANT SENTENCE
   ============================================================ */

.letter p:nth-of-type(3) {
    margin-left: 13px;

    font-family:
        "Caveat",
        cursive;

    font-size: 31px;

    font-weight: 600;

    line-height: 1.05;

    color: #74332f;

    transform:
        rotate(-1.2deg);
}


/* ============================================================
   INDENTED THOUGHT
   ============================================================ */

.indent {
    margin-left: 60px !important;

    font-family:
        "Caveat",
        cursive !important;

    font-size: 28px !important;

    font-weight: 500 !important;

    line-height: 1.15 !important;

    color: #241b19;

    transform:
        rotate(1.3deg);
}


/* ============================================================
   STRONG WORDS
   ============================================================ */

.letter strong {
    font-family:
        "Caveat",
        cursive;

    font-size: 27px;

    font-weight: 700;

    color: #74332f;
}


/* ============================================================
   STRANGE LITTLE NOTE
   ============================================================ */

.letter::before {
    content: "this is where it started";

    position: absolute;

    top: 320px;
    right: -185px;

    font-family:
        "Caveat",
        cursive;

    font-size: 20px;

    font-weight: 600;

    color: #74332f;

    transform:
        rotate(-7deg);

    white-space: nowrap;
}


/* arrow attached to note */

.letter::after {
    content: "↙";

    position: absolute;

    top: 343px;
    right: -115px;

    font-family:
        "Caveat",
        cursive;

    font-size: 28px;

    color: #74332f;

    transform:
        rotate(-10deg);
}


/* ============================================================
   SCRIBBLE
   ============================================================ */

.scribble {
    width: 270px;

    margin:
        55px
        0
        60px
        220px;

    position: relative;

    display: flex;

    flex-direction: column;

    font-family:
        "Caveat",
        cursive;

    font-size: 34px;

    font-weight: 600;

    line-height: 0.88;

    color: #74332f;

    transform:
        rotate(3deg);
}


/* rough line */

.scribble::before {
    content: "";

    width: 190px;

    height: 4px;

    margin-bottom: 9px;

    background: #74332f;

    border-radius: 50%;

    transform:
        rotate(-2deg);
}


/* scribble loop */

.scribble::after {
    content: "";

    position: absolute;

    width: 52px;
    height: 25px;

    right: -25px;
    top: 30px;

    border-top:
        2px solid
        #74332f;

    border-radius: 50%;

    transform:
        rotate(-18deg);
}


/* ============================================================
   SIDE NOTE 01
   ============================================================ */

.note-one {
    position: absolute;

    top: 165px;
    right: 52px;

    font-family:
        "Caveat",
        cursive;

    font-size: 25px;

    font-weight: 600;

    color: #74332f;

    transform:
        rotate(6deg);

    z-index: 10;
}


.note-one::after {
    content: "↓";

    display: block;

    margin-left: 43px;
    margin-top: 5px;

    font-size: 27px;
}


/* ============================================================
   SIDE NOTE 02
   ============================================================ */

.note-two {
    position: absolute;

    top: 475px;
    right: 46px;

    width: 130px;

    font-family:
        "Kalam",
        cursive;

    font-size: 14px;

    line-height: 1.3;

    color: #362724;

    transform:
        rotate(4deg);

    opacity: 0.82;
}


.note-two::before {
    content: "things we kept coming back to";

    display: block;

    margin-bottom: 8px;

    font-family:
        "Caveat",
        cursive;

    font-size: 19px;

    font-weight: 600;

    line-height: 1;

    color: #74332f;

    transform:
        rotate(-2deg);
}


/* ============================================================
   CLOSING
   ============================================================ */

.closing {
    margin-top: 72px !important;

    font-family:
        "Caveat",
        cursive !important;

    font-size:
        clamp(37px, 4vw, 53px) !important;

    font-weight: 600 !important;

    line-height: 0.95 !important;

    color: #241b19 !important;

    transform:
        rotate(-1.4deg);
}


/* ============================================================
   SIGNATURE
   ============================================================ */

.signature {
    width: max-content;

    margin-top: 58px;

    display: flex;

    flex-direction: column;

    font-family:
        "Caveat",
        cursive;

    font-size: 34px;

    font-weight: 700;

    line-height: 0.72;

    color: #241b19;

    transform:
        rotate(-4deg);
}


.signature::after {
    content: "";

    width: 105px;

    height: 3px;

    margin:
        11px
        0
        0
        6px;

    background: #74332f;

    transform:
        rotate(-3deg);
}


.signature span:last-child {
    margin-left: 31px;

    font-size: 23px;

    font-weight: 500;

    color: #74332f;
}


/* ============================================================
   LITTLE HAND-DRAWN CIRCLE
   ============================================================ */

.little-mark {
    position: absolute;

    bottom: 58px;
    left: 65px;

    width: 42px;
    height: 42px;

    border:
        2px solid
        #74332f;

    border-radius:
        46%
        54%
        52%
        48%;

    transform:
        rotate(12deg);
}


/* tiny cross */

.little-mark::before,
.little-mark::after {
    content: "";

    position: absolute;

    left: 18px;
    top: 9px;

    width: 2px;
    height: 25px;

    background: #74332f;
}


.little-mark::after {
    transform:
        rotate(90deg);
}


/* ============================================================
   BOTTOM NOTE
   ============================================================ */

.note-three {
    position: absolute;

    right: 85px;
    bottom: 105px;

    font-family:
        "Caveat",
        cursive;

    font-size: 25px;

    font-weight: 600;

    color: #74332f;

    transform:
        rotate(-7deg);
}


/* ============================================================
   TINY ARCHIVE STAMP
   ============================================================ */

.archive-stamp {
    position: absolute;

    right: 45px;
    bottom: 45px;

    width: 76px;
    height: 76px;

    border:
        1px solid
        #74332f;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    font-family:
        "Special Elite",
        monospace;

    font-size: 8px;

    line-height: 1.1;

    letter-spacing: 0.08em;

    color: #74332f;

    transform:
        rotate(13deg);

    opacity: 0.72;
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
    width: min(930px, 88vw);

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #766963;

    font-family:
        "Special Elite",
        monospace;

    font-size: 8px;

    letter-spacing: 0.08em;
}


footer a {
    color: #eadfd8;

    text-decoration: none;

    transition:
        color 180ms ease;
}


footer a:hover {
    color: #c94f45;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .about-page {
        padding:
            18px
            18px
            25px;
    }


    .back {
        position: relative;

        top: auto;
        left: auto;

        display: inline-block;

        margin:
            5px
            0
            18px
            4px;
    }


    .paper {
        width: 100%;

        min-height: auto;

        margin:
            12px
            auto
            55px;

        padding:
            82px
            32px
            90px;

        transform:
            rotate(0deg);
    }


    .paper::after {
        width: 150px;
        height: 150px;

        right: -80px;
        top: 180px;
    }


    .paper::before {
        inset: 9px;
    }


    .date {
        top: 31px;
        right: 32px;

        font-size: 18px;
    }


    .letter {
        max-width: none;
    }


    .letter .big {
        font-size: 48px;

        margin-bottom: 45px;
    }


    .letter p {
        font-size: 19px;

        line-height: 1.5;
    }


    .letter p:nth-of-type(3) {
        font-size: 28px;

        margin-left: 5px;
    }


    .indent {
        margin-left: 18px !important;

        font-size: 25px !important;
    }


    .scribble {
        margin:
            45px
            auto
            48px
            18%;
    }


    .letter::before,
    .letter::after {
        display: none;
    }


    .note-one,
    .note-two,
    .note-three,
    .archive-stamp {
        display: none;
    }


    .closing {
        margin-top: 55px !important;

        font-size: 38px !important;
    }


    .little-mark {
        left: 30px;
        bottom: 34px;
    }


    footer {
        width: 100%;

        padding:
            0
            4px;

        font-size: 7px;
    }

}