/* camp-body design system (v1)
   sibling of 944fest's fest-body.css: same bones, forest palette.
   scoped to .camp-body so it doesn't touch the nav/hero/footer. */
/* load the display/body/label fonts. without this, devices that don't have
   anton/archivo installed locally fall back to a thin system sans-serif. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@400;500;600;700&display=swap');
@layer components {
    /* body-section palette: summer camp in the woods */
    .camp-body {
        --cb-cream: #faf6ec;
        --cb-cream-deep: #efe7d3;
        --cb-ink: #211d14;
        --cb-pine: #2e5d3a;
        --cb-pine-2: #1c3a25;
        --cb-bark: #4a3627;
        --cb-ember: #e8921f;
        --cb-mist: #dde5d8;
        --cb-sand: #d9c9a8;
        font-family: 'Archivo', system-ui, sans-serif;
        color: var(--cb-ink);
        background: var(--cb-cream);
    }

    /* typography */
    .camp-body .cb-display {
        font-family: 'Anton', 'Archivo Black', sans-serif;
        font-weight: 400;
        letter-spacing: 0.01em;
        line-height: 0.95;
        text-transform: uppercase;
    }

    .camp-body .cb-label {
        font-family: 'Archivo Narrow', 'Archivo', sans-serif;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .camp-body .cb-body {
        font-family: 'Archivo', system-ui, sans-serif;
        font-weight: 400;
        line-height: 1.55;
    }

    /* background helpers */
    .camp-body .cb-bg-cream {
        background: var(--cb-cream);
    }

    .camp-body .cb-bg-cream-deep {
        background: var(--cb-cream-deep);
    }

    .camp-body .cb-bg-ink {
        background: var(--cb-ink);
        color: #fff;
    }

    .camp-body .cb-bg-pine {
        background: var(--cb-pine);
        color: #fff;
    }

    .camp-body .cb-bg-bark {
        background: var(--cb-bark);
        color: #fff;
    }

    .camp-body .cb-bg-ember {
        background: var(--cb-ember);
        color: var(--cb-ink);
    }

    .camp-body .cb-bg-mist {
        background: var(--cb-mist);
        color: var(--cb-ink);
    }

    .camp-body .cb-bg-sand {
        background: var(--cb-sand);
        color: var(--cb-ink);
    }

    /* text color helpers */
    .camp-body .cb-t-pine {
        color: var(--cb-pine);
    }

    .camp-body .cb-t-pine-2 {
        color: var(--cb-pine-2);
    }

    .camp-body .cb-t-bark {
        color: var(--cb-bark);
    }

    .camp-body .cb-t-ember {
        color: var(--cb-ember);
    }

    .camp-body .cb-t-ink {
        color: var(--cb-ink);
    }

    .camp-body .cb-t-mute {
        color: #5f574a;
    }

    /* card & button base */
    .camp-body .cb-card,
    .camp-body .cb-btn {
        border: 2px solid var(--cb-ink);
        border-radius: 14px;
        box-shadow: 5px 5px 0 0 var(--cb-ink);
        transition: transform 150ms ease, box-shadow 150ms ease;
    }

    .camp-body .cb-card-lg {
        box-shadow: 7px 7px 0 0 var(--cb-ink);
    }

    /* card-as-button: same lift-on-hover / press-on-active as .cb-btn */
    .camp-body .cb-card.cb-pop:hover {
        transform: translate(-2px, -2px);
        box-shadow: 7px 7px 0 0 var(--cb-ink);
    }

    .camp-body .cb-card.cb-pop:active {
        transform: translate(0, 0);
        box-shadow: 2px 2px 0 0 var(--cb-ink);
    }

    /* button styles */
    .camp-body .cb-btn {
        display: inline-block;
        padding: 0.85rem 1.4rem;
        font-family: 'Anton', sans-serif;
        font-size: 1.05rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .camp-body .cb-btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: 7px 7px 0 0 var(--cb-ink);
    }

    .camp-body .cb-btn:active {
        transform: translate(0, 0);
        box-shadow: 2px 2px 0 0 var(--cb-ink);
    }

    .camp-body .cb-btn-pine {
        background: var(--cb-pine);
        color: #fff;
    }

    .camp-body .cb-btn-cream {
        background: var(--cb-cream);
        color: var(--cb-ink);
    }

    .camp-body .cb-btn-ember {
        background: var(--cb-ember);
        color: var(--cb-ink);
    }

    /* divider stripe */
    .camp-body .cb-stripe {
        background: var(--cb-ink);
    }

    /* section rhythm variant, tight top.
   use on a section that stacks directly below another full-padding section,
   so they visually group rather than each contributing equal vertical space. */
    .camp-body .cb-section-tight-top {
        padding-top: clamp(2.5rem, 5vw, 3.5rem);
        padding-bottom: clamp(5rem, 10vw, 7rem);
    }

    /* grid/paper texture for placeholders */
    .camp-body .cb-grid-bg {
        background-image: linear-gradient(0deg, transparent 24%, rgba(0,0,0,.05) 25%, rgba(0,0,0,.05) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.05) 76%, transparent 77%),
        linear-gradient(90deg, transparent 24%, rgba(0,0,0,.05) 25%, rgba(0,0,0,.05) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.05) 76%, transparent 77%);
        background-size: 40px 40px;
    }
}