/* The closing invitation (OPS-site-contact-20261101): three pill buttons, one glass panel open at a time, in the page's own
   tokens (lift-style.css, page.css). No colour of its own except the one for a field to fix. */
.contact{--bad:#ffb4a8;max-width:calc(var(--measure) * 1.6);margin-top:var(--space-7)}
.side-right .read .contact{margin-left:auto}
.contact-h{font-size:var(--t-read-h2);line-height:1.2;margin:0 0 var(--space-4)}
.contact .lead-line{max-width:calc(var(--measure) * 1.22)}
.contact-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-6) 0 var(--space-5)}
.contact .pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--space-row);
  padding:0 var(--space-5);border:1px solid var(--glass-border);border-radius:var(--radius-control);background:var(--button-main);
  color:var(--button-main-text);font:inherit;font-size:var(--size-lead);font-weight:var(--weight-medium);text-decoration:none;cursor:pointer;
  transition:transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease)}
.contact .pill:hover{transform:translateY(calc(-1 * var(--motion-distance-raise)));text-decoration:none}
.contact .pill:active{transform:scale(var(--motion-scale-press))}
.contact-actions .pill[aria-expanded="true"]{box-shadow:0 0 0 2px var(--ground), 0 0 0 4px rgba(217,173,73,.75)}
.contact .pill[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.cpanel{position:relative;margin:0 0 var(--space-5);padding:var(--glass-pad);border-radius:var(--glass-radius);
  background:var(--glass-fill), var(--glass-solid);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.cpanel[hidden],.cpanel [hidden]{display:none!important}
.cpanel-h{margin:0 0 var(--space-4);font-size:var(--size-heading);font-weight:var(--weight-strong)}
.cpanel p{margin:0 0 var(--space-4);max-width:var(--measure)}
.cpanel label{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-4);font-size:var(--size-body);color:var(--text-2)}
.cpanel .row.two{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4)}
.cpanel input:not([type=radio]):not([type=checkbox]),.cpanel textarea{width:100%;box-sizing:border-box;min-height:var(--space-row);
  padding:var(--space-3) var(--space-4);border:1px solid var(--line-strong);border-radius:12px;background:rgba(0,0,0,.28);
  color:var(--text-1);font:inherit;font-size:var(--size-lead)}
.cpanel textarea{resize:vertical;min-height:7.5rem;line-height:var(--line-height-body)}
.cpanel input:focus-visible,.cpanel textarea:focus-visible{outline:var(--stroke-focus) solid var(--focus);outline-offset:1px}
.cpanel [aria-invalid="true"]{border-color:var(--bad)!important;box-shadow:0 0 0 1px var(--bad)}
.choices{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4);padding:0;border:0}
.choices legend{margin-bottom:var(--space-2);font-size:var(--size-body);color:var(--text-2)}
.choices label{flex-direction:row;align-items:center;margin:0;padding:0 var(--space-4);min-height:40px;border:1px solid var(--line-strong);
  border-radius:var(--radius-chip);color:var(--text-1);cursor:pointer}
.choices label:has(input:checked){background:var(--button-main);color:var(--button-main-text);border-color:transparent}
.choices input{position:absolute;opacity:0;width:1px;height:1px}
.choices label:has(input:focus-visible){outline:var(--stroke-focus) solid var(--focus);outline-offset:2px}
.choices input[aria-invalid="true"] + *,.choices:has([aria-invalid="true"]) label{border-color:var(--bad)}
.cpanel .tick{flex-direction:row;align-items:flex-start;gap:var(--space-3);color:var(--text-1);cursor:pointer}
.cpanel .tick input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--button-main);flex:none}
.opt,.count{color:var(--text-3);font-size:var(--size-caption)}
.count{margin-left:auto}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);margin-top:var(--space-2)}
.send .fine{flex:1 1 16rem;margin:0;font-size:var(--size-caption);line-height:var(--line-height-caption);color:var(--text-3)}
/* his WS31-14: links in the text colour, no underline at rest; hover and focus underline (page.css) */
.cpanel a:not(.pill),.contact-mail a{color:var(--text-1);text-decoration:none}
.cpanel .note{margin:var(--space-4) 0 0;font-weight:var(--weight-medium);color:var(--text-1)}
.cpanel .note:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.contact-mail{color:var(--text-2);font-size:var(--size-body)}
html:not(.js) .contact-actions,html:not(.js) .cpanel{display:none} /* without JS: the mail line stays, no dead buttons */
@media (max-width:640px){
  .contact-actions{flex-direction:column}
  .contact-actions .pill{width:100%}
  .cpanel .row.two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.contact .pill{transition:none}.contact .pill:hover,.contact .pill:active{transform:none}}