/* ================================================================
   project-childrens-day.css — Colour theme for Children's Day
   All layout styles live in project-page.css.
   ================================================================ */

:root {
    --primary:    #4a7c9f;
    --accent:     #e8875a;
    --accent-dark:#d06840;
    --cream:      #faf8f3;
    --earth:      #7a6855;
    --dark-text:  #2c2c2c;
    --light-text: #666;
    --border:     #e8e4df;
}

/* ── Hero background ── */
.project-hero {
    background: linear-gradient(135deg, #e0edf5 0%, rgba(244, 197, 66, 0.1) 100%);
}

.hero-image-wrap {
    background: linear-gradient(135deg, #c8dce8 0%, #a8c4d8 100%);
}

.hero-image-placeholder {
    background: linear-gradient(135deg, #b8d4e8 0%, #90b8d0 100%);
}

/* ── Gallery image backgrounds ── */
.gallery-img {
    background: linear-gradient(135deg, #c8dce8 0%, #a8c4d8 100%);
}

#visuals .gallery-item.wide {
    grid-column: 1 / -1;
}

/* ── Highlights section background ── */
.highlights-section {
    background: linear-gradient(135deg, var(--primary) 0%, rgba(74, 124, 159, 0.85) 100%);
}

/* ── CTA section background ── */
.cta-section {
    background: #fff;
}

/* ── Highlights checkmark colour (yellow accent for this project) ── */
.highlights-list li::before {
    color: #f4c542;
}

/* ── Overview lead with floating illustrations ── */
.about-grid {
    grid-template-columns: 1fr;
    max-width: 820px;
}

.about-lead {
    margin-bottom: 1.2rem;
}

.about-lead::after {
    content: "";
    display: table;
    clear: both;
}

.about-lead p {
    margin-bottom: 0;
}

.about-lead-illust {
    float: right;
    width: min(240px, 44%);
    height: auto;
    margin: -0.35rem -0.4rem 0.75rem 1.25rem;
    shape-outside: margin-box;
    transform: rotate(6deg);
    transform-origin: center;
    user-select: none;
    pointer-events: none;
}

.about-lead--alt .about-lead-illust {
    float: left;
    width: min(273px, 50.4%);
    margin: -0.2rem 1.35rem 0.75rem -0.35rem;
    transform: rotate(-3deg);
}

@media (max-width: 768px) {
    .about-lead-illust {
        float: none;
        display: block;
        width: min(200px, 55%);
        margin: 0.25rem auto 1.25rem;
        transform: rotate(4deg);
    }

    .about-lead--alt .about-lead-illust {
        float: none;
        width: min(252px, 73.5%);
        margin: 0.25rem auto 1.25rem;
        transform: rotate(-2deg);
    }
}