/*
 * DMP DESIGN TOKENS
 * ---------------------------------------------------------------
 * This file contains visual parameters only.
 *
 * Safe to edit when you want to adjust:
 * - colors
 * - typography
 * - spacing
 * - container width
 * - navigation appearance
 *
 * Do not put layout logic or component-specific rules here.
 * Responsive behavior belongs to responsive-media-lightbox.css
 * and component structure remains in main.css.
 */

:root {
    /* Colors */
    --ink: #161616;
    --paper: #f4f3ef;
    --surface: #e6e4dd;
    --quiet: #696862;
    --line: rgba(22, 22, 22, 0.22);

    /* Typography */
    --font-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-strong: 600;
    --font-weight-bold: 700;

    /* Typography scale */
    --display: clamp(3rem, 7.4vw, 8.25rem);
    --h2: clamp(2.1rem, 4.4vw, 5rem);
    --body: clamp(1rem, 1.2vw, 1.18rem);

    /* Spacing */
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: clamp(4rem, 8vw, 9rem);
    --space-6: clamp(6rem, 12vw, 14rem);

    /* Container */
    --container-max: 90rem;
    --container-gutter: 3rem;

    /* Navigation */
    --nav-height: 5.4rem;
    --nav-condensed-height: 3.6rem;
    --nav-bg: rgba(244, 243, 239, .78);
    --nav-bg-expanded: rgba(244, 243, 239, .96);
    --nav-transition: 220ms ease;
}


.contact-form__field,
.contact-form__field input,
.contact-form__field textarea {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1100px) {
    .site-header__actions { margin-left: auto; }
    .menu-toggle { display: inline-flex; }

    .main-navigation {
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        left: auto;
        right: 1rem;
        max-height: 0;
        overflow: hidden;
        position: absolute;
        top: 100%;
        transition: max-height .3s ease, box-shadow .3s ease;
        width: min(100% - 2rem, min(100vw - 2rem, 24rem));
        z-index: 20;
    }

    .main-navigation > a {
        border-top: 1px solid var(--line);
        font-size: 1rem;
        padding: 1rem;
    }

    .main-navigation__cta {
        background: transparent;
        color: var(--ink);
    }

    .site-header.is-menu-open .main-navigation {
        box-shadow: 0 12px 28px rgba(22,22,22,.08);
        max-height: 28rem;
    }

    .site-header.is-menu-open .menu-toggle__lines i:first-child {
        transform: translateY(2.5px) rotate(45deg);
    }

    .site-header.is-menu-open .menu-toggle__lines i:last-child {
        transform: translateY(-2.5px) rotate(-45deg);
    }
}

@media (max-width: 1100px) and (min-width: 761px) {
    :root {
        --container-gutter: 2rem;
        --body: clamp(1rem, 1.4vw, 1.08rem);
        --display: clamp(3rem, 7vw, 6rem);
        --h2: clamp(2rem, 5vw, 3.8rem);
        --space-6: clamp(4rem, 8vw, 7rem);
    }
}

@media (max-width: 760px) {
    :root {
        --container-gutter: 1rem;
        --body: 1rem;
        --display: clamp(2.35rem, 12vw, 4.2rem);
        --h2: clamp(1.9rem, 9vw, 3.2rem);
        --space-6: clamp(3.5rem, 10vw, 6rem);
    }
}