/* =========================================================
   THE HIDDEN SHED — CONTENT PAGES
   Bestand: css/pages.css
========================================================= */


/* =========================
   BASIS
========================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.journal-page {
    min-height: 100vh;
    margin: 0;

    color: #eadcbc;
    font-family: "Crimson Text", serif;

    background:
        radial-gradient(
            ellipse at 50% -12%,
            rgba(210, 154, 73, 0.13) 0%,
            rgba(122, 78, 34, 0.07) 30%,
            transparent 62%
        ),
        #150e0a;

   
}


/* Warme lichtval vanaf boven */

body.journal-page::before {
    content: "";

    position: fixed;
    top: -280px;
    left: 50%;

    width: 1100px;
    height: 780px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(255, 219, 143, 0.08) 0%,
            rgba(219, 157, 72, 0.04) 42%,
            transparent 74%
        );

    pointer-events: none;
    z-index: 0;
}


/* Zorg dat alle inhoud boven de achtergrond blijft */

.journal-header,
.journal-layout,
.page-footer {
    position: relative;
    z-index: 10;
}


/* =========================
   STOFDEELTJES
========================= */

#dust-container {
    position: fixed;
    inset: 0;

    overflow: hidden;
    pointer-events: none;

    z-index: 6;
}

.dust {
    position: absolute;

    border-radius: 50%;
    background: #e9c98b;

    opacity: 0.14;

    box-shadow:
        0 0 4px rgba(240, 198, 120, 0.18);

    animation:
        float-dust linear infinite;
}

@keyframes float-dust {
    0% {
        transform:
            translateY(108vh)
            translateX(0);

        opacity: 0;
    }

    15% {
        opacity: 0.11;
    }

    50% {
        opacity: 0.17;
    }

    85% {
        opacity: 0.10;
    }

    100% {
        transform:
            translateY(-16vh)
            translateX(65px);

        opacity: 0;
    }
}


/* =========================
   HEADER
========================= */

.journal-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 32px 20px;
}


/* =========================
   BOVENNAVIGATIE
========================= */

.top-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* Terugknop */

.return-button {
    display: inline-flex;
    align-items: center;

    padding: 11px 18px;

    color: #f0ddb7;
    background:
        linear-gradient(
            180deg,
            #56371f,
            #3f2818
        );

    border: 1px solid #80603b;
    border-radius: 4px;

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px rgba(255, 255, 255, 0.05);

    font-family: "Cinzel", serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
}

.return-button:hover {
    background:
        linear-gradient(
            180deg,
            #6a4629,
            #4d301c
        );

    border-color: #aa7b47;

    transform: translateX(-3px);
}


/* Navigatie naar andere verzamelingen */

.collection-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 16px;
}

.collection-navigation a {
    position: relative;

    padding: 4px 0;

    color: #a98f67;
    text-decoration: none;

    transition:
        color 0.2s ease;
}

.collection-navigation a:hover,
.collection-navigation a.active {
    color: #efd8aa;
}

.collection-navigation a.active::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background: #b88c50;
}


/* =========================
   PAGINATITEL
========================= */

.journal-heading {
    margin-top: 55px;

    text-align: center;
}

.journal-label {
    margin: 0 0 8px;

    color: #a98a59;

    font-family: "Cinzel", serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.journal-heading h1 {
    margin: 0;

    color: #f0dfbc;

    font-family: "Cinzel", serif;
    font-size: clamp(2.5rem, 6vw, 4.8rem);
    line-height: 1.05;
    letter-spacing: 0.04em;

    text-shadow:
        0 3px 2px rgba(0, 0, 0, 0.9),
        0 8px 22px rgba(0, 0, 0, 0.72),
        0 0 12px rgba(255, 205, 120, 0.08);
}

.journal-introduction {
    max-width: 760px;
    margin: 22px auto 0;

    color: #c7b18a;

    font-size: 1.18rem;
    font-style: italic;
    line-height: 1.55;
}


/* =========================
   HOOFDINDELING
========================= */

.journal-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 760px);
    justify-content: center;

    gap: 52px;

    max-width: 1280px;
    margin: 25px auto 0;
    padding: 30px 32px 90px;
}


/* =========================
   LINKERMENU
========================= */

.journal-index {
    align-self: start;

    position: sticky;
    top: 24px;

    padding: 22px 20px;

    background:
        linear-gradient(
            180deg,
            rgba(57, 37, 23, 0.93),
            rgba(40, 26, 17, 0.93)
        );

    border: 1px solid rgba(225, 191, 132, 0.12);
    border-radius: 5px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.32),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.index-heading {
    margin: 0 0 15px;

    color: #d6b980;

    font-family: "Cinzel", serif;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#post-menu {
    display: flex;
    flex-direction: column;
}


/* Menu-item */

.entry-link {
    display: grid;
    grid-template-columns: 34px 1fr 4px;
    align-items: center;

    gap: 4px;

    width: 100%;
    padding: 10px 8px;

    color: #b9a27c;
    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);

    font-family: "Crimson Text", serif;
    font-size: 1.05rem;
    text-align: left;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        padding-left 0.2s ease;
}

.entry-link span {
    color: #7e694c;
    font-size: 0.76rem;
}

.entry-link:hover {
    color: #f0ddb6;
    background: rgba(255, 255, 255, 0.025);

    padding-left: 12px;
}

.entry-link.active {
    color: #f1deb5;
    background: rgba(183, 133, 65, 0.11);

    padding-left: 12px;
}

.entry-link.active::after {
    content: "";

    width: 3px;
    height: 60%;

    justify-self: end;

    background: #bb8d4d;
    border-radius: 2px;
}


/* =========================
   ARTIKELKOLOM
========================= */

.journal-content {
    min-width: 0;
}


/* =========================
   OUD PERKAMENT
========================= */

.journal-entry {
    position: relative;
    
    width: 100%;

    min-height: 520px;
    height: auto;

    padding: clamp(28px, 5vw, 54px);

    color: #38281b;

    background:
        linear-gradient(
            135deg,
            rgba(237, 222, 184, 0.98),
            rgba(200, 175, 124, 0.98)
        );

    border: 1px solid rgba(73, 47, 24, 0.42);
    border-radius: 5px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.48),
        inset 0 0 38px rgba(85, 50, 20, 0.12);

    overflow: visible;
    
    
}

.journal-entry img {
    display: block;

    width: 100%;
    max-width: 620px;
    height: auto;

    margin: 28px auto;

    border: 1px solid rgba(61, 40, 20, 0.35);
    border-radius: 4px;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.3);
}


/* Subtiele papierstructuur */

.journal-entry::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(78, 49, 20, 0.035) 0.8px,
            transparent 0.8px
        ),
        radial-gradient(
            rgba(255, 249, 225, 0.025) 0.7px,
            transparent 0.7px
        );

    background-position:
        0 0,
        7px 9px;

    background-size:
        13px 13px,
        19px 19px;

    pointer-events: none;

    opacity: 0.5;
}


/* Donkere, verweerde rand */

.journal-entry::after {
    content: "";

    position: absolute;
    inset: 0;

    box-shadow:
        inset 0 0 35px rgba(68, 38, 14, 0.14);

    pointer-events: none;
}


/* Artikelinhoud boven papierstructuur */

.journal-entry > * {
    position: relative;
    z-index: 1;
}


/* =========================
   MARKDOWN-TYPOGRAFIE
========================= */

.journal-entry h1,
.journal-entry h2,
.journal-entry h3 {
    font-family: "Cinzel", serif;
}

.journal-entry h1 {
    margin: 0 0 8px;

    color: #eee2c6;

    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: 0.04em;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.72),
        0 8px 12px rgba(74, 45, 22, 0.30);
}

.journal-entry h2 {
    margin: 32px 0 8px;

    color: #49341f;

    font-size: 1.3rem;
}

.journal-entry h3 {
    margin: 26px 0 7px;

    color: #4c3621;

    font-size: 1.05rem;
}

.journal-entry p {
    max-width: 68ch;

    margin: 0 0 16px;

    font-size: 1.08rem;
    line-height: 1.65;
}

.journal-entry em {
    color: #705539;
}

.journal-entry strong {
    color: #3d2919;
}

.journal-entry a {
    color: #714d25;
}

.journal-entry a:hover {
    color: #4f3016;
}


/* Lijsten */

.journal-entry ul,
.journal-entry ol {
    margin: 10px 0 20px 24px;
}

.journal-entry li {
    margin-bottom: 7px;
}


/* Afbeeldingen */

.journal-entry img {
    display: block;

    width: 100%;
    max-width: 620px;
    height: auto;

    margin: 28px auto;

    border: 1px solid rgba(61, 40, 20, 0.35);
    border-radius: 4px;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.30);
}


/* Markdown-scheidingslijn */

.journal-entry hr {
    height: 1px;
    margin: 32px 0;

    background: rgba(72, 46, 23, 0.22);
    border: 0;
}


/* Citaten */

.journal-entry blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 22px;

    color: #665033;
    border-left: 3px solid rgba(107, 72, 35, 0.42);

    font-style: italic;
}


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

.page-footer {
    padding: 10px 20px 45px;

    color: #8f7a5b;

    font-style: italic;
    text-align: center;
}


/* =========================
   MOBIEL
========================= */

@media (max-width: 850px) {

    .journal-header {
        padding-right: 22px;
        padding-left: 22px;
    }

    .top-navigation {
        align-items: flex-start;
        flex-direction: column;
    }

    .collection-navigation {
        justify-content: flex-start;
        gap: 11px 17px;
    }

    .journal-heading {
        margin-top: 42px;
        text-align: left;
    }

    .journal-introduction {
        margin-left: 0;
    }

    .journal-layout {
        grid-template-columns: 1fr;

        gap: 28px;

        padding-right: 22px;
        padding-left: 22px;
    }

    .journal-index {
        position: static;
    }

    .journal-entry {
        min-height: 0;
    }

}


/* Kleinere telefoons */

@media (max-width: 520px) {

    .journal-heading h1 {
        font-size: 2.35rem;
    }

    .return-button {
        padding: 10px 14px;
        font-size: 0.74rem;
    }

    .journal-entry {
        padding: 27px 23px;
    }

    .journal-entry h1 {
        font-size: 2.1rem;
    }

}