/* ================================================================
   project-arctic-field-notes.css — Colour theme for Arctic Field Notes
   All layout styles live in project-page.css.
   ================================================================ */

:root {
    --primary:    #2d6a8f;
    --accent:     #6ec6a0;
    --accent-dark:#3aaa7a;
    --cream:      #f4f7fa;
    --earth:      #1a4a6a;
    --dark-text:  #1a2535;
    --light-text: #5a6a7a;
    --border:     #d4e0ea;
}

/* ── Hero background ── */
.project-hero {
    background: linear-gradient(135deg, #ddeaf5 0%, rgba(110, 198, 160, 0.08) 100%);
}

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

.hero-image-placeholder {
    background: linear-gradient(135deg, #a0c8e4 0%, #6aabcf 100%);
}

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

/* ── Highlights section background ── */
.highlights-section {
    background: linear-gradient(135deg, #1a3a5c 0%, #2d6a8f 100%);
}

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

/* ── Overview lead with floating character 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;
    border-radius: 8px;
    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(260px, 48%);
    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(240px, 70%);
        margin: 0.25rem auto 1.25rem;
        transform: rotate(-2deg);
    }
}