/* Public Contact page: an "about me" card next to the message form. Uses variables from index.css. */

.contact-page {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 56px var(--pad) 96px;
}

.page-head {
    margin-bottom: 32px;
}

.eyebrow {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 60px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
}

.page-lead {
    margin-top: 10px;
    max-width: 620px;
    color: var(--text-dim);
}

/* About card and form side by side; align-items: stretch keeps both cards the same height. */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.about-card,
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* about me: portrait photo on the left filling the card's full height (trimmed from the bottom, so the
   face stays in view), the text beside it. The card is as tall as the form next to it. */
.about-card {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
}

.about-photo-wrap {
    position: relative;
    min-height: 420px;
    background: var(--surface-3);
}

.about-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.about-photo.is-placeholder {
    object-fit: contain;
    padding: 22% 20%;
    opacity: 0.35;
    filter: grayscale(1);
}

.about-body {
    padding: 22px 24px 26px;
}

.about-body h2,
.form-card h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.about-name {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}

.about-bio {
    max-width: 68ch;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-dim);
    line-height: 1.6;
}

.about-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.about-facts dt {
    font-weight: 700;
    color: var(--text-muted);
}

.about-facts dd {
    margin: 0;
}

.contact-socials {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.contact-socials h3 {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.contact-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.contact-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.contact-social:hover {
    color: var(--primary);
    border-color: rgba(174, 232, 117, 0.5);
    background: var(--primary-soft);
}

/* the form */
.form-card {
    padding: 24px;
}

.form-card h2 {
    margin-bottom: 16px;
}

.cf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.cf-field > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cf-field > span small {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.cf-field input,
.cf-field select,
.cf-field textarea {
    width: 100%;
    padding: 11px 13px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color-scheme: dark;
}

.cf-field textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
    outline: none;
    border-color: rgba(174, 232, 117, 0.5);
}

.cf-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.takedown {
    margin-top: 22px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.takedown h3 {
    margin: 0 0 6px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.takedown p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.takedown a {
    color: var(--primary);
}

.cf-count {
    align-self: flex-end;
    font-size: 12px;
    color: var(--text-muted);
}

/* Off-screen (not display:none, which some bots skip) - see the note in contact.html. */
.cf-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-status {
    margin: 4px 0 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    background: var(--primary-soft);
    border: 1px solid rgba(174, 232, 117, 0.35);
    color: var(--primary);
}

.cf-status.is-error {
    background: rgba(255, 122, 122, 0.08);
    border-color: rgba(255, 122, 122, 0.35);
    color: #ff7a7a;
}

.form-card .btn-primary {
    min-width: 170px;
}

.form-card .btn-primary:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* (side by side only where each card keeps room: the about card is a 276px photo plus its text, and between 860 and 1100px the text was left
   a column of about 90px - the facts and the photo takedown note ran down the page a few letters wide) */
@media (max-width: 1100px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .contact-page {
        padding-top: 36px;
    }

    .form-card,
    .about-body {
        padding: 18px;
    }
}

/* On a phone the photo goes on top, full width, instead of beside the text. */
@media (max-width: 560px) {
    .about-card {
        grid-template-columns: minmax(0, 1fr);
    }

    /* (a banner, not a whole screen: 380px of photo pushed the text and the form two screens down) */
    .about-photo-wrap {
        min-height: 0;
        height: min(300px, 70vw);
    }
}