/* ─────────────────────────────────────────────────────────────
   Contact — the last page in the sequence.
   Loaded after styles.css so it can lean on the same tokens.
   ───────────────────────────────────────────────────────────── */

@layer contact {
  .contact-page {
    background: var(--bg);
    overflow-x: hidden;
  }

  /* styles.css keeps every h1/h2 at opacity 0 until it gains .visible,
     which only the home page's scroll system ever adds. */
  .contact-page :is(h1, h2) {
    opacity: 1;
    translate: none;
  }

  /* One shared measure for the head, body, footer and page nav, so they all
     sit on the same left edge instead of each finding its own. */
  .ct-main,
  .ct-foot,
  .ct-pagenav {
    --ct-measure: 1180px;
    max-width: var(--ct-measure);
    margin-inline: auto;
  }

  .ct-main {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px clamp(24px, 6vw, 96px) 72px;
  }

  /* ── Head ────────────────────────────────────────────────── */

  .ct-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-block-end: 18px;
  }

  .ct-tag span { color: var(--accent); }

  /* styles.css pins every h1 to a near-black !important colour that only
     lifts for the home page's .visible class, and layered !important can
     never outrank it — so the display type lives on a span instead. */
  .ct-title {
    font-size: clamp(52px, 11vw, 128px) !important;
    line-height: 0.86;
  }

  .ct-title span {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--fg);
  }

  .ct-lede {
    margin-block-start: 24px;
    max-width: 460px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.9;
    color: color-mix(in srgb, var(--fg) 62%, transparent);
  }

  /* ── Body ────────────────────────────────────────────────── */

  .ct-body {
    display: grid;
    grid-template-columns: minmax(0, clamp(400px, 30%, 560px)) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
    margin-block-start: clamp(48px, 7vh, 80px);
    padding-block-start: clamp(40px, 6vh, 64px);
    border-block-start: var(--hairline) solid
      color-mix(in srgb, var(--fg) 12%, transparent);
  }

  /* ── Business card ───────────────────────────────────────── */

  .ct-card {
    aspect-ratio: 7 / 4;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: var(--hairline) solid rgba(1, 25, 1, 0.136);
    /* Mixed off --fg rather than a fixed colour so the card keeps the same
       separation from the page in either theme. */
    background: #f7f4ef;
  }

  .ct-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .ct-card-mark {
    width: 26px;
    height: 26px;
    color: rgb(22, 117, 22);
  }

  .ct-card-place {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .ct-card-id { margin-block-start: auto; }

  .ct-card-name {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.6vw, 34px);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--fg);
  }

  .ct-card-role {
    margin-block-start: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(22, 117, 22);
  }

  .ct-card-lines {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-block-start: 16px;
    padding-block-start: 14px;
    border-block-start: var(--hairline) solid
      color-mix(in srgb, var(--fg) 12%, transparent);
  }

  .ct-card-lines > div {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }

  .ct-card-lines dt {
    flex: none;
    width: 44px;
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .ct-card-lines dd {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--fg);
  }


  /* ── Form ────────────────────────────────────────────────── */

  .ct-honey {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
  }

  .ct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }

  .ct-field { margin-block-end: 22px; }

  .ct-field label {
    display: block;
    margin-block-end: 9px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .ct-field input,
  .ct-field textarea {
    width: 100%;
    padding: 13px 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg);
    background: color-mix(in srgb, var(--fg) 3%, transparent);
    border: var(--hairline) solid color-mix(in srgb, var(--fg) 16%, transparent);
    border-radius: 4px;
    transition: border-color 0.25s ease, background 0.25s ease;
  }

  .ct-field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.7;
  }

  .ct-field input:focus,
  .ct-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--fg) 5%, transparent);
  }

  .ct-field input:user-invalid,
  .ct-field textarea:user-invalid {
    border-color: color-mix(in srgb, #c2603f 70%, transparent);
  }

  .ct-submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 26px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fg);
    background: transparent;
    border: var(--hairline) solid color-mix(in srgb, var(--fg) 30%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  }

  .ct-submit svg {
    width: 15px;
    height: 15px;
    transition: translate 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .ct-submit:hover,
  .ct-submit:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .ct-submit:hover svg { translate: 3px 0; }

  .ct-submit[disabled] {
    opacity: 0.5;
    cursor: progress;
  }

  .ct-status {
    margin-block-start: 18px;
    min-height: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: var(--muted);
  }

  .ct-status.is-ok { color: var(--accent); }
  .ct-status.is-err { color: #d0724f; }

  /* ── Footer + page nav ───────────────────────────────────── */

  .ct-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    padding: 28px clamp(24px, 6vw, 96px) 36px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* Static, unlike the fixed nav on Elsewhere: this page is an ordinary
     scrolling document, and a fixed bar parks itself on top of the submit
     button at whatever scroll position leaves it near the viewport floor. */
  .ct-pagenav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 2vw, 22px);
    padding: 0 clamp(24px, 6vw, 96px) clamp(48px, 7vh, 72px);
  }

  .ct-pagenav-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: color-mix(in srgb, var(--fg) 92%, transparent);
    transition: color 0.3s ease;
  }

  .ct-pagenav-arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
    background: color-mix(in srgb, var(--fg) 5%, transparent);
    backdrop-filter: blur(6px);
    transition: background 0.3s ease, border-color 0.3s ease,
      translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .ct-pagenav-arrow svg { width: 18px; height: 18px; }

  .ct-pagenav-text {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ct-pagenav-kicker { opacity: 0.7; }

  .ct-pagenav-link:hover,
  .ct-pagenav-link:focus-visible { color: var(--accent); }

  .ct-pagenav-link:hover .ct-pagenav-arrow,
  .ct-pagenav-link:focus-visible .ct-pagenav-arrow {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .ct-pagenav-link:hover .ct-pagenav-arrow { translate: -3px 0; }
  .ct-pagenav-link.is-next:hover .ct-pagenav-arrow { translate: 3px 0; }

  /* ── Responsive ──────────────────────────────────────────── */

  /* Wide desktops and ultrawides: grow the measure rather than stranding the
     content in a 1180px column against a wall of empty page. The cap keeps
     the form from stretching past a comfortable reading width. */
  @media (min-width: 1500px) {
    .ct-main,
    .ct-foot,
    .ct-pagenav {
      --ct-measure: min(88vw, 1600px);
    }
  }

  @media (min-width: 2200px) {
    .ct-main,
    .ct-foot,
    .ct-pagenav {
      --ct-measure: min(78vw, 2000px);
    }

    /* The type is sized in vw further up, which runs away past ~2200px. */
    .ct-title { font-size: 150px !important; }
    .ct-card-name { font-size: 38px; }
  }

  @media (max-width: 880px) {
    .ct-body {
      grid-template-columns: 1fr;
      gap: 44px;
    }

    .ct-card { max-width: 420px; }
  }

  @media (max-width: 620px) {
    .ct-row { grid-template-columns: 1fr; }
  }

  @media (max-width: 560px) {
    .ct-main { padding-block-start: 100px; }
    .ct-pagenav { gap: 10px; }
    .ct-pagenav-link { gap: 8px; }
    .ct-pagenav-arrow { width: 40px; height: 40px; }
    .ct-pagenav-arrow svg { width: 16px; height: 16px; }
    .ct-pagenav-text { font-size: 10px; letter-spacing: 0.14em; }
    .ct-pagenav-kicker { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ct-submit svg { transition: none; }
  }
}