/* ameliebeerens.com: the closing contact section ({{contact}} in
   build_site.py, on the homepage; behaviour in contact.js). Amélie's brief
   of 7 Oct 2026, on the Nuance template's contact section.

   Her site-wide rule (7 Oct 2026): the template owns the structure, the
   site owns the identity. The structure is the template's: a panel across
   the content width, 12px corners, a card for the form, fields as filled
   boxes, the button full width. On 8 Oct 2026 she changed the panel: no
   tint and no shader band, a hairline box on the page ground instead, and
   inside it the hero's glow, in blush, pink and red (no peach: Amélie,
   8 Oct 2026, red and pink only, and larger than the hero's) as
   the only motion: three soft blobs that drift round the box, brighten and
   fade (the keyframes below; still at the foot, as in the hero, under
   reduced motion). And the form fits one
   screen: 48px panel padding, 16px labels and fields (44px high), 14px
   between them, a two-line message box, so the panel is about 700px tall
   at 1440 x 900. The identity is hers: ink hairlines, paper for the field
   boxes, red with ink text for the buttons, Montserrat and the serif.
   No shadow, no gradient.

   Two columns: left the heading, the line and the form card with the
   consent line; right the heading and the LinkedIn widget, a card in the
   same shape with her name and title, the Follow button and the container
   for her posts (its three states as plain lines). On a phone the columns
   stack, the contact first. */

.ct { --ct-pad: var(--grid-margin, 84px); --ct-tint: var(--nu-tint, color-mix(in srgb, var(--red) 10%, var(--surface)));
  --ct-box: var(--surface-alt, var(--paper)); --ct-rule: color-mix(in srgb, var(--text) 20%, transparent);
  --ct-mute: var(--mute, var(--text-muted)); --ct-radius: 0; --ct-body: 16px; --ct-lh: 24px;
  padding-block: 96px 0; background: var(--surface); color: var(--text); }   /* on /, the footer brings its own gap */
.nuance .ct { --ct-pad: var(--nu-inset, 120px); padding-block: var(--nu-gap, 120px); border-top: 1px solid var(--ct-rule); }
/* A contact link lands here under the sticky bar: the page-wide scroll-padding in nuance.css (bar + 24px) does it, so no scroll-margin here, the two would stack (brief round 3, C4). */
.ct__in { max-width: 1440px; margin-inline: auto; padding-inline: var(--ct-pad); }
.ct__panel { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start;
  padding: 48px; background: var(--surface); border: 1px solid var(--ct-rule); border-radius: var(--ct-radius); }

/* The glow: three soft ellipses behind the two columns in blush, pink and
   red (the hero's recipe, red in place of peach), each 85% of the box wide
   and 75% tall, fading to nothing at 70% of its radius like the hero's. At rest they lie along the foot of the
   box at half opacity, as in the hero. In motion each wanders its own slow
   loop (26, 34 and 42s, so the three never repeat together) and breathes
   between faint and bright on the way. */
.ct__glow { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none;
  --g1: color-mix(in srgb, var(--blush) 55%, var(--surface)); --g2: color-mix(in srgb, var(--pink) 35%, var(--surface)); --g3: color-mix(in srgb, var(--red) 40%, var(--surface)); }
.ct__glow i { position: absolute; bottom: -35%; width: 85%; height: 75%; opacity: .55; background: radial-gradient(ellipse at center, var(--g) 0%, transparent 70%); }
.ct__glow i:nth-child(1) { --g: var(--g1); left: -25%; }
.ct__glow i:nth-child(2) { --g: var(--g2); left: 15%; }
.ct__glow i:nth-child(3) { --g: var(--g3); left: 45%; }
@media (prefers-reduced-motion: no-preference) {
  .ct__glow i:nth-child(1) { animation: ct-glow-1 26s ease-in-out infinite; }
  .ct__glow i:nth-child(2) { animation: ct-glow-2 34s ease-in-out infinite; }
  .ct__glow i:nth-child(3) { animation: ct-glow-3 42s ease-in-out infinite; }
}
@keyframes ct-glow-1 {
  0%, 100% { transform: translate(0, 0); opacity: .35; }
  30%  { transform: translate(40%, -60%); opacity: .75; }
  60%  { transform: translate(90%, -20%); opacity: .45; }
  80%  { transform: translate(30%, -90%); opacity: .7; } }
@keyframes ct-glow-2 {
  0%, 100% { transform: translate(0, 0); opacity: .7; }
  25%  { transform: translate(-50%, -80%); opacity: .3; }
  55%  { transform: translate(30%, -110%); opacity: .75; }
  80%  { transform: translate(60%, -30%); opacity: .4; } }
@keyframes ct-glow-3 {
  0%, 100% { transform: translate(0, 0); opacity: .45; }
  35%  { transform: translate(-70%, -100%); opacity: .75; }
  65%  { transform: translate(-110%, -40%); opacity: .3; }
  85%  { transform: translate(-40%, -70%); opacity: .7; } }

/* The form card: the template's card and boxed fields, the site's colours. */
.ct__card { padding: 20px; background: var(--surface); border: 1px solid var(--ct-rule); border-radius: var(--ct-radius); }
.ct__card .ab-form { max-width: none; gap: 14px; }
.ct__card .ab-form label { gap: 4px; font: 500 16px/24px var(--font-sans); }
.ct__card .ab-form input, .ct__card .ab-form textarea { padding: 10px 12px; font: 400 var(--ct-body)/var(--ct-lh) var(--font-sans);
  background: var(--ct-box); border: 0; border-radius: 0; }
.ct__card .ab-form textarea { min-height: 72px; }
.ct__card .ab-form ::placeholder { color: var(--ct-mute); }
.ct__card .ab-form > div { margin-top: 0; }
/* The buttons are the site's own (nuance.css): square, drawn arrow, corner ticks on mouse over. Only the width of Send is set here (Amélie, 8 Oct 2026). */
.ct__card .ab-btn { width: 100%; justify-content: center; }
/* The consent line: in the card, straight under Send, one line (Amélie, 8 Oct 2026, twice). The card is a
   size container, and the type shrinks with it so the sentence never wraps: 12px at 1440 (the sentence is
   476px wide there, the card's inner width 485px), smaller below. On a phone one line would mean 7px type,
   so there it stays readable and takes two lines (flagged to her). */
.ct__card { container-type: inline-size; }
.ct__consent { margin: 10px 0 0; font: 400 12px/18px var(--font-sans); font-size: min(12px, 2.5cqw); letter-spacing: -0.01em; color: var(--ct-mute); white-space: nowrap; }

/* The two columns: a heading each. */
.ct__col h2 { margin: 0 0 16px; font: 500 clamp(32px, 2.6vw, 38px)/1.1 var(--font-serif); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.ct__line { margin: -4px 0 20px; font: 400 18px/28px var(--font-sans); }

/* The error lines under the fields (contact.js) and the failure line. */
.ct__card .form-msg { font: 500 16px/24px var(--font-sans); color: var(--text); }
.ct__card .ab-form [aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--red); }
.ct__card .form-error { margin: 0; padding-left: 16px; border-left: 2px solid var(--red); font: 400 16px/24px var(--font-sans); }

/* The LinkedIn widget. */
.liw { margin-top: 0; padding: 20px; background: var(--surface); border: 1px solid var(--ct-rule); border-radius: var(--ct-radius); }
.liw__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.liw__who { display: flex; align-items: start; gap: 14px; margin: 0; font: 400 16px/22px var(--font-sans); }
.liw__who strong { display: block; font-weight: 500; font-size: var(--ct-body); line-height: 24px; }
.liw__title { color: var(--ct-mute); }
.liw__mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 0; background: var(--ct-tint); color: var(--text); }
.liw__mark svg { width: 20px; height: 20px; }
.liw__follow { flex: none; }
.liw__widget { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ct-rule); }
.liw__embed { min-height: 80px; max-height: 560px; overflow: auto; overscroll-behavior: contain; display: grid; gap: 16px; }   /* LinkedIn's post embeds, the column stays the form's height */
.liw__embed iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: 0; background: var(--surface); }
.liw__accept { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.liw__accept:hover { text-decoration-color: var(--red); }
.liw__state { margin: 0; font: 400 var(--ct-body)/var(--ct-lh) var(--font-sans); }
.liw__state a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.liw__state a:hover { text-decoration-color: var(--red); }
.liw__state i { font-style: normal; }
.liw__todo { margin: 12px 0 0; font: 400 16px/24px var(--font-sans); color: var(--ct-mute); }

@media (max-width: 1240px) {
  .ct__panel { gap: 40px; padding: 40px; }
}

@media (max-width: 899px) {
  .ct__consent { font-size: 12px; white-space: normal; }   /* two lines on a phone, see above */
  .ct { padding-block: 64px 0; }
  .nuance .ct { --ct-pad: 16px; }
  .ct__panel { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 16px; }
  .ct__col h2 { font-size: 30px; }
  .ct__line { font-size: 17px; line-height: 27px; }
  .ct__glow i { width: 140%; height: 36%; bottom: -18%; }
  .liw { margin-top: 24px; }
  .liw__head { flex-wrap: wrap; }
}