:root {
    --paper-bg: #e5d8b5;
    --paper-light: #f4ecd3;
    --paper-dark: #cbb98d;

    --ink: #24221e;
    --ink-soft: #4b463d;

    --accent: #9c421b;

    --border: #2b2924;
}


/* ==========================
   BASE
========================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    padding: 20px;
    max-width: 1000px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(
            ellipse at top left,
            rgba(255,255,255,0.45),
            transparent 45%
        ),
        radial-gradient(
            ellipse at bottom right,
            rgba(80,60,20,0.12),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            var(--paper-bg),
            var(--paper-dark)
        );

    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}


/* ==========================
   JOURNAL
========================== */

.journal-container {

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.25),
            transparent 35%
        ),
        var(--paper-light);

    border:
        4px double var(--border);

    padding: 25px;
    box-shadow:
        inset 0 0 40px rgba(70,50,20,0.12),
        0 8px 20px rgba(0,0,0,0.15);
}


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

.journal-header {
    text-align: center;
    border-bottom:
        3px solid var(--border);
    padding-bottom: 15px;
    margin-bottom: 25px;
}


.journal-meta-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-family:
        "Times New Roman",
        Times,
        serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom:
        1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 15px;
}



/* ==========================
   IMAGE EUROPE
========================== */

.journal-banner-img {
    display: block;
    margin: 15px auto;
    width: 180px;
    max-width: 100%;
    filter:
        sepia(0.45)
        contrast(1.05);
    mix-blend-mode: multiply;
}



/* ==========================
   TITRES
========================== */

h1,
h2 {
    font-family:
        "Times New Roman",
        Times,
        serif;
    color: var(--ink);
}


h1 {
    font-size: 2.4rem;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin: 15px 0;
}



.subtitle {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 1.1rem;
}



/* ==========================
   CONTENU ARTICLE
========================== */


.journal-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}



.journal-section {
    break-inside: avoid;
}



h2 {
    color:
        var(--accent);
    font-size:
        1.35rem;
    border-bottom:
        1px dashed var(--border);
    padding-bottom:
        6px;
    margin-bottom:
        12px;
}



p {
    font-size:
        1.05rem;
    text-align:
        justify;
    margin-top:
        0;
    margin-bottom:
        18px;
    text-indent:
        20px;
}



/* Lettrine */
.journal-section:first-child
p:first-of-type::first-letter {
    float: left;
    font-family:
        "Times New Roman",
        Times,
        serif;
    font-size:
        3rem;
    line-height:
        0.85;
    font-weight:
        bold;
    margin-right:
        8px;
    color:
        var(--ink);

}



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


.journal-footer {
    margin-top:
        30px;
    padding-top:
        10px;
    border-top:
        1px solid var(--border);
    display:
        flex;
    justify-content:
        space-between;
    flex-wrap:
        wrap;
    gap:
        10px;
    font-family:
        "Times New Roman",
        Times,
        serif;
    font-size:
        0.85rem;
    text-transform:
        uppercase;
}



/* ==========================
   TABLETTE
========================== */

@media (min-width:600px) {
    body {
        padding:
            30px;
    }

    .journal-container {
        padding:
            35px;
    }


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

    .journal-section-full {
        grid-column:
            span 2;
    }

}



/* ==========================
   DESKTOP
========================== */


@media (min-width:900px) {
    h1 {
        font-size:
            3rem;
    }

    .journal-banner-img {
        width:
            220px;
    }

}