/* Contact (Version 2). Shared parts live in site.css; this is only what the Contact page adds.
   One screen: a big hello on the left, and the form beside it on a soft panel. The panel's
   "Send message" is the one filled button on wide screens. */

.ct-grid {
    display: grid; gap: clamp(44px, 7vw, 64px);
    padding-block: clamp(44px, 7vw, 104px) clamp(84px, 11vw, 168px);
}
@media (min-width: 1000px) {
    .ct-grid { grid-template-columns: 5fr 7fr; gap: clamp(56px, 7vw, 112px); align-items: start; }
    /* the same inset as the panel, so the two eyebrows sit on one line */
    .ct-intro { padding-top: clamp(28px, 4.4vw, 60px); }
}

/* ── Say hello ──────────────────────────────────────────────────── */
.ct-title {
    margin-top: 2px;
    font-size: clamp(60px, 10vw, 150px); line-height: 0.94; letter-spacing: -0.052em; font-weight: 600;
}
.ct-title em { font-style: normal; color: var(--accent); }
.ct-lead { margin-top: 26px; max-width: 24ch; }
.ct-intro .btns { margin-top: 34px; gap: 14px 16px; }
@media (max-width: 480px) {
    .ct-intro .btns { flex-direction: column; align-items: stretch; }
}
/* wide screens: the form is right there, so "Write a message" becomes a quiet text link
   after the email pill, and "Send message" is the only filled button on the screen
   (the email pill comes first in the markup too, so the tab order matches) */
@media (min-width: 1000px) {
    .ct-intro .btns { gap: 12px 28px; }
    .ct-write, .ct-write:hover {
        min-height: 44px; padding: 0; border: 0; gap: 2px;
        background: none; color: var(--accent);
        font-weight: 400;
    }
    .ct-write:hover { text-decoration: underline; text-underline-offset: 0.18em; }
    .ct-write::after {
        content: ""; width: 0.42em; height: 0.42em; margin-left: 0.1em;
        border: solid currentColor; border-width: 0.09em 0.09em 0 0;
        transform: rotate(45deg) translateY(-0.02em);
        transition: transform .2s var(--ease);
    }
    .ct-write:hover::after { transform: translateX(2px) rotate(45deg); }
}
@media (min-width: 1000px) and (max-width: 1180px) {
    .ct-intro .btn { min-height: 44px; padding: 11px 22px; font-size: 17px; }
    .ct-intro .ct-write { padding: 0; }
}

.ct-in { animation: ct-rise 1s var(--ease-out) var(--d, 0s) both; }
@keyframes ct-rise { from { opacity: 0; transform: translateY(24px); } }

/* ── The form on its panel ──────────────────────────────────────── */
.ct-panel {
    padding: clamp(28px, 4.4vw, 60px);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}
@media (max-width: 480px) { .ct-panel { padding: 26px 18px 24px; border-radius: 22px; } }
.ct-head { transition: opacity .5s var(--ease); }
.ct-head .t-2 { margin-top: 2px; }
.ct-sub { margin-top: 10px; color: var(--fg-2); }
.ct-form { margin-top: clamp(28px, 3vw, 40px); }
.ct-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .ct-row { grid-template-columns: 1fr 1fr; } }
.ct-row .field { align-content: start; }   /* a long message under one field never moves the other */
.ct-row .field + .field { margin-top: 0; }
.ct-row + .field { margin-top: 18px; }
.ct-req { color: var(--fg-3); font-weight: 400; }
.ct-form .field > .err:empty { margin-top: -8px; }   /* an empty message takes no room, but stays a live region */
.ct-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ct-meta .err { flex: 1; min-width: 0; }
.ct-count { flex-shrink: 0; margin-left: auto; font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ct-count.near-limit { color: var(--gold); }
.ct-form-err { margin-top: 20px; text-align: center; font-size: 15px; color: var(--rose); }
.ct-form-err:empty { margin-top: 0; }
.ct-form-err a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.ct-submit { width: 100%; margin-top: 26px; }
.ct-submit[disabled] { cursor: progress; opacity: 0.85; }
.ct-spin {
    display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ct-turn .8s linear infinite;
}
@keyframes ct-turn { to { transform: rotate(360deg); } }
.ct-note { margin-top: 16px; font-size: 13px; line-height: 1.45; color: var(--fg-3); text-align: center; text-wrap: balance; }

/* ── Sent ───────────────────────────────────────────────────────── */
.ct-panel.is-sent .ct-head { opacity: 0.5; }
.ct-panel.is-sent .ct-sub { display: none; }
.ct-done { padding-top: clamp(28px, 3vw, 40px); }
.ct-check { width: 44px; height: 44px; color: var(--accent); }
.ct-check circle { stroke-dasharray: 164; stroke-dashoffset: 164; animation: ct-draw 0.9s var(--ease-out) 0.1s forwards; }
.ct-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ct-draw 0.5s var(--ease-out) 0.7s forwards; }
@keyframes ct-draw { to { stroke-dashoffset: 0; } }
.ct-done .t-2 { margin-top: 20px; }
.ct-done .t-lead { margin-top: 12px; max-width: 30ch; }
.ct-done strong { color: var(--fg); word-break: break-word; }
#contactDone:focus { outline: none; }

/* on phones the panel rises into place as it scrolls in */
@media (max-width: 999px) {
    .ct-side { transform: translate3d(0, calc((1 - var(--p, 1)) * 72px), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ct-in { animation: none; }
    .ct-side { transform: none !important; }
    .ct-check circle, .ct-check path { stroke-dashoffset: 0; animation: none; }
}