/* Correspondence on warm paper, using the existing Bolewska typography. */
.contact-section {
    --contact-paper: #f8f3e8;
    --contact-sheet: #fffdf8;
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--contact-paper);
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(5rem, 8vw, 8rem);
    border-top-color: rgba(var(--color-primary-rgb), 0.12);
}

.contact-section::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.contact-section::before {
    inset: 0;
    background: url('../img/contact-paper.svg') repeat;
    opacity: 0.45;
}

.contact-ornament {
    position: absolute;
    z-index: 1;
    color: var(--color-secondary);
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-ornament path {
    vector-effect: non-scaling-stroke;
}

.contact-pen-line {
    top: 3rem;
    left: calc(max(0px, (100% - 1240px) / 2) - clamp(130px, 15vw, 230px) + 0.75rem);
    width: clamp(130px, 15vw, 230px);
    height: 760px;
    opacity: 0.46;
}

.contact-envelope {
    right: max(1rem, calc((100% - 1240px) / 2 - 3rem));
    bottom: 0.6rem;
    width: clamp(130px, 15vw, 205px);
    height: auto;
    opacity: 0.55;
    transform: rotate(9deg);
}

.contact-section .contact-container {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.contact-section .contact-info,
.contact-section .contact-container > * {
    min-width: 0;
}

.contact-section .contact-portrait {
    position: relative;
    width: calc(100% - 1rem);
    max-width: 480px;
    margin: 0 0 clamp(2rem, 3vw, 3rem) 0.4rem;
}

.contact-portrait-letter {
    z-index: 0;
    top: -5rem;
    right: -5.5rem;
    width: 260px;
    height: auto;
    opacity: 0.6;
    transform: rotate(12deg);
}

.contact-section .contact-image-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.65rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.14);
    border-radius: 2px;
    background: var(--contact-sheet);
    box-shadow: 0 3px 5px rgba(54, 47, 33, 0.06), 0 16px 32px rgba(54, 47, 33, 0.12);
    transform: rotate(-2deg);
}

.contact-section .contact-author-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 55% 0%;
}

.contact-section .contact-title {
    font-size: clamp(2rem, 3.5vw, 3.15rem);
    margin-bottom: 1.25rem;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.contact-section .contact-description {
    max-width: 48ch;
    margin-bottom: 1.75rem;
}

.contact-section .contact-details {
    margin-bottom: 1.5rem;
}

.contact-section .contact-detail-card {
    background: rgba(255, 253, 248, 0.76);
    border-color: rgba(var(--color-primary-rgb), 0.18);
    padding: 1rem 1.15rem;
}

.contact-section .contact-detail-content {
    min-width: 0;
}

.contact-section .contact-detail-value {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.contact-section .contact-social-buttons {
    gap: 0.75rem;
}

.contact-section .contact-social-btn {
    min-height: 48px;
    background: rgba(255, 253, 248, 0.6);
    border-color: rgba(var(--color-primary-rgb), 0.22);
    padding: 0.65rem 1rem;
}

.contact-section .contact-social-btn:hover {
    background: var(--color-primary);
}

.contact-section .contact-form-card {
    position: relative;
    background: var(--contact-sheet);
    border-color: rgba(var(--color-primary-rgb), 0.2);
    border-radius: 2px;
    padding: clamp(1.5rem, 3.2vw, 3rem);
    box-shadow: 0 2px 4px rgba(54, 47, 33, 0.04), 0 18px 40px rgba(54, 47, 33, 0.08), 7px 8px 0 -1px #eee7d8, 7px 8px 0 rgba(var(--color-primary-rgb), 0.16);
}

.contact-section .contact-form-title {
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    line-height: 1.4;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.16);
}

.contact-section .contact-form,
.contact-section .wpcf7-form {
    gap: 1.25rem;
}

.contact-section .contact-input,
.contact-section .contact-select,
.contact-section .contact-textarea {
    min-height: 50px;
    font-size: 1rem;
    background-color: #f8f6ef;
    border-color: #d4d7c9;
}

.contact-section .contact-input::placeholder,
.contact-section .contact-textarea::placeholder {
    color: #72796a;
}

.contact-section .contact-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23485444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.contact-section .contact-textarea {
    height: clamp(180px, 18vw, 220px);
    min-height: 180px;
}

.contact-section .contact-input:focus,
.contact-section .contact-select:focus,
.contact-section .contact-textarea:focus {
    background-color: var(--contact-sheet);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.contact-section a:focus-visible,
.contact-section button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.contact-section .contact-submit-btn {
    min-height: 52px;
}

@media (max-width: 991px) {
    .contact-section .contact-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
    }

    .contact-section .contact-portrait {
        max-width: 440px;
    }

    .contact-envelope {
        right: 1rem;
        width: 150px;
    }
}

@media (max-width: 576px) {
    .contact-section {
        padding: 3rem 0 5.5rem;
    }

    .contact-section .contact-container {
        padding-inline: 1.25rem;
        gap: 2.25rem;
    }

    .contact-section .contact-image-wrapper {
        padding: 0.5rem;
    }

    .contact-section .contact-portrait {
        margin-bottom: 2rem;
    }

    .contact-portrait-letter {
        top: -3.5rem;
        right: -1rem;
        width: 160px;
    }

    .contact-section .contact-title {
        font-size: clamp(1.8rem, 7vw, 2.25rem);
    }

    .contact-section .contact-description {
        font-size: 1rem;
    }

    .contact-section .contact-form-card {
        padding: 1.5rem 1.15rem;
        box-shadow: 0 12px 28px rgba(54, 47, 33, 0.07), 4px 5px 0 -1px #eee7d8, 4px 5px 0 rgba(var(--color-primary-rgb), 0.16);
    }

    .contact-section .contact-form-title {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .contact-section .contact-social-btn {
        white-space: normal;
        text-align: center;
    }

    .contact-pen-line {
        left: -6.5rem;
        top: 1rem;
        width: 130px;
        height: 400px;
        opacity: 0.35;
    }

    .contact-envelope {
        bottom: 0.2rem;
        width: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-section .contact-author-image,
    .contact-section .contact-detail-card,
    .contact-section .contact-social-btn,
    .contact-section .contact-submit-btn {
        transition: none;
    }

    .contact-section .contact-author-image:hover,
    .contact-section .contact-detail-card:hover,
    .contact-section .contact-social-btn:hover {
        transform: none;
    }
}