/* ============================================================
   contact-styles.css — PROTOTYPE (contact.html)
   "The Document" direction: a quiet editorial one-column page in the
   same family as the Writing / Reading pages (NOT the scroll homepage).
   A white content sheet on the gray canvas, one big left-aligned H1,
   and hairline-separated rows. Loaded with styles.css only.
   ============================================================ */

/* White document sheet on the gray (#f0f0f0) body, like the Writing/Reading cards */
.contact-doc {
    max-width: 760px;
    margin: 32px auto 60px;
    padding: clamp(26px, 4vw, 48px);
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
}

/* Big confident left-aligned headline + muted sub (mirrors the Writing page) */
.contact-doc .section-header { margin-bottom: 6px; }
.contact-doc .section-header h1 {
    font-size: 2.5em;
    margin: 0 0 10px 0;
    color: #333;
    line-height: 1.15;
}
.contact-doc .section-header p {
    font-size: 1.15em;
    color: #666;
    line-height: 1.55;
    margin: 0;
    max-width: 62ch;
}

/* The three lanes: label | one-line description, separated by hairlines */
.lanes { margin-top: 24px; border-top: 1px solid #ececec; }
.lane-row {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 20px 2px;
    border-bottom: 1px solid #ececec;
}
.lane-name { font-size: 1.1em; font-weight: 600; color: #333; margin: 0; }
.lane-text { font-size: 1em; color: #555; line-height: 1.55; margin: 0; }
.lane-text a { color: #9e3a3a; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lane-text a:hover { text-decoration: underline; }

/* Close: email + social icons */
.contact-close {
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid #ececec;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.contact-email {
    font-size: 1.15em; font-weight: 600; color: #333; text-decoration: none;
    border-bottom: 2px solid #9e3a3a; padding-bottom: 2px;
}
.contact-email:hover { color: #9e3a3a; }
.contact-socials { display: flex; gap: 10px; align-items: center; }
.contact-socials a { display: inline-flex; padding: 6px; border-radius: 8px; transition: background 0.2s ease; }
.contact-socials a:hover { background: #f0f0f0; }
.contact-socials img { height: 22px; width: 22px; object-fit: contain; display: block; }

/* Skip link (this page doesn't load the Writing page's scoped a11y rules) */
.skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 300;
    background: #333; color: #fff; padding: 8px 14px; border-radius: 6px;
    text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }
.contact-doc a:focus-visible, .skip-link:focus-visible { outline: 2px solid #333; outline-offset: 2px; }

/* Small screens: stack the label above the text */
@media (max-width: 600px) {
    .contact-doc .section-header h1 { font-size: 2em; }
    .lane-row { grid-template-columns: 1fr; gap: 5px; }
    .lane-name { font-size: 1.05em; }
    .contact-socials a { padding: 11px; } /* 44px tap target on touch */
}

@media (prefers-reduced-motion: reduce) {
    .skip-link, .contact-socials a { transition: none; }
}

/* ---------- Résumé: quiet toggle in the close, reveals a Formspree capture below ---------- */
.resume-toggle {
    font: inherit;
    font-size: 0.95em;
    color: #555;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.resume-toggle:hover { color: #9e3a3a; border-bottom-color: #9e3a3a; }

.contact-resume { margin-top: 14px; }
.resume-form[hidden] { display: none; }
.resume-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.resume-form input[type="email"] {
    font: inherit;
    font-size: 0.95em;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    color: #333;
    min-width: 220px;
}
.resume-form input.invalid { border-color: #c0392b; background: #fdf3f2; }
.resume-form button[type="submit"] {
    font: inherit;
    font-size: 0.92em;
    font-weight: 600;
    padding: 8px 16px;
    background: #333;
    color: #fff;
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.resume-form button[type="submit"]:hover { background: #000; }
.resume-form button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
.resume-message { font-size: 0.85em; color: #666; margin: 8px 0 0; min-height: 1.2em; }
.resume-message.ok { color: #1a7a3a; }
.resume-message.err { color: #c0392b; }
.resume-note { flex-basis: 100%; font-size: 0.82em; color: #666; margin: 4px 0 0; }

@media (prefers-reduced-motion: reduce) {
    .resume-toggle, .resume-form button[type="submit"] { transition: none; }
}