@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,700;1,8..60,700&display=swap');

:root {
    --ink: #0E1B2C; --ink-soft: #2B3A4E;
    --paper: #FFFFFF; --paper-soft: #F5F5F5;
    --accent: #D14C2A; --accent-deep: #A83817;
    --rule: rgba(14,27,44,0.12); --rule-strong: rgba(14,27,44,0.22);
    --positive: #0B6E4F;
    --radius-sharp: 2px; --radius-pill: 999px;
    --duration-fast: 150ms; --duration-base: 220ms;
    --ease-standard: cubic-bezier(0.4,0,0.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

/* ── Brand ───────────────────────────────────────────────── */
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.brand-icon { display: flex; align-items: center; }
.brand-name { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: 1.1rem; font-weight: 700; }

/* ── Main layout ─────────────────────────────────────────── */
.contact-main {
    min-height: calc(100vh - 120px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 64px 24px 80px;
}
.contact-frame {
    width: 100%; max-width: 520px;
}

/* ── Heading ─────────────────────────────────────────────── */
.contact-kicker {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(43,58,78,0.7);
    margin-bottom: 12px;
}
.contact-h1 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700; font-size: 2rem; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 12px; line-height: 1.15;
}
.contact-lede {
    font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 36px; line-height: 1.6;
}

/* ── Form ────────────────────────────────────────────────── */
.contact-honeypot {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }

.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-label {
    font-size: 0.82rem; font-weight: 600; color: var(--ink);
    letter-spacing: 0.01em;
}
.form-required { color: var(--accent); }

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    background: var(--paper-soft);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sharp);
    padding: 10px 12px;
    min-height: 44px;
    font-family: inherit; font-size: 0.95rem; color: var(--ink);
    transition: border-color var(--duration-fast) var(--ease-standard);
    outline: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(43,58,78,0.45); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--ink); }

.form-select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230E1B2C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 32px;
}

.form-textarea { resize: vertical; min-height: 140px; line-height: 1.55; }

.contact-submit {
    align-self: flex-start;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 28px;
    min-height: 44px;
    background: var(--accent); color: var(--paper);
    font-family: inherit; font-size: 0.9rem; font-weight: 600;
    border: none; border-radius: var(--radius-pill);
    cursor: pointer; letter-spacing: 0.01em;
    transition: background var(--duration-fast) var(--ease-standard);
}
.contact-submit:hover { background: var(--accent-deep); }
.contact-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Success / error ──────────────────────────────────────── */
.contact-success {
    padding: 20px; border-radius: var(--radius-sharp);
    background: rgba(11,110,79,0.06); border: 1px solid rgba(11,110,79,0.2);
    color: var(--positive); font-size: 0.95rem; line-height: 1.5;
}
.contact-error {
    padding: 14px 16px; border-radius: var(--radius-sharp);
    background: rgba(182,55,31,0.06); border: 1px solid rgba(182,55,31,0.2);
    color: #B6371F; font-size: 0.88rem;
}

/* ── Footer ──────────────────────────────────────────────── */
.page-foot {
    border-top: 1px solid var(--rule); padding: 20px 40px;
    font-size: 0.8rem; color: rgba(43,58,78,0.6);
}
.foot-inner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .contact-main { padding: 40px 20px 60px; }
    .contact-h1 { font-size: 1.6rem; }
    /* Full-width submit button on mobile — Apple HIG primary CTA pattern */
    .contact-submit { width: 100%; align-self: stretch; }
}