/* Contact (vision §E11): "Write to Jamal." Topic radio cards, the ?painting= reference, Name,
   Email, Message, [Send message], inline results, and a side column. Asymmetric on desktop: the
   form on columns 1–7, the side column on 9–12 (vision §B3). */
@layer pages {
  .contact {
    display: block;
  }

  .ct {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--gutter);
    row-gap: clamp(var(--space-6), 5vw, var(--space-8));
    padding-block: clamp(var(--space-6), 5vw, var(--space-8)) var(--space-6);
  }
  @media (min-width: 1024px) {
    .ct {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: start;
    }
    .ct-head {
      grid-column: 1 / span 8;
    }
    .ct-main {
      grid-column: 1 / span 7;
    }
    .ct-aside {
      grid-column: 9 / -1;
      grid-row: 2;
      position: sticky;
      inset-block-start: var(--space-6);
    }
  }

  /* ------------------------------------------------------------------------------ head */
  .ct-head {
    display: grid;
    gap: var(--space-4);
  }
  .ct-head > * {
    margin: 0;
  }
  .ct-head__title {
    font-size: var(--step-5);
    font-weight: 360;
    line-height: 0.98;
    letter-spacing: -0.015em;
  }
  /* Phones: the title always breaks after "to", in the fallback face and in Fraunces alike, so it
     never jumps from two lines to one when the web font arrives. */
  @media (max-width: 599.98px) {
    .ct-head__title {
      max-inline-size: 5.4em;
    }
  }
  .ct-head__lead {
    max-inline-size: 44ch;
    color: var(--ink-2);
  }

  /* ------------------------------------------------------------------------------ form */
  .ct-main {
    container: ct-main / inline-size;
    min-inline-size: 0;
  }
  .ct-form {
    display: grid;
    gap: var(--space-7);
  }
  .ct-form > .error-summary {
    margin-block-end: calc(var(--space-2) * -1);
  }
  .ct-noscript {
    margin-block-end: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--raised);
    box-shadow: var(--e1);
    color: var(--ink);
  }

  .ct-group {
    display: grid;
    gap: var(--space-3);
  }
  /* Five topics as even cards: one column on phones, then two, then three. Each label fits on one
     line in every face at these widths, so the cards never change height when the web font
     arrives. */
  .ct-topics {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .ct-topics > legend {
    margin-block-end: var(--space-4);
    font: 500 0.9375rem/1.35 var(--font-ui);
  }
  .ct-topics .choice {
    min-block-size: 56px;
    align-content: center;
  }
  @container ct-main (min-width: 30rem) {
    .ct-topics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container ct-main (min-width: 42rem) {
    .ct-topics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  /* A missing topic: the cards' edges take the alert colour too (with the message below). */
  .ct-topics[aria-invalid="true"] .choice {
    border-color: var(--alert);
  }

  /* One column (easier to fill in and to read back). Every field, the topic cards and the actions
     share the form column's full width, so the form keeps one clean right edge. */
  .ct-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .ct-message textarea {
    min-block-size: 13rem;
  }

  /* ---------------------------------------------------------- "About: <title> (P0155)" */
  .ct-about {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
    background: var(--raised);
    box-shadow: var(--e1);
  }
  .ct-about__thumb {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 64px;
    block-size: 64px;
  }
  .ct-about__thumb img {
    max-inline-size: 64px;
    max-block-size: 64px;
    inline-size: auto;
    block-size: auto;
  }
  .ct-about__text {
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
    display: grid;
    gap: 2px;
  }
  .ct-about__line {
    color: var(--ink);
    font-size: var(--step-0);
    line-height: 1.35;
  }
  .ct-about__line .title {
    font-size: 1.06em;
  }
  .ct-about__note {
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.4;
  }
  .ct-about__id {
    color: var(--ink-2);
    font: 450 var(--step--2)/1 var(--font-mono);
    letter-spacing: 0.08em;
  }
  .ct-about .button--text {
    flex: none;
    min-block-size: 44px;
    padding-inline: var(--space-3);
  }

  /* ------------------------------------------------------------------------------ actions */
  .ct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
  }
  .ct-send {
    min-inline-size: 13rem;
  }
  .ct-actions__note {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--step--1);
  }
  .ct-actions__note a {
    color: var(--ink);
  }

  /* ------------------------------------------------------------------------------ results */
  .ct-result {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: var(--raised);
    box-shadow: var(--e1);
    transition: opacity var(--dur-settle) var(--ease-pour), translate var(--dur-settle) var(--ease-pour);
  }
  @starting-style {
    .ct-result {
      opacity: 0;
      translate: 0 -6px;
    }
  }
  .ct-result:focus {
    outline: none;
  }
  .ct-result:focus-visible {
    outline: 2px solid var(--lamp);
    outline-offset: 3px;
  }
  .ct-result > p {
    margin: 0;
  }
  .ct-result__title {
    display: flex;
    align-items: center;
    gap: 0.45em;
    font: 400 var(--step-3)/1.1 var(--font-display);
  }
  .ct-result__title::before {
    content: "";
    flex: none;
    inline-size: 0.7em;
    block-size: 0.7em;
    background: currentColor;
    mask: var(--icon-check) center / contain no-repeat;
  }
  .ct-result--ok .ct-result__title {
    color: var(--ink);
  }
  .ct-result--ok .ct-result__title::before {
    background: var(--ok);
  }
  .ct-result--error .ct-result__title {
    color: var(--alert);
    font: 600 var(--step-1)/1.3 var(--font-ui);
  }
  .ct-result--error .ct-result__title::before {
    inline-size: 1em;
    block-size: 1em;
    mask-image: var(--icon-alert);
  }
  .ct-result__text {
    max-inline-size: 52ch;
    color: var(--ink-2);
  }
  .ct-result__text a,
  .ct-result__text strong {
    color: var(--ink);
  }
  .ct-result__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-block-start: var(--space-2);
  }
  .ct-result--ok {
    padding-block: var(--space-6);
  }

  /* ------------------------------------------------------------------------------ aside */
  .ct-aside {
    display: grid;
    gap: var(--space-6);
    min-inline-size: 0;
  }
  .ct-aside__title {
    margin: 0;
  }
  .ct-facts {
    display: grid;
    margin: 0;
    border-block-start: 1px solid var(--rule);
  }
  .ct-facts > div {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--rule);
  }
  .ct-facts dt {
    color: var(--ink-2);
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .ct-facts dd {
    margin: 0;
    color: var(--ink);
    font-size: var(--step-0);
    line-height: 1.5;
    text-wrap: pretty;
  }
  .ct-facts a {
    color: var(--ink);
  }
  .ct-links {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
  }
  .ct-links .link-arrow {
    padding-block: 0.6em;
  }

  @media (forced-colors: active) {
    .ct-result__title::before {
      forced-color-adjust: none;
      background: CanvasText;
    }
    .ct-result,
    .ct-about {
      border: 1px solid CanvasText;
    }
  }
}