/* ================================
   TrunkMonkey.life — Latest Drop
   Brings the steamer-trunk identity to the listing page.
   Layers on top of styles.css (link this second).
   North Star: "The Postcard from the Road" — each post is a
   postcard; the newest one gets the postmark stamp.
   ================================ */

/* ================================
   Warm the ground out of flat gray toward the trunk's own world
   ================================ */
body.latest-drop-page {
    /* Warm paper with faint grain, tinted toward the leather hue */
    background:
        radial-gradient(circle at 18% 22%, rgba(122, 92, 58, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 82% 64%, rgba(122, 92, 58, 0.04) 1px, transparent 1px),
        #efe8db;
    background-size: 5px 5px, 7px 7px, 100% 100%;
}

/* Wordmark joins the All-Serif world */
.latest-drop-page .site-header h1 {
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -0.01em;
}

/* ================================
   Section title — the open trunk lid
   Leather band + dashed stitching + Fraunces, echoing the homepage
   ================================ */
.latest-drop-page .blog-posts > h2 {
    position: relative;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 400;
    text-align: center;
    text-wrap: balance;
    color: #f3ead9; /* light cream — clears AA on leather (6.3:1) */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    margin: 0 0 52px;
    padding: 30px 28px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 25% 35%, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(145deg, #7a5c3a 0%, #6b4e2a 50%, #5d4324 100%);
    background-size: 5px 5px, 100% 100%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.18);
}

/* Stitched inner border on the lid */
.latest-drop-page .blog-posts > h2::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 2px dashed rgba(212, 196, 160, 0.5); /* stitch-tan #d4c4a0 */
    border-radius: 4px;
    pointer-events: none;
}

/* ================================
   Post cards — postcards on the trunk
   ================================ */
.latest-drop-page .post-card {
    border: 1px solid rgba(122, 92, 58, 0.18);
}

.latest-drop-page .post-content h3 {
    font-family: 'Fraunces', Georgia, serif;
    text-wrap: balance;
}

/* Location meta gets a warm leather tone instead of plain gray-italic */
.latest-drop-page .post-meta {
    color: #7a5c3a; /* leather-light */
}

/* ================================
   Featured latest — the stamped postcard
   Larger, always visible, wears the "LATEST" postmark
   ================================ */
.latest-drop-page .post-card--featured {
    position: relative;
    border: 2px solid rgba(168, 65, 42, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.latest-drop-page .post-card--featured .post-image {
    height: 420px;
}

.latest-drop-page .post-card--featured .post-content {
    padding: 40px;
}

.latest-drop-page .post-card--featured .post-content h3 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom: 0.35em;
}

.latest-drop-page .post-card--featured .post-excerpt {
    font-size: 1.2em;
}

/* The postmark stamp — sits on the card, rotated like a hand-pressed mark.
   Placed on the article (not inside overflow:hidden .post-image) so it isn't clipped. */
.latest-drop-page .post-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a8412a;
    background: rgba(248, 246, 240, 0.94);
    padding: 8px 15px;
    border: 2px solid #a8412a;
    border-radius: 4px;
    transform: rotate(-4deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

/* ================================
   About & Contact — carry the identity through
   ================================ */
.latest-drop-page .about-section,
.latest-drop-page .contact-section {
    position: relative;
    background: #f8f6f0; /* sticker cream instead of flat white */
    border: 1px solid rgba(122, 92, 58, 0.18);
}

.latest-drop-page .about-section h2,
.latest-drop-page .contact-section h2 {
    font-family: 'Fraunces', Georgia, serif;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 768px) {
    .latest-drop-page .blog-posts > h2 {
        padding: 22px 18px;
        margin-bottom: 36px;
    }

    .latest-drop-page .post-card--featured .post-image {
        height: 240px;
    }

    .latest-drop-page .post-card--featured .post-content {
        padding: 24px;
    }

    .latest-drop-page .post-badge {
        font-size: 0.7rem;
        padding: 6px 12px;
    }
}