/*
============================================================
 PSEUDOTHYLACINE — WRITING NOTEBOOK
 70s sunshine scrapbook / handmade Neocities
============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Patrick+Hand&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
    --cream: #f6e7b9;
    --paper: #fff8dc;
    --paper-dark: #ead39a;
    --brown: #4b2d20;
    --brown-light: #6a4029;
    --orange: #c95d32;
    --mustard: #d5a43a;
    --sun: #f0c94c;
    --green: #697647;
    --sage: #a1a477;
    --pink: #c98378;
    --blue: #78939a;
    --purple: #817094;
    --ink: #3f2a20;
    --shadow: rgba(65, 38, 25, .22);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;

    background:
        radial-gradient(circle at 15% 20%, rgba(75,45,32,.07) 0 1px, transparent 1.5px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.28) 0 1px, transparent 1.5px),
        var(--cream);

    background-size: 9px 9px, 15px 15px;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    box-shadow: inset 0 0 90px rgba(73,42,25,.16);
}

button,
a {
    font: inherit;
}

/* =========================================================
   NOTEBOOK
========================================================= */

.site {
    width: min(1060px, 94%);
    margin: 35px auto 70px;
}

.notepad {
    position: relative;

    overflow: visible;

    background: var(--paper);

    border: 4px solid var(--brown);
    border-radius: 8px;

    box-shadow: 12px 13px 0 var(--brown);
}

/* =========================================================
   NOTEBOOK TOP
========================================================= */

.notebook-top {
    position: relative;

    min-height: 170px;

    padding: 38px 80px 35px 120px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.08) 0 2px,
            transparent 2px 6px
        ),
        var(--orange);

    border-bottom: 5px solid var(--brown);

    transform-origin: center;
}

.notebook-top::after {
    content: "✿   ✦   ☼   ✦   ✿";

    position: absolute;

    bottom: 10px;
    left: 0;
    width: 100%;

    color: var(--sun);

    font: 21px "Patrick Hand", cursive;
    letter-spacing: 12px;
}

.notebook-title {
    color: var(--paper);

    font: 800 clamp(2.6rem, 7vw, 5.5rem)/.9
        "Playfair Display", Georgia, serif;

    letter-spacing: -2px;

    text-shadow:
        3px 3px 0 var(--brown),
        7px 7px 0 var(--mustard);

    transform: rotate(-1deg);
}

.notebook-title span {
    color: var(--sun);
    font-size: .5em;
    vertical-align: middle;
}

.tiny-label {
    margin-top: 15px;

    padding: 6px 14px;

    background: var(--paper);

    border: 2px solid var(--brown);

    color: var(--brown);

    font: 11px "DM Mono", monospace;

    transform: rotate(1.5deg);
}

/* =========================================================
   SPIRAL BINDING
========================================================= */

.spiral {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 24px;

    width: 52px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;

    padding: 12px 0;

    z-index: 5;
}

.spiral span {
    position: relative;

    width: 43px;
    height: 15px;

    display: block;

    border: 4px solid var(--brown);

    border-left: 0;

    border-radius: 0 13px 13px 0;

    background: transparent;

    box-shadow:
        2px 1px 0 rgba(255,255,255,.25);
}

.spiral span::after {
    content: "";

    position: absolute;

    left: -9px;
    top: 2px;

    width: 11px;
    height: 6px;

    background: var(--brown);

    border-radius: 50%;
}

/* =========================================================
   TABS
========================================================= */

.tabs {
    position: relative;
    z-index: 10;

    margin: -1px 28px 0;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    gap: 8px;

    min-height: 57px;
}

.tab {
    position: relative;

    min-width: 125px;

    padding: 12px 17px 11px;

    border: 3px solid var(--brown);
    border-bottom: 0;

    border-radius: 12px 12px 0 0;

    color: var(--paper);

    cursor: pointer;

    font: 18px "Patrick Hand", cursive;

    box-shadow: 4px -2px 0 rgba(75,45,32,.13);

    transition:
        transform .15s ease,
        padding .15s ease;
}

.tab:nth-child(1) {
    background: var(--green);
    transform: rotate(-1deg);
}

.tab:nth-child(2) {
    background: var(--mustard);
    color: var(--brown);
    transform: rotate(1deg);
}

.tab:nth-child(3) {
    background: var(--blue);
    transform: rotate(-1deg);
}

.tab:nth-child(4) {
    background: var(--pink);
    transform: rotate(1deg);
}

.tab:hover {
    transform: translateY(-4px) rotate(-1deg);
}

.tab.active {
    z-index: 3;

    padding-top: 16px;

    transform: translateY(2px) rotate(0deg);

    background: var(--paper);

    color: var(--brown);

    box-shadow: none;
}

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

.paper {
    position: relative;

    min-height: 720px;

    padding: 48px 70px 55px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            transparent 0 56px,
            rgba(201,93,50,.20) 57px,
            transparent 58px
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0 31px,
            rgba(120,147,154,.16) 32px,
            transparent 33px
        ),
        var(--paper);

    border-top: 3px solid var(--brown);
}

.paper::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 12px;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--mustard) 0 12px,
            var(--orange) 12px 24px
        );

    opacity: .75;
}

.paper::after {
    content: "✦";

    position: absolute;

    right: 22px;
    top: 38px;

    color: var(--orange);

    font-size: 42px;

    transform: rotate(13deg);
}

/* =========================================================
   PAGES / TABS FUNCTIONALITY
========================================================= */

.writing-page {
    display: none;

    position: relative;

    max-width: 860px;

    margin: 0 auto;
}

.writing-page.active {
    display: block;

    animation: pageIn .22s ease;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 24px;

    border-bottom: 3px dashed var(--brown);

    padding-bottom: 17px;
}

.page-label {
    margin: 0 0 5px;

    color: var(--orange);

    font: 11px "DM Mono", monospace;
    letter-spacing: 1px;
}

.page-heading h1 {
    margin: 0;

    color: var(--brown);

    font: 700 clamp(2.1rem, 5vw, 3.6rem)/1
        "Playfair Display", Georgia, serif;

    transform: rotate(-1deg);
}

.page-doodle {
    color: var(--orange);

    font: 42px "Patrick Hand", cursive;

    transform: rotate(10deg);
}

.intro-text {
    max-width: 690px;

    margin: 0 0 33px;

    font-size: 15px;
    line-height: 1.65;
}

/* =========================================================
   STORIES
========================================================= */

.story-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.story-entry {
    position: relative;

    display: grid;
    grid-template-columns: 58px 1fr;

    padding: 19px 22px 20px 0;

    background: rgba(255,255,255,.42);

    border: 2px solid var(--brown);

    box-shadow: 5px 6px 0 var(--paper-dark);

    transform: rotate(-.4deg);
}

.story-entry:nth-child(2) {
    transform: rotate(.5deg);
}

.story-entry:nth-child(3) {
    transform: rotate(-.7deg);
}

.entry-number {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    color: var(--orange);

    font: 25px "Playfair Display", Georgia, serif;

    border-right: 2px dotted var(--brown);
}

.entry-content {
    padding-left: 20px;
}

.entry-content h2 {
    margin: 0;

    color: var(--brown);

    font: 700 25px "Playfair Display", Georgia, serif;
}

.meta {
    margin: 5px 0 11px;

    color: var(--green);

    font: 10px "DM Mono", monospace;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.entry-content p:not(.meta) {
    margin: 0 0 11px;

    font-size: 14px;
    line-height: 1.55;
}

.read-link {
    color: var(--orange);

    font: 16px "Patrick Hand", cursive;
    text-decoration: none;

    border-bottom: 2px dotted var(--orange);
}

.read-link:hover {
    color: var(--green);
}

/* =========================================================
   IMAGE SCRAPS
========================================================= */

.image-scrap {
    position: relative;

    width: 190px;

    padding: 9px 9px 16px;

    background: #fffdf0;

    border: 1px solid #c9ba91;

    box-shadow: 6px 8px 11px var(--shadow);

    text-align: center;
}

.image-scrap::before {
    content: "";

    position: absolute;

    z-index: 4;

    width: 70px;
    height: 19px;

    top: -10px;
    left: 50%;

    transform: translateX(-50%) rotate(-3deg);

    background: rgba(211,169,78,.72);

    border: 1px solid rgba(80,50,30,.15);
}

.image-scrap img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border: 2px solid var(--brown);

    background: var(--sage);
}

.image-scrap span {
    display: block;

    margin-top: 7px;

    color: var(--brown);

    font: 13px "Patrick Hand", cursive;
}

.scrap-one {
    position: absolute;

    right: 10px;
    top: 270px;

    transform: rotate(4deg);
}

.scrap-one img {
    aspect-ratio: 4 / 5;
}

/* =========================================================
   POETRY
========================================================= */

.poetry-layout {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 210px;

    gap: 45px;
}

.poem-column {
    display: flex;
    flex-direction: column;
    gap: 38px;
}

.poem {
    position: relative;

    padding: 18px 26px 20px;

    background: rgba(255,255,255,.34);

    border-left: 5px solid var(--orange);

    box-shadow: 5px 6px 0 rgba(106,64,41,.12);
}

.poem:nth-child(2) {
    border-left-color: var(--green);
    transform: rotate(.7deg);
}

.poem h2 {
    margin: 0 0 15px;

    color: var(--brown);

    font: 700 25px "Playfair Display", Georgia, serif;
}

.poem p:not(.meta) {
    margin: 0 0 18px;

    font: 17px/1.75 "Patrick Hand", cursive;
}

.scrap-two {
    width: 195px;

    align-self: start;

    transform: rotate(4deg);
}

.scrap-two img {
    aspect-ratio: 3 / 4;
}

/* =========================================================
   NOTES BOARD
========================================================= */

.notes-board {
    position: relative;

    min-height: 520px;
}

.sticky {
    position: absolute;

    width: 245px;

    min-height: 175px;

    padding: 23px 25px 22px;

    border: 2px solid var(--brown);

    box-shadow: 7px 8px 0 var(--shadow);
}

.sticky::before {
    content: "";

    position: absolute;

    top: -10px;
    left: 50%;

    width: 60px;
    height: 19px;

    transform: translateX(-50%) rotate(-2deg);

    background: rgba(211,169,78,.65);
}

.sticky h2 {
    margin: 0 0 10px;

    font: 700 24px "Playfair Display", Georgia, serif;
}

.sticky p,
.sticky li {
    font: 15px/1.45 "Patrick Hand", cursive;
}

.sticky ul {
    margin: 0;
    padding-left: 21px;
}

.pin {
    position: absolute;

    top: 8px;
    right: 11px;

    color: var(--orange);

    font-size: 18px;
}

.yellow {
    top: 5px;
    left: 35px;

    background: #f2d779;

    transform: rotate(-3deg);
}

.pink {
    top: 30px;
    right: 55px;

    background: #e0aaa0;

    transform: rotate(3deg);
}

.green {
    left: 245px;
    bottom: 18px;

    background: #bdc39a;

    transform: rotate(1.5deg);
}

.lined-note {
    position: absolute;

    right: 20px;
    bottom: 5px;

    width: 275px;

    padding: 22px 27px;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 25px,
            rgba(120,147,154,.20) 26px,
            transparent 27px
        ),
        #fff8dc;

    border: 2px solid var(--brown);

    box-shadow: 7px 8px 0 var(--paper-dark);

    transform: rotate(-2deg);
}

.lined-note h2 {
    margin: 0 0 12px;

    color: var(--orange);

    font: 700 24px "Playfair Display", Georgia, serif;
}

.lined-note p {
    margin: 0;

    font: 16px/1.7 "Patrick Hand", cursive;
}

/* =========================================================
   ABOUT
========================================================= */

.about-layout {
    display: grid;

    grid-template-columns: 1fr 220px;

    gap: 50px;

    align-items: start;
}

.about-copy {
    padding: 15px 25px;

    border-left: 5px solid var(--mustard);

    font-size: 16px;
    line-height: 1.75;
}

.about-copy p {
    margin: 0 0 20px;
}

.about-copy .handwritten {
    color: var(--orange);

    font: 22px "Patrick Hand", cursive;
}

.scrap-three {
    transform: rotate(-4deg);
}

.scrap-three img {
    aspect-ratio: 1 / 1;
}

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

.page-footer {
    margin: 58px auto 0;

    width: min(420px, 90%);

    padding: 10px 15px;

    border-top: 2px dashed var(--orange);

    color: var(--green);

    text-align: center;

    font: 14px "Patrick Hand", cursive;
}

.page-footer span {
    color: var(--orange);
    margin: 0 8px;
}

.notepad > footer {
    padding: 27px 20px;

    background: var(--brown);

    border-top: 7px solid var(--orange);

    color: var(--paper);

    text-align: center;
}

.notepad > footer p {
    margin: 7px;

    font: 11px "DM Mono", monospace;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .notebook-top {
        padding-left: 100px;
    }

    .tabs {
        margin-left: 14px;
        margin-right: 14px;
    }

    .tab {
        min-width: 105px;
    }

    .paper {
        padding-left: 60px;
        padding-right: 40px;
    }

    .scrap-one {
        position: relative;

        top: auto;
        right: auto;

        margin: 35px auto 0;
    }

    .poetry-layout,
    .about-layout {
        grid-template-columns: 1fr;
    }

    .scrap-two,
    .scrap-three {
        margin: 5px auto 25px;
    }

    .notes-board {
        min-height: 700px;
    }

}

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

@media (max-width: 600px) {

    .site {
        width: 96%;
        margin-top: 10px;
    }

    .notepad {
        box-shadow: 7px 8px 0 var(--brown);
    }

    .notebook-top {
        min-height: 210px;

        padding:
            50px 20px 45px 72px;
    }

    .spiral {
        left: 10px;
        width: 43px;
    }

    .spiral span {
        width: 36px;
        height: 13px;
    }

    .notebook-title {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }

    .notebook-top::after {
        font-size: 15px;
        letter-spacing: 4px;
    }

    .tiny-label {
        font-size: 8px;
    }

    .tabs {
        margin: 0;

        padding: 0 7px;

        gap: 4px;

        overflow-x: auto;

        justify-content: flex-start;
    }

    .tab {
        flex: 0 0 auto;

        min-width: auto;

        padding: 9px 12px;

        font-size: 15px;
    }

    .tab.active {
        padding-top: 12px;
    }

    .paper {
        padding:
            40px 22px 45px 34px;
    }

    .paper::before {
        background:
            repeating-linear-gradient(
                -45deg,
                var(--mustard) 0 8px,
                var(--orange) 8px 16px
            );
    }

    .page-heading h1 {
        font-size: 2.2rem;
    }

    .page-doodle {
        font-size: 30px;
    }

    .story-entry {
        grid-template-columns: 43px 1fr;

        padding-right: 12px;
    }

    .entry-content {
        padding-left: 13px;
    }

    .entry-content h2 {
        font-size: 21px;
    }

    .notes-board {
        min-height: auto;

        display: flex;
        flex-direction: column;

        gap: 28px;
    }

    .sticky,
    .lined-note {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: min(300px, 92%);

        margin: 0 auto;

        min-height: auto;
    }

    .yellow {
        transform: rotate(-2deg);
    }

    .pink {
        transform: rotate(2deg);
    }

    .green {
        transform: rotate(-1deg);
    }

    .lined-note {
        transform: rotate(1deg);
    }

    .image-scrap {
        width: min(210px, 75%);
    }

}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}