/* ==========================================================================
   CONTACT
   Loaded after hub.css and rest.css, which own the section shell and .prose.

   The page has one job: make one address easy to use. So the address is the
   largest thing on it, the two things you can do with it sit directly beneath,
   and the four categories exist to answer "is my thing worth sending" — not to
   fill a grid.

   Colour follows the site's one-accent-per-section rule. Pink is the section
   (the atmosphere, the eyebrow, the icon plates); lime is reserved for the
   things you can act on, so there is never a question which element is the
   button. Depth is a hairline and a soft pool of the accent — no bevels and no
   embossing, which would be CSS pretending to be a material.
   ========================================================================== */

/* hub.css constrains every direct child of .sect__in.narrow to 68ch, and that
   child is this wrapper — so the two-column grid inside it was being squeezed
   into a single 600px measure. The wrapper takes the page width; the reading
   blocks inside set their own, shorter, measures. */
.narrow > .cx { max-width: 58rem; }
/* Board 20 runs the plate, the grid and the privacy line close together —
   it is a short page and wants to be taken in at once. */
.cx { display: grid; gap: clamp(1.2rem, 2.4vw, 1.75rem); }

/* The site's default measure is 64–68ch. This page is short and wants to be
   read in one pass, so every block here is deliberately narrower. */
.cx__intro {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
  line-height: 1.6;
  color: var(--cream);
}

/* ------------------------------- the plate ------------------------------- */
/* Board 20 centres the plate in the column and centres what is on it. */
.cx__plate {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .7rem;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 150% at 0% 0%, rgb(var(--a-rgb) / 0.08), transparent 62%),
    var(--surface);
}
/* One hairline of light along the top edge. The plate is lit, not moulded. */
.cx__plate::before {
  content: '';
  position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.18), transparent);
  pointer-events: none;
}

.cx__mail {
  /* inline-flex with a floor, rather than padding tuned per width: at phone
     type sizes the padded version measured 39px. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* the plate centres everything on it; the address was the one thing left
     hanging off the left edge of a centred column */
  justify-self: center;
  margin: 0;
  padding: 0.4rem 0;
  font-size: clamp(1.0625rem, 3.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  text-decoration-color: rgb(214 255 63 / 0.45);
  word-break: break-word;
  transition: text-decoration-color var(--dur-fast, 180ms) ease;
}
.cx__mail:hover, .cx__mail:focus-visible { text-decoration-color: var(--lime); }

.cx__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.cx__acts .btn { min-height: 44px; }

.cx__copy {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.05rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--cream);
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast, 180ms) ease, color var(--dur-fast, 180ms) ease;
}
.cx__copy:hover { border-color: var(--cream); }
.cx__copy svg { flex: none; }
/* The two states the button can honestly report. */
.cx__copy.is-done   { border-color: var(--lime); color: var(--lime); }
.cx__copy.is-failed { border-color: var(--sunset); color: var(--sunset); }

/* Reserved height, so reporting the result never shifts the cards below. */
.cx__state {
  margin: -0.5rem 0 -0.15rem;
  min-height: 1.2em;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--cream-dim);
}

.cx__note {
  max-width: 48ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--cream-dim);
}

/* ------------------------------- the cards ------------------------------- *
   One column on a phone, two from 900px — the same breakpoint the header uses
   to swap the navigation, so the page changes shape once rather than twice. */
.cx__grid {
  display: grid;
  gap: clamp(0.875rem, 1.7vw, 1.125rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .cx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* THE MARK SITS BESIDE THE WORDS, AS BOARD 20 SETS IT.
   Stacked above the title it took a row of its own on all four cards and put
   them at 200-220px against a board drawing about 68. Beside them the card is
   the same content in the shape the board gives it, and the description takes
   the measure the board gives it too. Nothing moved off the card: the title,
   the description and the "Email about this" link are all still here, and the
   whole card is still one link to a pre-addressed message. */
.cx__card {
  display: grid; align-content: start;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico title" "ico body" "ico go";
  gap: .3rem .9rem;
  padding: clamp(0.95rem, 1.9vw, 1.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--dur-fast, 180ms) ease,
              background var(--dur-fast, 180ms) ease,
              transform var(--dur-fast, 180ms) ease;
}
.cx__card:hover, .cx__card:focus-visible {
  border-color: rgb(var(--a-rgb) / 0.5);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.cx__ico {
  grid-area: ico; align-self: start;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgb(var(--a-rgb) / 0.32);
  border-radius: 10px;
  background: rgb(var(--a-rgb) / 0.09);
  color: var(--a);
}
/* An SVG with no width fills its column; the plate mark is sized here, with
   the component, rather than anywhere it happens to be used. */
.cx__plateico {
  display: grid; place-items: center; width: 46px; height: 46px;
  color: var(--cream);
}
.cx__plateico svg { width: 30px; height: 30px; }
/* The board gives each card its own colour, in the title as well as the mark. */
.cx__ct {
  grid-area: title; margin: 0;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--a-text, var(--a));
}
.cx__ct .dot { color: var(--a-text, var(--a)); }
.cx__cd {
  grid-area: body; margin: 0; max-width: 40ch;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--cream-dim);
}
.cx__go {
  grid-area: go; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--lime);
}
.cx__card:hover .cx__go, .cx__card:focus-visible .cx__go {
  text-decoration: underline; text-underline-offset: 3px;
}

.cx__priv { margin: 0; font-size: 0.9375rem; color: var(--cream-dim); }
.cx__priv a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.cx__priv a:hover { color: var(--lime); }

/* A lift is a nice-to-have; it is the first thing to go. */
@media (prefers-reduced-motion: reduce) {
  .cx__card, .cx__copy, .cx__mail { transition: none; }
  .cx__card:hover, .cx__card:focus-visible { transform: none; }
}