/* Contact page. Desktop: the email address and what to write on the left, details and the 112 notice on the right.
   Phone: the 112 notice comes first, then the address, then the details. */
.ct { padding-top: clamp(40px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }
.ct-head h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1; margin-bottom: 20px; }
.ct-head .lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 640px; margin-bottom: clamp(32px, 4vw, 56px); }

.ct-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 440px); justify-content: space-between;
  column-gap: clamp(40px, 8vw, 120px); grid-template-areas: "main side" "main sos" "main ."; grid-template-rows: auto auto 1fr; }
.ct-main { grid-area: main; }
.ct-side { grid-area: side; margin: 0; }
.ct-sos { grid-area: sos; }

/* The address: large, selectable text, no link. */
.ct-mail { border: var(--rule); border-radius: var(--r); background: var(--panel); padding: clamp(20px, 3vw, 32px); margin-bottom: 40px; }
.ct-mail-label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.ct-mail-addr { margin: 0 0 14px; font: 700 clamp(30px, 4vw, 44px)/1.1 var(--disp); color: var(--ink); user-select: all; overflow-wrap: anywhere; }
.ct-mail-hint { margin: 0; font-size: 15px; line-height: 1.5; }

.ct-asks-title { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 16px; }
.ct-asks { margin: 0 0 24px; padding-left: 20px; color: var(--ink2); line-height: 1.55; }
.ct-asks li { margin-bottom: 10px; }
.ct-asks strong { color: var(--ink); }
.ct-privacy { margin: 20px 0 0; font-size: 15px; line-height: 1.5; }
.ct-privacy a { color: var(--ink2); padding: 14px 0; } /* inline link: padding grows the tap area to 44 px without moving the text */

/* Details: a rule above each, mono key, readable value. */
.ct-side-row { border-top: var(--rule); padding: 16px 0 24px; }
.ct-side dt { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.ct-side dd { margin: 0; font: 500 18px/1.4 var(--sans); color: var(--ink); }

/* 112: full-size, bold, red on a dark red panel. Not small print. */
.ct-sos { margin: 8px 0 0; padding: 22px; background: var(--danger-bg); border: var(--border-width) solid var(--danger-line); border-radius: var(--r);
  font: 600 16px/1.45 var(--sans); color: var(--danger-ink); }

@media (max-width: 900px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sos" "main" "side"; grid-template-rows: auto; }
  .ct-sos { margin: 0 0 32px; padding: 18px 20px; }
  .ct-side { margin-top: 48px; }
}