.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact-links[hidden] { display: none !important; }
/* Кнопка связи — <button>, а не ссылка, поэтому сбрасываются кнопочные умолчания:
   рамка, фон и системный шрифт. Вид от этого не меняется, а адрес мессенджера не
   показывается в строке состояния при наведении. */
.public-page .contact-links .contact-button {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 10px 15px; color: var(--ink); font: 500 16px/1.4 Arial, sans-serif;
  text-transform: none; text-decoration: none; white-space: nowrap;
}
.contact-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.contact-icon { display: inline-block; flex: none; width: 24px; height: 24px; background: currentColor; mask: center / contain no-repeat; }
[data-contact-channel="whatsapp"] .contact-icon { mask-image: url('/assets/whatsapp.svg'); }
[data-contact-channel="telegram"] .contact-icon { mask-image: url('/assets/telegram.svg'); }
.contact-arrow { margin-left: auto; font-size: 15px; }

/* FORMA: discreet text links in the header, separate from the anchor navigation. */
.public-page[data-theme="forma"] .header .brand { margin-right: auto; }
.public-page[data-theme="forma"] .header { gap: 25px; }
.public-page .contacts-forma { gap: 16px; }
.public-page .contacts-forma .contact-button { border-bottom: 1px solid var(--accent); padding-inline: 0; color: var(--card-action); font-weight: 600; gap: 9px; }
.contacts-forma .contact-arrow { display: none; }

/* В шапке кнопка связи — иконка без подписи. С подписью и подчёркиванием она читалась
   как ещё один пункт меню, но выбивалась из ряда: у соседних ссылок капс, разрядка и
   верхний регистр, а тут обычный текст со своей линией снизу. Название канала остаётся
   в aria-label и title, поэтому ни скринридер, ни наведение мышью его не теряют.
   Под параметрами анкеты подпись сохраняется: там это отдельный блок, а не ряд ссылок. */
.public-page .contacts-forma[data-contact-placement="header"] { gap: 18px; }
.public-page .contacts-forma[data-contact-placement="header"] .contact-button {
  border-bottom: 0; padding: 0; min-width: 48px; color: var(--ink);
}
.contacts-forma[data-contact-placement="header"] .contact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contacts-forma[data-contact-placement="header"] .contact-icon { width: 26px; height: 26px; }
.public-page .contacts-forma[data-contact-placement="header"] .contact-button:hover { color: var(--card-action); }
@media (max-width: 700px) {
  .public-page .contacts-forma[data-contact-placement="header"] { gap: 14px; }
  .contacts-forma[data-contact-placement="header"] .contact-icon { width: 24px; height: 24px; }
  .public-page .contacts-forma[data-contact-placement="header"] .contact-button { min-width: 44px; }
}
.public-page .contacts-forma .contact-button:hover { color: var(--ink); }

/* NOIR: a gold circular rail, independent of the header and page columns. */
.public-page .contacts-noir { position: fixed; z-index: 15; right: 22px; top: 45%; flex-direction: column; gap: 12px; }
.public-page .contacts-noir .contact-button { width: 54px; height: 54px; padding: 0; border: 1px solid #bda56f; border-radius: 50%; color: #e0c993; background: #1c1a16; box-shadow: 0 4px 16px #0004; }
.contacts-noir .contact-icon { width: 28px; height: 28px; }
.contacts-noir .contact-label, .contacts-noir .contact-arrow { display: none; }
.public-page .contacts-noir .contact-button:hover { background: #d4bd86; color: #221c11; }

/* INDEX: a full-width utility strip below the masthead. */
.public-page[data-theme="index"] .header,
.public-page[data-theme="index"] .header:has(.contact-links:not([hidden])) { display: grid; grid-template-columns: 1fr auto; padding: 18px 25px 0; gap: 0 16px; min-height: 105px; }
.public-page[data-theme="index"] .header:not(:has(.contact-links:not([hidden]))) { padding-bottom: 18px; }
.public-page[data-theme="index"] .header .contacts-index { grid-column: 1 / -1; width: calc(100% + 50px); margin: 16px -25px 0; padding: 7px 25px; justify-content: flex-start; gap: 9px; border-top: 1px solid #a57d63; background: #30191d; }
.public-page[data-theme="index"] .header .contacts-index .contact-button { min-height: 48px; padding: 8px 14px; border: 1px solid #b69b72; border-radius: 3px; background: linear-gradient(#f6ead0, #d1b98b); color: #4b2930; box-shadow: inset 0 1px #fff9; font-size: 16px; }
.public-page[data-theme="index"] .header .contacts-index .contact-button:is(:hover, :focus-visible) { background: #fff0cf; color: #4b2930; }
.public-page[data-theme="index"] .header .contacts-index .contact-button:focus-visible { outline-color: #fff0cf; }
.contacts-index .contact-icon { width: 24px; height: 24px; }
.contacts-index .contact-arrow { display: none; }

/* BLOOM: soft pills beside the catalogue heading and below profile photos. */
.public-page[data-theme="bloom"] .catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.public-page[data-theme="bloom"] .catalog-heading h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.5px; }
.public-page .contacts-bloom { gap: 8px; }
.public-page .contacts-bloom .contact-button { border: 1px solid #c9b693; border-radius: 26px; background: #eadcc4; color: #624f34; padding: 10px 17px; }
.public-page .contacts-bloom .contact-button:hover { background: #dcc7a3; }
.contacts-bloom .contact-arrow { display: none; }
.public-page .gallery > .contacts-bloom { margin-top: 18px; justify-content: center; }

/* ATELIER: a typographic contact list in the footer or after profile details. */
.public-page .contacts-atelier { display: grid; min-width: 180px; gap: 0; }
.public-page .contacts-atelier .contact-button { justify-content: flex-start; padding: 9px 0; border-bottom: 1px solid #8d7153; color: #e5c9a5; font: 18px/1.3 Georgia, serif; }
.contacts-atelier .contact-icon { display: none; }
.contacts-atelier .contact-arrow { margin-left: 30px; }
.public-page .contacts-atelier .contact-button:hover { color: #fff3df; border-color: #d9b78a; }
.public-page .profile-copy > .contacts-atelier { margin-top: 20px; max-width: 260px; }

/* AURA: a fixed contact dock with a solid messenger button. */
.public-page .contacts-aura { position: fixed; z-index: 15; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(480px, calc(100% - 32px)); flex-wrap: nowrap; gap: 8px; padding: 9px; border: 1px solid #c5d1df; border-radius: 14px; background: #f0f5fa; box-shadow: 0 6px 28px #06162d40; }
.public-page .contacts-aura .contact-button { flex: 1; min-width: 0; border-radius: 7px; background: #244365; color: white; padding: 10px 15px; font-size: 16px; }
.public-page .contacts-aura .contact-button[data-contact-channel="telegram"] { background: #51718e; }
.public-page .contacts-aura .contact-button:hover { background: #142e4a; }
.contacts-aura .contact-arrow { display: none; }
.public-page[data-theme="aura"]:has(.contacts-aura:not([hidden])) { padding-bottom: 98px; }

@media (max-width: 1000px) {
  .public-page .contacts-noir { right: 10px; }
}
@media (max-width: 700px) {
  .public-page .contact-links .contact-button { min-height: 44px; font-size: 15px; }
  .public-page .contacts-atelier .contact-button { font-size: 18px; }
  .public-page[data-theme="forma"] .header { flex-wrap: wrap; gap: 4px 18px; padding-block: 10px; }
  .public-page .contacts-forma { width: 100%; justify-content: flex-end; }
  .public-page .contacts-noir { top: auto; right: 14px; bottom: 16px; flex-direction: row; gap: 8px; }
  .public-page .contacts-noir .contact-button { width: 48px; height: 48px; }
  .public-page[data-theme="noir"]:has(.contacts-noir:not([hidden])) { padding-bottom: 80px; }
  .public-page[data-theme="index"] .header,
  .public-page[data-theme="index"] .header:has(.contact-links:not([hidden])) { padding: 14px 16px 0; gap: 0 12px; min-height: 90px; }
  .public-page[data-theme="index"] .header .contacts-index { width: calc(100% + 32px); margin: 12px -16px 0; padding: 7px 16px; }
  .public-page[data-theme="index"] .header .contacts-index .contact-button { padding-inline: 10px; min-height: 44px; font-size: 15px; }
  .public-page[data-theme="bloom"] .catalog-heading { flex-direction: column; gap: 12px; text-align: center; margin-bottom: 22px; }
  .public-page .contacts-bloom { justify-content: center; }
  .public-page .contacts-bloom .contact-button { padding-inline: 13px; }
  .public-page[data-theme="atelier"] .footer .contacts-atelier { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; }
  .public-page .contacts-aura { bottom: 10px; width: calc(100% - 20px); border-radius: 11px; padding: 7px; }
  .public-page .contacts-aura .contact-button { padding-inline: 9px; font-size: 15px; }
}
@media (max-width: 480px) {
  .public-page[data-theme="index"] .header > .brand { grid-column: 1 / -1; }
  .public-page[data-theme="index"] .header > nav { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
}