/* ============================================================
   KinkyPeople.club — головна сторінка
   ============================================================ */

/* --- Шрифти ------------------------------------------------ */
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-400-cyrillic.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-500-cyrillic.woff2) format('woff2');font-weight:500;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-600-cyrillic.woff2) format('woff2');font-weight:600;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-600-latin.woff2) format('woff2');font-weight:600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-700-cyrillic.woff2) format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-700-latin.woff2) format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

@font-face{font-family:'Fira Sans';src:url(../fonts/FiraSans-300-cyrillic.woff2) format('woff2');font-weight:300;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans';src:url(../fonts/FiraSans-300-latin.woff2) format('woff2');font-weight:300;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Fira Sans';src:url(../fonts/FiraSans-400-cyrillic.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans';src:url(../fonts/FiraSans-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Fira Sans';src:url(../fonts/FiraSans-500-cyrillic.woff2) format('woff2');font-weight:500;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans';src:url(../fonts/FiraSans-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

@font-face{font-family:'Fira Sans Condensed';src:url(../fonts/FiraSansCondensed-400-cyrillic.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans Condensed';src:url(../fonts/FiraSansCondensed-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Fira Sans Condensed';src:url(../fonts/FiraSansCondensed-500-cyrillic.woff2) format('woff2');font-weight:500;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans Condensed';src:url(../fonts/FiraSansCondensed-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

@font-face{font-family:'Roboto Condensed';src:url(../fonts/RobotoCondensed-vf-cyrillic.woff2) format('woff2');font-weight:400 500;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Roboto Condensed';src:url(../fonts/RobotoCondensed-vf-latin.woff2) format('woff2');font-weight:400 500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Roboto Condensed';src:url(../fonts/RobotoCondensed-vf-latinext.woff2) format('woff2');font-weight:400 500;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';src:url(../fonts/PlayfairDisplay-500italic-cyrillic.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';src:url(../fonts/PlayfairDisplay-500italic-latin.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Playfair Display';src:url(../fonts/PlayfairDisplay-500italic-latinext.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

/* --- Матеріал станції -------------------------------------- */
:root{
  --graphite:#121212;
  --panel-top:#1a1a1b;
  --panel-bottom:#131314;
  --cream:#f2efe9;
  --cream-soft:rgba(242,239,233,.72);
  --cream-dim:rgba(242,239,233,.62);
  /* акцент: усе акцентне на сайті похідне від --brass-rgb — його й крутить твік.
     Рішення замовника 25 жовтня 2026: лазур #2f9fd8 замість рожевого #fe7cdb */
  --brass-rgb:47 159 216;
  --brass:rgb(var(--brass-rgb));
  --brass-deep:color-mix(in srgb,var(--brass) 64%,#000);
  --brass-light:color-mix(in srgb,var(--brass) 45%,#fff);
  /* чорнила на акцентній заливці: сам акцент, затемнений до майже чорного.
     Рахує панель твіка за контрастом WCAG — на лазурі 6.5:1 */
  --on-brass:#051016;
  /* Gold-учасник: платний статус, і він мусить лишатися золотим за будь-якого
     акценту сторінки — тому це свій токен, а не похідне від --brass-rgb.
     Літерал той самий, що в серці логотипа (#d8bd51) */
  --gold-rgb:216 189 81;
  --gold:rgb(var(--gold-rgb));
  --gold-light:color-mix(in srgb,var(--gold) 42%,#fff);
  /* Належність події: кінкі — фіолетовий тег, BDSM — чорний (рішення замовника
     15 жовтня 2026). Свій токен із тієї самої причини, що в золота Gold:
     позначка розділу мусить лишатися собою за будь-якого акценту сторінки.
     Рішення замовника 25 жовтня 2026: оливковий #708f00 замість фіолетового
     #6d3cd2. Увага: під кремові чорнила (.tag краситься --cream жорстко) на
     ньому 3.3:1 — нижче порога 4.5:1. Найближчий темніший тон того ж відтінку,
     який поріг тримає, — #597300 (4.7:1) */
  --kink-rgb:112 143 0;
  /* колір слів у хмарі херо: основний і для кожного п'ятого слова.
     Окремі токени, бо хмару замовник крутить незалежно від акценту сторінки.
     За умовчанням акцент дорівнює основному — хмара одноколірна біла */
  --cloud-ink:#fff;
  --cloud-accent:var(--cloud-ink);

  /* світло внизу херо — свій токен, але з 25 жовтня 2026 за рішенням замовника
     його значення ЗБІГАЄТЬСЯ з акцентом (#2f9fd8). Літерал, а не
     var(--brass-rgb): правило «у світла свій колір» лишається, збіг — вибір,
     а не прив'язка */
  --glow-rgb:47 159 216;
  --glow:rgb(var(--glow-rgb));
  --glow-deep:color-mix(in srgb,var(--glow) 78%,#000);
  --glow-pale:color-mix(in srgb,var(--glow) 55%,#fff);
  --glow-bright:color-mix(in srgb,var(--glow) 38%,#fff);
  /* 1.6 — рішення замовника 25 жовтня 2026 (було .55). Більше за 1 має сенс:
     .hero__glow віддає його в opacity, де все понад 1 браузер зрізає до 1,
     тобто світло горить на повну */
  --glow-strength:1.6;
  --signal:#00aaff;
  --edge:rgba(242,239,233,.09);
  --edge-bright:rgba(242,239,233,.16);

  --panel:linear-gradient(180deg,var(--panel-top),var(--panel-bottom));
  /* світліша плашка під курсором: непрозорі контроли шапки не можна підсвічувати
     напівпрозорим шаром — крізь нього знову проступає хмара */
  --panel-hover:linear-gradient(180deg,#242426,#1b1b1d);
  /* репліка учасника — світліша за картку, щоб балон читався як окрема плашка */
  --balloon:#1f1f21;
  /* напівпрозора панель: крізь неї має читатись малюнок за секцією */
  --panel-sheer:linear-gradient(180deg,rgb(26 26 27 / .72),rgb(19 19 20 / .72));
  /* малюнок під формою пошуку — перемикається одним рядком.
     search-bg-pair.webp — дві постаті обличчям одна до одної (у роботі);
     search-bg-wash.webp — акварельна туш, профіль і рука біля губ (запасний варіант) */
  --search-art:url(../img/search-bg-pair.webp);
  --lift:inset 0 1px 0 rgba(242,239,233,.055),0 20px 44px -32px rgba(0,0,0,.95);
  --sink:inset 0 2px 5px rgba(0,0,0,.6),inset 0 -1px 0 rgba(242,239,233,.05);

  --display:Montserrat,system-ui,sans-serif;
  --body:'Fira Sans',system-ui,sans-serif;
  --label:'Roboto Condensed','Fira Sans Condensed',system-ui,sans-serif;
  --accent-italic:'Playfair Display',Georgia,serif;

  /* висота шапки: вона fixed, тож внутрішні сторінки мусять знати її запас */
  --rail-h:70px;
  --shell:1180px;
  --gutter:clamp(18px,4vw,48px);
  --ease:cubic-bezier(.16,.84,.26,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--graphite);
  color:var(--cream);
  font:400 17px/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
  /* підвал притиснутий до низу навіть на короткій внутрішній сторінці.
     Херо головної вже займає 100svh, тож на ній нічого не зсувається */
  min-height:100svh;display:flex;flex-direction:column;
}


img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.005em;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* --- Поверхні браузера ------------------------------------- */
::selection{background:rgb(var(--brass-rgb) / .3);color:#fff}
::placeholder{color:rgba(242,239,233,.58)}
:root{scrollbar-color:#2a2a2c var(--graphite);scrollbar-width:thin;accent-color:var(--brass)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0e0e0f}
::-webkit-scrollbar-thumb{background:#2a2a2c;border:3px solid #0e0e0f;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#3b3b3e}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
a{color:inherit;text-decoration-color:rgb(var(--brass-rgb) / .45);text-underline-offset:.22em}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:50;
  padding:10px 16px;background:var(--brass);color:var(--on-brass);
  font:500 13px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* заголовок тільки для читалок. Над консоллю пошуку видимого заголовка немає —
   замовник зняв його 8 жовтня 2026, і повертати не можна. Але в структурі
   сторінки між h1 і h3 груп вподобань мусить стояти h2, інакше рівень
   пропущено і зміст сторінки для читалки розсипається */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* --- Заголовок секції --------------------------------------- */
/* назва і волосінь до правого краю: під нею ряд карток чи плиток читається
   як таблиця. Одне правило на всі секції — і на внутрішні сторінки теж */
.page__head,.people__head,.events__head{
  display:flex;align-items:center;gap:clamp(18px,3vw,36px);
  margin-bottom:clamp(28px,4vh,52px);
}
.page__head::after,.people__head::after,.events__head::after{
  content:"";flex:1;height:1px;min-width:40px;
  background:linear-gradient(90deg,var(--edge-bright),rgba(242,239,233,0));
}
.page__head h1,.page__head h2,.people__head h2,.events__head h2{
  font-size:clamp(1.95rem,3.3vw,3rem);line-height:1.1;
}

/* --- Внутрішня сторінка ------------------------------------- */
/* Секція сторінки без херо: шапка fixed, тож верхній відступ мусить
   покривати її висоту, інакше заголовок почнеться під меню */
.page{
  position:relative;
  padding-block:calc(var(--rail-h) + clamp(40px,6vh,80px)) clamp(78px,11vh,148px);
}
.page + .page{border-top:1px solid var(--edge);padding-top:clamp(78px,11vh,148px)}

/* --- Кнопки -------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border:1px solid transparent;border-radius:999px;
  background:none;
  color:var(--cream);font:500 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{
  width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.btn:hover svg{transform:translateX(2px)}

/* світла пігулка — головна дія */
.btn--brass,.btn--primary{
  background:var(--cream);color:#121212;font-weight:600;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.9);
}
.btn--brass:hover,.btn--primary:hover{background:#fff;box-shadow:0 14px 32px -16px rgba(0,0,0,.95)}
.btn--primary{padding:17px 34px;font-size:13px}

/* тихе коло — другорядна дія. Фон непрозорий: кнопка висить над хмарою херо */
.btn--quiet{background:var(--panel);border-color:var(--edge-bright);color:var(--cream-soft);box-shadow:var(--lift)}
.btn--quiet:hover{border-color:rgba(242,239,233,.42);color:var(--cream);background:var(--panel-hover)}

/* найтихіша дія: тло не заливається зовсім, сірий контур, сірі чорнила й
   іконка (вона бере stroke з currentColor). Відрізняється від .btn--quiet
   саме прозорістю — під нею видно поверхню, на якій кнопка стоїть */
.btn--ghost{border-color:var(--edge-bright);color:var(--cream-dim)}
.btn--ghost:hover{border-color:rgba(242,239,233,.42);color:var(--cream)}

/* дії учасника в шапці — голі іконки, без плашки й рамки (рішення замовника).
   Над хмарою херо вони лишаються читабельними самі по собі: лінія в 1.5px
   на тлі тьмяних слів, а під курсором іконка світлішає */
.session__act{
  position:relative;display:grid;place-items:center;
  color:var(--cream-soft);transition:color .25s var(--ease);
  /* вихід — це <button> у формі (POST /logout), а решта дій — посилання.
     Зняття рамки, тла й падінгу залишає кнопку такою самою на вигляд:
     розмір блоку задає сама іконка 24×24 */
  padding:0;border:none;background:none;font:inherit;cursor:pointer;
  /* іконки не стискаються ніколи: місце віддає підпис імені, а не вони */
  flex:none;
}
/* форма навколо кнопки виходу — лише обгортка, власного місця не займає */
.session__out{display:flex;margin:0;flex:none}
.session__act:hover{color:var(--brass)}
.session__act svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.session__count{
  position:absolute;top:-7px;right:-10px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:99px;
  background:var(--brass);color:var(--on-brass);
  font:500 12px/1 var(--label);font-variant-numeric:tabular-nums;
}

/* ============================================================
   РЕЙКА (хедер)
   ============================================================ */
.rail{
  /* fixed, а не sticky: sticky тримає за собою місце в потоці і зрізає хмару
     зверху. Перший екран має власний верхній відступ, тож нічого не ховається. */
  position:fixed;top:0;left:0;right:0;z-index:30;
  border-bottom:1px solid transparent;
  /* підкладка завжди, не лише після скролу (прозора на 10%), без розмиття
     і без нижньої лінії */
  background:rgb(18 18 18 / .9);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
/* .is-stuck лишається (його вішає main.js), але візуально стани вже не різняться:
   підкладка однакова і до скролу, і після */
.rail__inner{
  width:100%;max-width:var(--shell);margin-inline:auto;padding:14px var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  /* зазор колонок відданий блоку учасника: бокові колонки тут РІВНІ (меню
     стоїть по центру сторінки), тому кожні зекономлені 2px зазору дають
     блоку 1px. Було clamp(14px,3vw,40px) — при меню 519.6px колонка сесії
     виходила 242.2px, а блоку потрібно 251.5px, і підпис «Публічний
     профіль» ставав у два рядки (шапка 84px проти токена --rail-h:70px).
     Рішення замовника 20 жовтня 2026: місце взяти з меню. */
  gap:clamp(14px,2vw,28px);
}
/* без власного тла: хмару за шапкою гасить суцільна підкладка .rail */
.rail__brand{
  justify-self:start;display:inline-flex;align-items:center;
  padding:0;background:none;
}
.rail__brand img{width:clamp(109px,11vw,136px);height:auto;opacity:.5;transition:opacity .3s var(--ease)}
.rail__brand:hover img{opacity:.78}
/* зазор між пунктами теж ужатий на користь блоку учасника (було
   clamp(14px,2.4vw,30px)): меню на 1440 стало 503.6px замість 519.6px */
.rail__nav{display:flex;justify-self:center;gap:clamp(14px,1.8vw,22px)}
.rail__nav a{
  display:inline-flex;align-items:center;gap:9px;
  font:500 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;
  /* без контуру, без відступів, без заокруглення і без власного тла */
  color:var(--cream-soft);text-decoration:none;padding:0;
  border:none;border-radius:0;background:none;
  transition:color .25s var(--ease);
}
.rail__nav a svg{
  width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  opacity:.75;transition:opacity .25s var(--ease),color .25s var(--ease);
}
.rail__nav a:hover{color:var(--cream)}
.rail__nav a:hover svg{opacity:1;color:var(--brass)}
/* Кнопка мобільного меню. На цільовій ширині її немає зовсім — пункти стоять
   у рядок; вмикається у медіазапиті 860px разом із випадною панеллю. Стан
   тримає aria-expanded, і він же вмикає панель (сусідський селектор нижче) —
   другого джерела правди немає, той самий підхід, що в груп вподобань. */
.rail__burger{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;padding:0;
  background:none;border:none;border-radius:2px;
  color:var(--cream-soft);cursor:pointer;
  transition:color .25s var(--ease);
}
.rail__burger:hover{color:var(--brass)}
.rail__burger svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail__burger .rail__burger-close{display:none}
.rail__burger[aria-expanded="true"]{color:var(--brass)}
.rail__burger[aria-expanded="true"] .rail__burger-open{display:none}
.rail__burger[aria-expanded="true"] .rail__burger-close{display:block}
/* Частини мобільної шухляди: хрестик усередині неї, підвал із виходом і
   затемнення тла. На цільовій ширині їх немає зовсім — меню стоїть рядком
   у шапці, а вихід іконкою в .rail__session. Усе вмикає медіазапит 860px. */
.rail__nav-x,.rail__nav-foot,.rail__scrim{display:none}
/* min-width:0 по всьому ланцюжку — щоб зайве зʼїдало імʼя, а не іконки.
   За замовчуванням у flex/grid-дитини min-width:auto, тобто вона не
   стискається вужче свого min-content; у імені стоїть nowrap, тому
   min-content блоку учасника дорівнював повній довжині імені, блок
   розпирало за колонку (на довгому імені 387.7px проти 262.2px), і
   стискалися сусіди — конверт і вихід сходили до 5.4px і до нуля. */
.rail__session{display:flex;align-items:center;justify-self:end;min-width:0}
.session{display:none;align-items:center;gap:14px;min-width:0}
body[data-session="guest"] .session--guest{display:flex}
body[data-session="member"] .session--member{display:flex}

/* блок учасника: аватар і ім'я ведуть на редагування профілю, рядок під ім'ям —
   на публічний профіль. Поряд — голі іконки повідомлень і виходу (.session__act).
   Усі розміри блоку збільшені на 20% на прохання замовника */
.member{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.member__jack{
  position:relative;width:41px;height:41px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#0c0c0d 38%,#1d1d1f 40%);
  box-shadow:0 0 0 1px var(--brass-deep),0 0 0 4px rgb(var(--brass-rgb) / .12),inset 0 2px 4px rgba(0,0,0,.8);
  display:grid;place-items:center;
  transition:box-shadow .25s var(--ease);
}
.member__jack:hover{box-shadow:0 0 0 1px var(--brass),0 0 0 4px rgb(var(--brass-rgb) / .2),inset 0 2px 4px rgba(0,0,0,.8)}
.member__photo{
  width:31px;height:31px;border-radius:50%;
  background-image:url(../img/avatars-sheet.webp);background-size:206% 206%;background-position:100% 100%;
  filter:grayscale(1) invert(1) contrast(1.1);mix-blend-mode:screen;opacity:.9;
}
/* Стеля 135px — це рівно те, що лишається текстовій колонці в сітці на
   цільовій ширині (колонка 262.2px мінус аватар 41, зазор 10 і дві іконки
   з зазорами 76). Підпис «Публічний профіль» просить 124.5px, тобто під
   стелю він проходить завжди, а довге імʼя впирається в неї і ріжеться
   трьома крапками. Обмежувати треба саме текст, а не весь .rail__session:
   max-width на блоці зачепив би й гостя, у якого дві кнопки не стискаються
   і поїхали б за правий край екрана. */
.member__text{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden;max-width:135px}
.member__name{
  font:500 17px/1.25 var(--body);color:var(--cream);text-decoration:none;
  /* довге імʼя ріжеться трьома точками, а не переносить рядок: висота
     шапки учасника мусить лишатися 70px — стільки стоїть у --rail-h */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .22s var(--ease);
}
.member__name:hover{color:var(--brass)}
.member__role{
  display:inline-flex;align-items:center;gap:5px;
  font:400 13px/1.25 var(--label);letter-spacing:.02em;color:var(--cream-dim);text-decoration:none;
  transition:color .22s var(--ease);
}
.member__role svg{
  width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.member__role:hover{color:var(--brass)}
/* тривимірна хмара: кожне вподобання — окреме слово на своїй орбіті */
/* ============================================================
   ХЕРО — хмара вподобань позаду звернення
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:grid;place-items:center;
  padding:clamp(96px,13vh,150px) var(--gutter) clamp(70px,10vh,120px);
}

/* тривимірна хмара: кожне вподобання — окреме слово на своїй орбіті */
.cloud{position:absolute;inset:0;z-index:0;pointer-events:none;perspective:1100px}
.cloud__stage{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform}
.cloud__item{
  position:absolute;left:0;top:0;white-space:nowrap;
  font:500 13px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cloud-ink);
  transform-origin:50% 50%;will-change:transform,opacity;
}
.cloud__item--brass{color:var(--cloud-accent)}

/* тепле світло знизу, як у референсі. Той самий компонент світить і на воротах
   входу — це навмисне повторення першого екрана, на прохання замовника.
   З 24 жовтня 2026 ним світить і поп-ап 18+ (.agegate__glow): правлять одне —
   міняються всі три */
.hero__glow,.gate__glow,.agegate__glow{
  position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:52%;
  opacity:var(--glow-strength);
  background:
    linear-gradient(180deg,transparent 0%,
      color-mix(in srgb,var(--glow-deep) 12%,transparent) 34%,
      color-mix(in srgb,var(--glow) 38%,transparent) 66%,
      color-mix(in srgb,var(--glow-pale) 72%,transparent) 100%),
    radial-gradient(78% 112% at 50% 122%,
      color-mix(in srgb,var(--glow-bright) 78%,transparent),
      color-mix(in srgb,var(--glow) 24%,transparent) 48%,transparent 68%);
}

.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(52% 40% at 50% 47%,rgba(12,12,13,.92) 0%,rgba(12,12,13,.68) 46%,transparent 78%);
}
.hero__inner{
  position:relative;z-index:2;
  /* на прохання замовника блок звернення опущено на 40px від попередньої композиції:
     було -40px, та підзаголовок підріс на дві строки і центрування саме підтягнуло
     блок угору — тож зсув рахуємо від виміряного положення, а не просто обнуляємо */
  transform:translateY(37px);
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;max-width:980px;
}
.hero__logo{width:min(100%,330px);height:auto;margin-bottom:6px;opacity:.7}
.hero__inner h1{
  font-size:clamp(2.35rem,5.6vw,5rem);line-height:1.05;letter-spacing:-.022em;font-weight:600;
  max-width:18ch;
  text-shadow:0 6px 40px rgba(0,0,0,.65);
}
.hero__inner h1 .hero__em{
  font-family:var(--accent-italic);font-style:italic;font-weight:500;
  /* Playfair ширший в оці за Montserrat — трохи підбираємо кегль і трекінг */
  font-size:var(--accent-italic-size,1.04em);letter-spacing:-.012em;
}
/* обіцянка під заголовком — другий голос, а не підпис: більший кегль, світліше
   чорнило і власна волосінь-роздільник, щоб рядок не тонув між h1 і кнопкою */
.hero__lead{
  position:relative;margin-top:6px;padding-top:26px;
  font-size:clamp(1.18rem,1.8vw,1.55rem);line-height:1.5;font-weight:300;
  color:rgba(242,239,233,.88);letter-spacing:.005em;
  max-width:34ch;text-wrap:balance;
  text-shadow:0 4px 26px rgba(0,0,0,.7);
}
.hero__lead::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:84px;height:1px;
  background:linear-gradient(90deg,transparent,rgb(var(--brass-rgb) / .75),transparent);
}
.hero__lead-em{
  font-family:var(--accent-italic);font-style:italic;font-weight:500;
  font-size:1.06em;letter-spacing:-.01em;color:var(--brass-light);
}
.hero__action{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:10px}
/* Дія першого екрана різна гостю («Реєстрація») й учаснику («Знайти» в
   BDSM-знайомства, просьба замовника 27 жовтня 2026). Обидві кнопки лежать
   у розмітці, а показ тримає body[data-session] — те саме джерело правди,
   що в блоках гостя й учасника в шапці (.session--guest/--member).
   inline-flex, а не flex: кнопка мусить лишитися по ширині вмісту, інакше
   вона розтяглася б на всю колонку першого екрана. */
.hero__cta{display:none}
body[data-session="guest"] .hero__cta--guest,
body[data-session="member"] .hero__cta--member{display:inline-flex}

/* --- Стрічка прапора в куті --------------------------------- */
.flag{
  /* fixed, а не absolute: стрічка їде разом зі стікі-шапкою й лишається в куті
     екрана на будь-якій глибині скролу (просьба замовника 23 жовтня 2026;
     8 жовтня 2026 було навпаки — вона належала верху сторінки й уїжджала).
     z-index вищий за .rail (30), тому стрічка лягає поверх шапки, а
     pointer-events:none лишає під нею клікабельним лого.
     Уся геометрія кутка виводиться з одного числа --flag: смуга вдвічі довша
     за куток, завтовшки п'яту його частину, зсуви — 19% і 71% від нього.
     Тому зменшити стрічку — це змінити одне число, пропорції лишаться.
     Було 100px, замовник 12 жовтня 2026 попросив менше на 30% */
  --flag:70px;
  position:fixed;z-index:40;width:var(--flag);height:var(--flag);overflow:hidden;pointer-events:none;
  display:none;
}
/* Смуга довша за куток і зрізається лише краями екрана — тому кінці
   лягають рівно на край, без «зрубаних» кутів усередині сторінки.
   Кольори — ті самі, що в серці лого. */
.flag::before{
  content:"";position:absolute;width:calc(var(--flag) * 2);height:calc(var(--flag) * .2);
  background:linear-gradient(180deg,#00aaff 0 50%,#d8bd51 50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 8px 20px -10px #000;
}
body[data-flag="left"] .flag{display:block;top:0;left:0}
body[data-flag="left"] .flag::before{top:calc(var(--flag) * .19);left:calc(var(--flag) * -.71);transform:rotate(-45deg)}
body[data-flag="right"] .flag{display:block;top:0;right:0}
body[data-flag="right"] .flag::before{top:calc(var(--flag) * .19);right:calc(var(--flag) * -.71);transform:rotate(45deg)}
body[data-flag="bottom-left"] .flag{display:block;bottom:0;left:0}
body[data-flag="bottom-left"] .flag::before{bottom:calc(var(--flag) * .19);left:calc(var(--flag) * -.71);transform:rotate(45deg)}
body[data-flag="bottom-right"] .flag{display:block;bottom:0;right:0}
body[data-flag="bottom-right"] .flag::before{bottom:calc(var(--flag) * .19);right:calc(var(--flag) * -.71);transform:rotate(-45deg)}

/* ============================================================
   ВОРОТА — вхід, реєстрація, відновлення пароля
   ============================================================ */
/* Той самий перший екран, що й на головній, тільки замість хмари й звернення —
   малюнок за формою. Три шари знизу вгору, і порядок тут не косметичний:
   малюнок (z0) → тепле світло (z1) → напівпрозора консоль (z2). Світло лежить
   НА малюнку, інакше воно гріло б порожнє тло, а не сцену; консоль лежить на
   світлі, інакше рожевий низ з'їв би контраст полів. */
.gate{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:grid;place-items:center;
  padding:clamp(96px,13vh,150px) var(--gutter) clamp(70px,10vh,120px);
  /* малюнок і його сила — на кожній сторінці свої, решта правил спільна */
  --gate-art:none;
  --gate-ink:.2;
}

/* малюнок за формою: та сама обробка, що й під формою пошуку —
   інверсія робить папір чорним, а штрих світлим. Контраст іде ДО інверсії:
   у вугільних півтонах інакше все злипається в сіру пляму */
.gate__art{
  position:absolute;z-index:0;pointer-events:none;
  /* поле згори й знизу — запас під паралакс ±56px, як у секції пошуку */
  inset:-80px 0;
  background:var(--gate-art) center/contain no-repeat;
  transform:translate3d(0,var(--par,0px),0);
  filter:grayscale(1) contrast(1.5) invert(1);
  mix-blend-mode:screen;opacity:var(--gate-ink);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%);
}
@media (prefers-reduced-motion:no-preference){.gate__art{will-change:transform}}

.gate__inner{position:relative;z-index:2;width:100%;max-width:452px}

/* консоль воріт — та сама напівпрозора панель, що й у формі пошуку:
   крізь неї має читатись малюнок, тож непрозорою її робити не можна */
.gate__form{display:flex;flex-direction:column;gap:18px}
.gate__head{margin-bottom:4px;text-align:center}
.gate__head h1{font-size:clamp(1.7rem,2.8vw,2.25rem);line-height:1.1;letter-spacing:-.018em;font-weight:600}
.gate__lead{
  margin-top:10px;font-size:15px;font-weight:300;line-height:1.5;
  color:var(--cream-soft);text-wrap:pretty;
}

/* поле вводу — та сама тарілка, що й у кнопки селектора: дно #0e0e0f,
   контур --edge, --sink, радіус 2px. Нового фону не вигадуємо */
.ctrl{
  width:100%;padding:14px 16px;border:1px solid var(--edge);border-radius:2px;
  background:#0e0e0f;box-shadow:var(--sink);
  color:var(--cream);font:400 16px/1.2 var(--body);
  transition:border-color .22s var(--ease);
}
.ctrl:hover{border-color:var(--edge-bright)}
.ctrl:focus{border-color:rgb(var(--brass-rgb) / .5)}
/* автозаповнення браузера малює власне біле тло поверх нашого —
   гасимо його тінню завтовшки в поле, інакше крізь форму світить біла пляма */
.ctrl:-webkit-autofill{
  -webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 100px #0e0e0f inset,var(--sink);
  caret-color:var(--cream);
}

/* око біля пароля: кнопка стоїть усередині поля, тож полю потрібен правий запас */
.ctrl-wrap{position:relative}
.ctrl--pass,.ctrl--copy{padding-right:52px}
.ctrl__peek,.share__copy{
  position:absolute;right:5px;top:50%;translate:0 -50%;
  display:grid;place-items:center;width:40px;height:40px;
  border:none;border-radius:2px;background:none;
  color:var(--cream-dim);cursor:pointer;transition:color .22s var(--ease);
}
.ctrl__peek:hover,.share__copy:hover{color:var(--brass)}
.ctrl__peek svg,.share__copy svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ctrl__peek .ctrl__peek-off{display:none}
.ctrl__peek[aria-pressed="true"] .ctrl__peek-on{display:none}
.ctrl__peek[aria-pressed="true"] .ctrl__peek-off{display:block}

/* ряд під полем пароля: службове посилання праворуч, підказка (якщо є) ліворуч */
.gate__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:12px;margin-top:-4px}
.gate__hint{margin-right:auto;font-size:13px;font-weight:300;color:var(--cream-dim)}
.gate__link{
  font:500 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-soft);text-decoration:none;transition:color .22s var(--ease);
}
.gate__link:hover{color:var(--brass)}

.gate__submit{width:100%;margin-top:6px}
.gate__note{
  margin-top:2px;font-size:13px;font-weight:300;line-height:1.5;
  color:var(--cream-dim);text-align:center;text-wrap:pretty;
}
.gate__note a{color:var(--cream-soft)}
.gate__note a:hover{color:var(--brass)}

/* перехід на сусідні ворота — під консоллю, а не в ній:
   усередині панелі це була б плашка в плашці */
.gate__alt{
  margin-top:20px;text-align:center;
  font-size:14px;font-weight:300;color:var(--cream-dim);
}
.gate__alt a{color:var(--cream);text-decoration-color:rgb(var(--brass-rgb) / .45);transition:color .22s var(--ease)}
.gate__alt a:hover{color:var(--brass)}

/* малюнок кожних воріт. Сила різна за манерою оригіналу: у вугільного шаржу
   великі чорні маси, після інверсії вони спалахують — йому менше непрозорості,
   акварелі з середніми тонами навпаки більше.
   ВАЖЛИВО про вибір оригіналу: світиться те, що на папері ЧОРНЕ. Тож сюжет
   мусить бути намальований темною масою на світлому папері (силует, залитий
   тушшю обрис). Малюнок із підсвіченими тілами на темному тлі після інверсії
   дає навпаки: тіла тонуть, світиться тло — перевірено на auth-bg-embrace,
   він тому й не пішов у роботу. */
.gate--register{--gate-art:url(../img/auth-bg-pair-behind.webp);--gate-ink:.2}
.gate--login{--gate-art:url(../img/auth-bg-pair-spark.webp);--gate-ink:.2}
.gate--reset{--gate-art:url(../img/auth-bg-dust.webp);--gate-ink:.2}

/* ============================================================
   404 — СТОРІНКИ НЕМАЄ
   ============================================================ */
/* Та сама сцена, що на воротах, і тому свого тут майже нічого: секція бере
   в .gate геометрію (100svh, place-items:center), три шари, світло й
   паралакс — блок у main.js перебирає $$('.search, .gate'), тож нову
   сторінку в нього дописувати не треба.
   Малюнок — профіль, що розтає в чорнильному димі: з усього вже
   намальованого він єдиний про зникнення, а сюжет у нього вище й лівіше
   центру — тобто консоль, яка стоїть рівно посередині, його не з'їдає. */
.gate--nf{--gate-art:url(../img/auth-bg-smoke.webp);--gate-ink:.2}
/* ширше за ворота на 28px: у тарілок-переходів довгі назви з трекінгом,
   у 452px «Календар івентів» лишає обабіч по 40px і ряд виглядає тісним */
.gate--nf .gate__inner,.gate--err .gate__inner,.gate--locked .gate__inner{max-width:480px}

/* цифра стоїть НАД консоллю, а не в ній: усередині вона була б другим
   заголовком, якого читалка не потребує (сенс несе h1, тому цифра
   aria-hidden), а над панеллю це знак сцени — те саме місце, де в херо
   стоїть лого. Нуль акцентний і це єдина кольорова пляма екрана; колір
   береться з --brass-rgb, як усе акцентне на сайті */
.nf__code,.err__code{
  margin-bottom:clamp(16px,2.6vh,28px);
  font:600 clamp(4rem,8.6vw,7rem)/.88 var(--display);
  letter-spacing:-.04em;text-align:center;
  text-shadow:0 6px 40px rgba(0,0,0,.65);
}
.nf__code span,.err__code span{color:var(--brass)}

/* консоль воріт тримає поля формою (.gate__form), тут форми немає —
   тож колонку задає сама картка, а кнопці потрібен свій відступ від ліда:
   успадковані 6px між текстом і головною дією замалі */
.nf__card,.err__card,.lock__card{display:flex;flex-direction:column}
.nf__card .gate__submit,.err__card .gate__submit,.lock__card .gate__submit{margin-top:clamp(18px,2.4vw,26px)}

/* курсивна вставка в ліді — той самий другий голос, що в заголовку херо */
.nf__em,.err__em{
  font-family:var(--accent-italic);font-style:italic;font-weight:500;
  font-size:1.06em;letter-spacing:-.01em;color:var(--brass-light);
}

/* підпис із волосінями обабіч розділяє головну дію й переходи, не вводячи
   ні нової плашки, ні суцільної лінії на всю панель */
.nf__or,.gate__or{
  display:flex;align-items:center;gap:14px;
  margin-top:clamp(20px,2.6vw,26px);
  font:500 11px/1 var(--label);letter-spacing:.19em;text-transform:uppercase;
  color:var(--cream-dim);
}
.nf__or::before,.nf__or::after,.gate__or::before,.gate__or::after{content:"";flex:1;height:1px}
.nf__or::before,.gate__or::before{background:linear-gradient(90deg,rgba(242,239,233,0),var(--edge-bright))}
.nf__or::after,.gate__or::after{background:linear-gradient(90deg,var(--edge-bright),rgba(242,239,233,0))}

/* переходи — та сама утоплена тарілка, що канал зв'язку на сторінці події
   (.nf__way дописано в .ev__way): дно #0e0e0f, контур --edge, --sink,
   радіус 2px. Плашки в плашці тут немає — утоплена площина це друге з двох
   стані глибини, а не третя поверхня */
.nf__ways{display:grid;gap:10px;margin-top:16px}
.nf__way span{font-size:15px;color:var(--cream)}

/* ============================================================
   500 — ЗБІЙ СЕРВЕРА
   ============================================================ */
/* Сестра 404-ї, і тому свого тут майже нічого: сцена воріт, цифра над консоллю
   (.err__code дописано в .nf__code) і той самий курсив у ліді. Відрізняється
   сенсом — сторінка каже не «цього немає», а «це наше, і ми цим зайняті», —
   тож усередині стоїть рядок стану з живою крапкою і смуга «триває» зі
   сторінки оновлення (.err__status, .err__pulse, .err__bar дописані в .upd__*).
   Нової поверхні сторінка не вводить зовсім.
   Малюнок — ТОЙ САМИЙ чорнильний дим, що на 404, тільки дзеркально: там він
   іде ліворуч, тут праворуч, і дві сторінки помилок не читаються як один
   екран. Вільних сюжетів у затвердженій манері не лишилось, а перевірені
   знімком заміни не годяться: акварель (search-bg-wash) після інверсії дає
   фактуру на весь екран без сюжету, вугільні arms і water тонуть (бо папір
   у них теплий, а не білий), lean кладе двох рівно по центру — під консоль.
   Дзеркалимо властивістю scale, а НЕ transform: transform зайнятий
   паралаксом (--par), і перезапис стер би зсув. */
.gate--err{--gate-art:url(../img/auth-bg-smoke.webp);--gate-ink:.2}
.gate--err .gate__art{scale:-1 1}

/* рядок стану стоїть одразу під заголовком, і відступ йому потрібен свій:
   зазору в картці немає, її ряди розставляють себе самі. Центрування спільне
   (див. .upd__status): замовник попросив його 16 жовтня 2026 спершу тут, а
   потім і на сторінці оновлення */
.err__card .err__status{margin-top:clamp(18px,2.4vw,24px)}

/* пояснення під смугою — тихіше за заголовок: це вже подробиця, а не головна
   думка екрана. Той самий рядок стоїть і на сторінці оновлення (.upd__said):
   правлять одне — міняються обидві */
.err__said,.upd__said{
  margin-top:13px;font-size:14px;font-weight:300;line-height:1.55;
  color:var(--cream-dim);text-align:center;text-wrap:pretty;
}

/* друга дія — лише для учасника. Показ тримає data-session на <body>, той
   самий, що перемикає блоки в шапці: другого джерела правди немає.
   Повертаємо саме inline-flex, бо такий display у .btn */
.err__acct{display:none;width:100%;margin-top:10px}
body[data-session="member"] .err__acct{display:inline-flex}

/* ============================================================
   СТОРІНКА ОНОВЛЕННЯ
   ============================================================ */
/* Ті самі ворота, тільки замість форми — повідомлення про технічні роботи.
   Шари ті самі (малюнок → світло → консоль), нової поверхні сторінка не вводить:
   своє в неї лише індикатор і підпис унизу.
   У консолі стоять три рядки й нічого більше (рішення замовника 16 жовтня 2026,
   другим раундом): стан, смуга «триває» і обіцянка «за кілька хвилин». Лід під
   заголовком, смуга фактів із часом повернення і канал зв'язку з модераторами
   зняті — разом із ними пішли правила .upd__lead, .upd__facts і .upd__ways.
   Шапки й підвалу тут немає свідомо: поки йде оновлення, усі пункти меню вели б
   у нікуди, тож з екрана не ведуть узагалі нікуди.
   Малюнок — той самий силует, що розпадається в пил, що й на відновленні пароля:
   у затвердженій манері вільних сюжетів не лишилось, а «розпад і збирання
   наново» — саме те, що сторінка й означає. */
.gate--update{--gate-art:url(../img/auth-bg-dust.webp);--gate-ink:.2}

/* --- Замкнений каталог спільноти ----------------------------- */
/* Що бачить гість за адресою /community і /bdsm (рішення замовника
   17 жовтня 2026). Сцена, картка, розділювач і кнопки — усе те саме, що
   на 404; своїх тут лише два рядки.
   Малюнок у кожної спільноти СВІЙ, і він не новий: це той самий аркуш,
   що лежить за її формою пошуку. Обидва намальовані так, що фігури
   розведені до країв, а центр — чистий папір; саме туди стає консоль,
   і тому вони годяться там, де не годиться сюжет по центру. */
.gate--locked-kink{--gate-art:url(../img/search-bg-pair.webp);--gate-ink:.2}
.gate--locked-bdsm{--gate-art:url(../img/search-bg-bdsm.webp);--gate-ink:.2}
/* друга дія під головною: та сама геометрія, що в кнопки кабінету на
   сторінці 500 (.err__acct), тільки видима завжди */
.lock__enter{width:100%;margin-top:10px}

/* блок ширший за форму воріт (452px): у ньому не поля, а заголовок і консоль */
.upd{
  max-width:536px;display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,2.6vw,28px);text-align:center;
}
.upd__head{display:flex;flex-direction:column;align-items:center}
.upd__logo{width:min(100%,250px);height:auto;opacity:.7}
/* капітель акцентом над заголовком — той самий підпис, що «Розділ 01» у правилах */
.upd__kicker{
  margin-top:clamp(18px,2.4vw,28px);
  font:500 11px/1 var(--label);letter-spacing:.19em;text-transform:uppercase;color:var(--brass);
}
.upd__head h1{
  margin-top:12px;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.02em;font-weight:600;
  text-shadow:0 6px 40px rgba(0,0,0,.65);
}
/* консоль — та сама напівпрозора панель, що у воротах: крізь неї читається малюнок */
.upd__card{width:100%}

/* рядок стану: крапка пульсує кільцем, а не свіченням — блюр у системі заборонений */
.upd__status,.err__status{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:var(--cream-soft);
}
.upd__pulse,.err__pulse{
  width:8px;height:8px;flex:none;border-radius:50%;background:var(--brass);
  animation:upd-beat 2.6s var(--ease) infinite;
}

/* індикатор без числа: скільки лишилось — не знає ніхто, тож смуга показує саме
   «триває», а не відсоток. Тому в розмітці role="progressbar" без aria-valuenow —
   це і є стандартний спосіб сказати читалці «невизначений прогрес» */
.upd__bar,.err__bar{
  position:relative;overflow:hidden;margin-top:15px;height:4px;border-radius:2px;
  background:rgba(242,239,233,.1);box-shadow:var(--sink);
}
.upd__bar::after,.err__bar::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:36%;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  animation:upd-run 2.6s var(--ease) infinite;
}
@keyframes upd-run{from{transform:translateX(-105%)}to{transform:translateX(283%)}}
@keyframes upd-beat{
  0%{box-shadow:0 0 0 0 rgb(var(--brass-rgb) / .45)}
  70%{box-shadow:0 0 0 10px rgb(var(--brass-rgb) / 0)}
  100%{box-shadow:0 0 0 0 rgb(var(--brass-rgb) / 0)}
}
/* без руху смуга лишається статичною акцентною лінією, а не зникає зовсім:
   вона й далі означає «процес іде» */
@media (prefers-reduced-motion:reduce){
  .upd__bar::after,.err__bar::after{position:static;width:100%;height:100%;background:rgb(var(--brass-rgb) / .5);animation:none}
  .upd__pulse,.err__pulse{animation:none}
}

/* підпис унизу замість підвалу: сторінка стоїть замість сайту, і вести з неї нікуди */
.upd__foot{font-size:13px;font-weight:300;line-height:1.6;color:var(--cream-dim)}

/* ============================================================
   ПОШУК — консоль
   ============================================================ */
.search{
  /* z-index:2 — панель вподобань спливає нижче консолі, за межі секції.
     Без нього наступна секція (вона positioned і йде пізніше в дереві)
     малювалася б поверх панелі й з'їдала б її нижню половину */
  position:relative;isolation:isolate;z-index:2;padding-block:clamp(78px,11vh,148px);
  background:linear-gradient(180deg,rgba(9,9,10,.75),rgba(18,18,19,.2) 40%,rgba(9,9,10,.6));
}
/* вугільний малюнок за консоллю: інверсія робить папір чорним, а штрих світлим,
   і він підмішується екраном до секції. Маска гасить краї, щоб малюнок не бився
   об сусідні секції; сама консоль напівпрозора, тож дві постаті читаються крізь неї */
/* .hunt--bdsm::after тут не випадково: це ДРУГИЙ шар малюнка, потрібний для
   перехресного згасання (нижче, біля .hunt--bdsm[data-art]). Обробка, геометрія
   й маска в нього ті самі, тому він дописаний у вже наявні правила, а не
   описаний заново — своїми лишаються тільки токен і прозорість */
.search::before,.hunt::before,.hunt--bdsm::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  background:var(--search-art) center/contain no-repeat;
  /* поле вище й нижче секції — запас під паралакс, інакше зсув оголив би край.
     Обрізати його через overflow:hidden не можна: секція містить випадні списки
     селекторів, і клип зрізав би їх. Виносу за межі секції не видно, бо маска
     на цих 80px уже майже в нулі */
  inset:-80px 0;
  transform:translate3d(0,var(--par,0px),0);
  /* контраст ДО інверсії: у заливках акварелі середні тони, без цього кроку
     вони після інверсії ледь відрізняються від тла і малюнок читається як пляма */
  filter:grayscale(1) contrast(1.5) invert(1);
  mix-blend-mode:screen;opacity:.2;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%);
}
@media (prefers-reduced-motion:no-preference){.search::before{will-change:transform}}
.search .shell{position:relative;z-index:1}
/* пошук на головній знятий замовником, але розмітка лишається в DOM — з неї хмара
   в hero бере слова. Правило обов'язкове: браузерний [hidden] слабший за будь-який
   свій display, і та сама грабля вже була в .group__body[hidden] та .acct__form[hidden] */
.search[hidden]{display:none}

/* зона малюнка на сторінках спільноти: секція там одна на всю сторінку разом
   зі списком анкет, тож шар не повісити на неї — «секцією пошуку» служить
   обгортка навколо форми. Обробка й сила світла спільні з .search вище:
   правлять малюнок — змінюються обидві сторінки. isolation і z-index:2 — теж
   як у секції: панель вподобань спливає всередині зони, а сама зона стоїть
   над колонками результатів */
.hunt{position:relative;isolation:isolate;z-index:2}
/* верх малюнка збігається з верхом форми, низ заходить на результати пошуку
   (рішення замовника 15 жовтня 2026). Звідси три відмінності від секції:
   зона починається рівно з консолі (inset згори 0) і малюнок притиснутий до
   її верху (center top, а не center — інакше contain центрував би його і верх
   поїхав би вниз); 208px знизу — це рівно той залишок, що не вміщається в
   консоль: при ширині оболонки 1084px малюнок 16:9 заввишки 610px, а консоль
   402px; маска згори не гасить нічого, бо гасити тепер нічого — вона тільки
   розчиняє низ на тих 208px, що лежать на заголовку результатів */
.hunt::before,.hunt--bdsm::after{
  inset:0 0 -208px;background-position:center top;
  /* паралакс знятий: він возить малюнок на ±56px, а верх мусить стояти на
     верху форми — рух ламав би саме те, про що просили */
  transform:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
}
.hunt > .console{position:relative;z-index:1}
/* ─── Мобільна панель «Фільтри» ───────────────────────────────────
   Просьба замовника 23 жовтня 2026: на телефоні консоль згортається в
   липку смугу під шапкою — «Фільтри» і число накладених, тап розкриває
   форму вниз. На цільовій ширині панелі немає зовсім: смуга погашена,
   чекбокс лишається незнятим, і консоль стоїть у потоці, як стояла.
   Решта правил — у медіазапиті 860px. */
.hunt__switch{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.hunt__bar{display:none}
/* підпис кнопки пошуку: широкий — на цільовій ширині, «Застосувати
   фільтри» — у мобільній панелі (там кнопка закриває саме фільтри) */
.console__cta--slim{display:none}
/* у BDSM-спільноти свій малюнок, решта шару спільна. Токена два, бо шарів
   два — див. перехресне згасання нижче */
.hunt--bdsm{--search-art:url(../img/search-bg-bdsm.webp);--search-art-b:url(../img/search-bg-bdsm.webp)}
/* ...і він міняється за умовами пошуку (рішення замовника 23 жовтня 2026).
   Базовий — той, що був: ліворуч навколішках жінка, праворуч стоїть
   чоловік. Три інші намальовані правкою того ж аркуша через --ref, тож
   композиція, обробка й непрозорість спільні — міняється один токен.
   Хто який вибирає, вирішує App\Support\SearchArt (сервер) і той самий
   набір правил у main.js (поки людина клацає поля). */
.hunt--bdsm[data-art=ff]{--search-art:url(../img/search-bg-bdsm-ff.webp)}
.hunt--bdsm[data-art=mm]{--search-art:url(../img/search-bg-bdsm-mm.webp)}
.hunt--bdsm[data-art=fdom]{--search-art:url(../img/search-bg-bdsm-fdom.webp)}
/* Міняється малюнок ПЕРЕХРЕСНИМ ЗГАСАННЯМ, а не стрибком (просьба замовника
   23 жовтня 2026). Шарів через це два — ::before і ::after, — і вони міняються
   ролями: наступний малюнок JS кладе в ТОЙ, ЩО ЗАРАЗ У ТІНІ, а тоді перемикає
   видимість одним атрибутом. Звідси головна вигода: підміни «на видноті» не
   буває, тож ні тайм-аутів, ні transitionend, ні скидання стану — сам перехід
   цілком на CSS, а JS лишається тим самим рядком, що й був.

   Чому не простіше, одним шаром «згасло — підмінили — проявили»: малюнок на
   мить зникав би зовсім, і на темній сторінці це читається як блимання всієї
   зони, а не як зміна картинки.

   Крива в обох шарів ОДНА, і це не косметика: шари підмішуються екраном, тож
   сума їхніх прозоростей мусить лишатися .2 на всьому шляху. При спільній
   кривій .2·(1−p) + .2·p дає рівно .2 у будь-який момент, а різні криві дали б
   просвітління посередині переходу. */
.hunt--bdsm[data-art-b=ff]{--search-art-b:url(../img/search-bg-bdsm-ff.webp)}
.hunt--bdsm[data-art-b=mm]{--search-art-b:url(../img/search-bg-bdsm-mm.webp)}
.hunt--bdsm[data-art-b=fdom]{--search-art-b:url(../img/search-bg-bdsm-fdom.webp)}
.hunt--bdsm::after{background-image:var(--search-art-b);opacity:0}
.hunt--bdsm[data-art-layer=b]::before{opacity:0}
.hunt--bdsm[data-art-layer=b]::after{opacity:.2}
.hunt--bdsm::before,.hunt--bdsm::after{transition:opacity .45s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .hunt--bdsm::before,.hunt--bdsm::after{transition:none}
}

/* ─── Вертикальні малюнки для телефона ───────────────────────────
   Ті самі сюжети й та сама манера, але аркуш портретний (900×1575).
   Навіщо: на вузькому екрані широкий 16:9 після contain стискається в
   смужку заввишки ~220px, яка цілком ховається за консоллю — а згори й
   знизу лишається порожня чорнота, тобто малюнка на телефоні фактично
   немає. Портретний аркуш заповнює екран на всю висоту.
   Композиція в кожного перебудована під вертикаль за одним правилом:
   маса сюжету вгорі (голови видно НАД консоллю), а штрих, пил і бризки
   сиплються ВНИЗ і гаснуть на нижній третині — там, де лежить
   напівпрозора панель і де вона закінчується. У BDSM-аркушах постаті
   рознесені по діагоналі: та, що стоїть, — угорі праворуч, та, що на
   колінах, — унизу ліворуч, шнур іде між ними через порожній папір.
   Промпти кожного — у сайдкарах design/generated/*-mob.png.json.

   Запит — ширина І орієнтація, не лише ширина: телефон у ландшафті має
   до 860px завширшки і ~390px заввишки, і портретний аркуш після contain
   дав би там ту саму смужку, тільки вузьку. Тож по ширині вмикаємо те
   саме, що й мобільну панель фільтрів (860px), а ландшафт відсікаємо
   орієнтацією — у ньому лишаються широкі аркуші.
   Чому саме 860px, а не сам лише aspect-ratio: зона малюнка на сторінках
   спільноти заввишки з КОНСОЛЬ плюс 208px, а консоль згортається в смугу
   рівно на 860px. На ширшому портретному екрані (планшет 1024×1366)
   консоль ще широка, зона малюнка низька — і портретний аркуш після
   contain став би там вужчим за палець. Тобто правило прив'язане не до
   екрана, а до того, якою зараз є консоль. */
@media (max-width:860px) and (orientation:portrait){
  .gate--login{--gate-art:url(../img/auth-bg-pair-spark-mob.webp)}
  .gate--register{--gate-art:url(../img/auth-bg-pair-behind-mob.webp)}
  .gate--reset,.gate--update{--gate-art:url(../img/auth-bg-dust-mob.webp)}
  .gate--nf,.gate--err{--gate-art:url(../img/auth-bg-smoke-mob.webp)}
  .gate--locked-kink{--gate-art:url(../img/search-bg-pair-mob.webp)}
  .gate--locked-bdsm{--gate-art:url(../img/search-bg-bdsm-mob.webp)}
  /* форма пошуку: токен спільний для .search і .hunt, як і на широкому
     екрані, а BDSM-спільнота має свій аркуш і свої три варіанти.
     Порядок рядків тут значущий: селектори однакової ваги, тож
     .hunt--bdsm мусить стояти ПІСЛЯ спільного .search,.hunt, а варіанти
     з атрибутом — після нього */
  .search,.hunt{--search-art:url(../img/search-bg-pair-mob.webp)}
  .hunt--bdsm{
    --search-art:url(../img/search-bg-bdsm-mob.webp);
    --search-art-b:url(../img/search-bg-bdsm-mob.webp);
  }
  .hunt--bdsm[data-art=ff]{--search-art:url(../img/search-bg-bdsm-ff-mob.webp)}
  .hunt--bdsm[data-art=mm]{--search-art:url(../img/search-bg-bdsm-mm-mob.webp)}
  .hunt--bdsm[data-art=fdom]{--search-art:url(../img/search-bg-bdsm-fdom-mob.webp)}
  .hunt--bdsm[data-art-b=ff]{--search-art-b:url(../img/search-bg-bdsm-ff-mob.webp)}
  .hunt--bdsm[data-art-b=mm]{--search-art-b:url(../img/search-bg-bdsm-mm-mob.webp)}
  .hunt--bdsm[data-art-b=fdom]{--search-art-b:url(../img/search-bg-bdsm-fdom-mob.webp)}
}
.console{
  border:1px solid var(--edge);background:var(--panel-sheer);box-shadow:var(--lift);
  padding:clamp(22px,3vw,40px);
}
/* п'ять полів в один рядок: «Хочу знайти», «Який(яка) шукає», «Область»,
   «Місто», «Вік» (рішення замовника 20 жовтня 2026: область стоїть перед
   містом, а мета знайомства з першого ряду пішла — у кінкі-формі вона
   тепер рядок гнізд під полями, у BDSM-формі перше поле другого ряду;
   25 жовтня 2026 перші два поля помінялися місцями й підписами — до того
   були «Я» і «Шукаю»). Колонки нерівні, і
   пропорції тут не декоративні — кожна дорівнює своєму найдовшому значенню
   плюс кімната кнопки (32px поля + 12px зазор + 18px стрілка): «Небінарну
   особу» 126px, «Небінарна особа» 127px, «Івано-Франківська» ~133px,
   «Івано-Франківськ» 134px, а віку досить двох чисел. Довші назви міст
   («Білгород-Дністровський») свідомо віддані трикрапці: з чотирма сотнями
   міст у довіднику міряти колонку під найдовше означало б забрати місце в
   решти полів, а в списку місто шукають уводом. Ряд полів лишився один,
   тож вертикальний зазор від нього не залежить — звідси окремі column-gap
   і row-gap: горизонтальний 14px, бо суми мінімумів (889px) і колишніх
   34px у рядок 1002px не стає */
.console__row{
  display:grid;
  /* вік не стискається нижче 121px: це рівно дві тарілки .ctrl--age з двома
     цифрами всередині плюс тире між ними, і на вужчих екранах інакше
     обрізалося б саме число. Решта колонок стискається далі — у селекторах
     на цей випадок є трикрапка і «+N» */
  grid-template-columns:minmax(0,1.58fr) minmax(0,1.58fr) minmax(0,1.64fr) minmax(0,1.64fr) minmax(121px,1fr);
  column-gap:14px;row-gap:clamp(18px,2.4vw,34px);
}

/* другий рядок полів — тільки у формі BDSM-спільноти: позиціонування,
   напрямок, основні практики. Мета знайомства стояла тут першим полем
   із 20 жовтня 2026 і того ж дня пішла: замовник попросив і в
   BDSM-формі гнізда, як у кінкі (.goals нижче), — тож полів знову три.
   Колонки РІВНІ (рішення замовника 23 жовтня 2026: «три фільтри
   зробити однаковими по ширині»). До того вони були нерівні — кожна
   під своє найдовше значення: 218 / 397 / 359px. Рівна виходить
   324.67px ((1002 − 2 × 14) / 3), і це більше, ніж просить найдовше
   значення напрямку («Психологічні ігри з владою (БД)» — 240px тексту
   плюс 62px кімнати кнопки), тож трикрапки не додалося; побічний
   ефект один — позиціонуванню («Будь-яке / верх / низ / світч») тепер
   більше місця, ніж йому треба. Горизонтальний зазор спільний із
   першим рядом (14px): два ряди однієї консолі мусять читатися однією
   сіткою. Правило стоїть ДО медіазапитів навмисно — на 1060px ряд
   складається в дві колонки, на 620px в одну, разом із першим */
.console__row--three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* відступ між рядами полів той самий, що зазор рядків усередині ряду */
.console__row + .console__row{margin-top:clamp(18px,2.4vw,34px)}

/* мета знайомства — рядок гнізд, а не селектор, і з 20 жовтня 2026 це
   так в ОБОХ формах пошуку: спершу замовник попросив гнізда в кінкі
   («тільки чекбокси, без селекта»), того ж дня — те саме в BDSM. До
   15 жовтня тут теж були гнізда, потім селектор, тепер знову гнізда —
   але вже окремим рядом під полями, а не колонкою в ряду.
   Відступ той самий, що над легендою «Вподобання», — ряди консолі
   мусять мати один ритм */
.goals{margin:clamp(24px,3vw,36px) 0 0;padding:0;border:0;min-width:0}
.goals > .field__label{display:block;margin-bottom:14px;padding:0}

.field{display:flex;flex-direction:column;gap:11px;min-width:0}
.field__label{
  font:500 14px/1 var(--label);letter-spacing:.19em;text-transform:uppercase;color:var(--brass);
}

/* селектор */
.selector{position:relative}
.selector__btn{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:14px 16px;border:1px solid var(--edge);border-radius:2px;
  background:#0e0e0f;box-shadow:var(--sink);
  color:var(--cream);font:400 16px/1.2 var(--body);text-align:left;cursor:pointer;
  transition:border-color .22s var(--ease);
}
.selector__btn:hover{border-color:var(--edge-bright)}
/* значення завжди в один рядок: JS згортає перелік у «+N» по фактичній ширині
   кнопки, а nowrap з трикрапкою — остання страховка. Без неї довга пара
   («Київ, Івано-Франківськ») ламала кнопку на два рядки, і весь ряд полів
   підскакував на 19px */
.selector__value{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.selector__arrow{width:18px;height:18px;flex:none;margin-inline-start:auto;fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.selector[data-open] .selector__arrow{transform:rotate(180deg)}
.selector[data-open] .selector__btn{border-color:rgb(var(--brass-rgb) / .5)}
.selector__list{
  position:absolute;z-index:12;left:0;right:0;top:calc(100% + 6px);
  max-height:290px;overflow:auto;
  border:1px solid var(--edge-bright);background:#141415;
  box-shadow:0 30px 60px -30px #000;
}
.selector__list li{padding:11px 16px;font-size:15px;cursor:pointer;color:var(--cream-soft)}
.selector__list li:hover,.selector__list li.is-cursor{background:#1d1d1f;color:var(--cream)}
.selector__list li[aria-selected="true"]{color:var(--brass)}

/* множинний вибір («Шукаю» і «Місто», рішення замовника 15 жовтня 2026):
   пункт отримує квадратну позначку — та сама тарілка й та сама галочка з
   двох сторін рамки, що в гнізда .jack. Без неї зі списку не видно, що
   вибрано кілька; в одиничних селекторах позначки немає навмисно */
.selector__list[aria-multiselectable="true"] li{position:relative;display:flex;align-items:center;gap:12px}
.selector__list[aria-multiselectable="true"] li::before{
  content:"";flex:none;width:17px;height:17px;border-radius:2px;background:#0e0e0f;
  box-shadow:0 0 0 1px rgb(var(--brass-rgb) / .35),inset 0 2px 3px rgba(0,0,0,.9);
}
.selector__list[aria-multiselectable="true"] li[aria-selected="true"]::before{
  box-shadow:0 0 0 1px var(--brass),inset 0 2px 3px rgba(0,0,0,.9);
}
/* галочка стоїть окремим шаром: у ::before свого ::after немає.
   21px — це поле списку 16 плюс 5 усередині квадрата 17px */
.selector__list[aria-multiselectable="true"] li[aria-selected="true"]::after{
  content:"";position:absolute;left:21px;top:calc(50% - 6.5px);width:5px;height:9px;
  border:solid var(--brass);border-width:0 2px 2px 0;transform:rotate(45deg);
}
/* список із пошуком (міста й області, 20 жовтня 2026). Поле вводу не можна
   покласти всередину <ul role="listbox">, тому позиція, рамка й тінь
   переїхали на обгортку .selector__drop, а список усередині лишився просто
   прокруткою. Жодної нової поверхні: саме поле — та сама втоплена тарілка
   .ctrl, що в решті форм */
.selector__drop{
  position:absolute;z-index:12;left:0;right:0;top:calc(100% + 6px);
  border:1px solid var(--edge-bright);background:#141415;
  box-shadow:0 30px 60px -30px #000;
}
.selector__drop .selector__list{position:static;max-height:252px;border:0;background:none;box-shadow:none}
.selector__find{display:block;width:calc(100% - 16px);margin:8px;padding:10px 12px;font-size:15px}
.selector__none{padding:2px 16px 12px;font:300 13px/1.4 var(--body);color:var(--cream-dim)}
/* правило мусить стояти ПІСЛЯ .selector__list[aria-multiselectable] li:
   специфічність однакова (0,2,1), вирішує порядок, а без нього схований
   пошуком пункт лишився б на екрані через display:flex у множинного
   селектора. Та сама грабля, що в .event__photo--b */
.selector__list li[hidden]{display:none}

/* вік — два поля вводу (замовник, 15 жовтня 2026; до того була шкала з двома
   штекерами). Нової поверхні тут немає: обидва поля — та сама тарілка .ctrl,
   що й решта полів станції, тільки вужча й з числами по центру */
.age{display:flex;align-items:center;gap:10px}
.ctrl--age{padding-inline:12px;text-align:center;font-variant-numeric:tabular-nums}
/* спінери Chrome малює сам браузер — на темній тарілці вони світять світлим,
   та сама природа, що в погашеного автозаповнення й нативного календаря */
.ctrl--age::-webkit-outer-spin-button,.ctrl--age::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ctrl--age{-moz-appearance:textfield;appearance:textfield}
.age__dash{flex:none;color:var(--cream-dim);font:400 16px/1 var(--body)}

/* вподобання — поле гнізд */
/* Відступ над «Вподобання»: консоль — два ряди, ряд полів і вподобання, і
   вони відбиті один від одного рівно (мета знайомства з 15 жовтня 2026 стоїть
   п'ятим полем у тому самому ряду, а не окремим рядом гнізд).
   12 жовтня 2026 відступ був зменшений до clamp(16px,2vw,24px), а
   15 жовтня 2026 замовник попросив приблизно в півтора раза більший — звідси
   clamp(24px,3vw,36px): на цільовій ширині 36px замість 24px. Правило ловить
   і консоль на головній, і ту саму консоль на сторінці спільноти; у кабінеті
   ритм задає панель, і там відступ погашений (.acct__prefs) */
.prefs{margin:clamp(24px,3vw,36px) 0 0;padding:0;border:none}
.prefs__field{
  margin-top:28px;display:grid;gap:clamp(20px,2.4vw,34px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
/* у BDSM-спільноті розділів лишилося чотири (БДСМ і Шибарі переїхали в поля
   другого ряду), і мірка 248px клала їх три плюс один — останній висів у
   другому рядку сам. 190px — ширина найдовшого заголовка «Сексуальні
   практики» зі стрілкою, тож чотири стають в один ряд (колонка 225px на
   цільовій ширині), а вужче сітка так само переноситься сама */
.prefs__field--four{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* заголовок групи — кнопка, яка відкриває панель вподобань. Панель спливає
   НАД вмістом, а не розсуває його: сторінка не міняє висоти від відкриття
   (рішення замовника 12 жовтня 2026) */
.group{position:relative}
.group h3{font:inherit;letter-spacing:inherit}
.group__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 0 12px;cursor:pointer;text-align:left;
  border:none;border-bottom:1px solid var(--edge);border-radius:0;background:none;
  font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cream-soft);
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.group__head:hover{color:var(--cream);border-bottom-color:rgb(var(--brass-rgb) / .45)}
.group__head:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.group__arrow{
  width:15px;height:15px;flex:none;fill:none;stroke:var(--brass);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
/* відкритий заголовок підсвічується тим самим акцентом, що й кнопка
   селектора з розгорнутим списком — це той самий жест */
.group__head[aria-expanded="true"]{border-bottom-color:rgb(var(--brass-rgb) / .5)}
.group__head[aria-expanded="true"] .group__arrow{transform:rotate(180deg)}
/* панель вподобань — той самий предмет, що випадний список селектора:
   абсолютна, над вмістом, із власним дном, контуром і тінню. Висока група
   прокручується всередині, а не розсуває сторінку.
   Padding 14/16px потрібен не лише для повітря: кільце гнізда малює рамку і
   свічення (:hover / :checked) box-shadow'ом ЗЗОВНІ свого боксу, а overflow
   панелі зрізав би їх у крайніх гнізд. 6px вистачає, 14/16 з запасом */
.group__body{
  position:absolute;z-index:12;left:0;right:0;top:calc(100% + 7px);
  max-height:min(50vh,320px);overflow:auto;
  padding:14px 16px;
  border:1px solid var(--edge-bright);background:#141415;
  box-shadow:0 30px 60px -30px #000;
}
.group__body[hidden]{display:none}

/* скільки вподобань обрано в згорнутій групі: без цього після закриття панелі
   вибір не видно взагалі. Число приходить з data-count через ::after, а не
   текстом — хмара на головній читає textContent заголовка (.group h3), і
   цифра стала б у ній окремим словом */
.group__count{
  /* від'ємний margin гасить зовнішню висоту пігулки до 15px — рівно стільки,
     скільки в стрілки поряд. Інакше поява лічильника піднімала б рядок
     заголовка на 4px, і сторінка все одно стрибала б, тільки від галочки */
  margin-inline-start:auto;margin-block:-2px;flex:none;
  min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:99px;
  background:var(--brass);color:var(--on-brass);
  /* letter-spacing у заголовка .19em, і він успадковується: трекінг додає
     порожнечу ПІСЛЯ цифри, через що вона стоїть ліворуч від центру кружка.
     Одній цифрі трекінг не потрібен — гасимо його, і вона стає по центру */
  font:500 12px/1 var(--label);letter-spacing:0;font-variant-numeric:tabular-nums;
}
.group__count::after{content:attr(data-count)}
.group__count[hidden]{display:none}
.jacks{display:flex;flex-direction:column;gap:11px}
.jacks--row{flex-direction:row;flex-wrap:wrap;gap:12px 30px}

.jack{display:flex;align-items:flex-start;gap:12px;cursor:pointer;line-height:1.4}
.jack input{position:absolute;opacity:0;width:0;height:0}
/* гніздо — чекбокс, а не радіокнопка: .jack стоїть лише на checkbox (вибір
   множинний), а круглий обід із крапкою обіцяв вибір одного з кількох.
   Радіус 2px і дно #0e0e0f — та сама тарілка, що в поля введення .ctrl */
.jack__ring{
  position:relative;flex:none;width:19px;height:19px;margin-top:2px;border-radius:2px;
  background:#0e0e0f;
  box-shadow:0 0 0 1px rgb(var(--brass-rgb) / .35),inset 0 2px 3px rgba(0,0,0,.9);
  transition:box-shadow .22s var(--ease);
}
/* галочка — дві сторони рамки, повернуті на 45°. Коробка 19px, тож лівий
   верхній кут галочки стоїть на 6/3px: по центру з поправкою на поворот */
.jack__ring::after{
  content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;
  border:solid var(--brass);border-width:0 2px 2px 0;
  opacity:0;transform:rotate(45deg) scale(.4);transform-origin:center;
  transition:opacity .22s var(--ease),transform .28s var(--ease);
}
.jack__text{font-size:15px;color:var(--cream-dim);transition:color .22s var(--ease);font-weight:300}
.jack:hover .jack__ring{box-shadow:0 0 0 1px rgb(var(--brass-rgb) / .6),inset 0 2px 3px rgba(0,0,0,.9)}
.jack:hover .jack__text{color:var(--cream)}
.jack input:checked ~ .jack__ring::after{opacity:1;transform:rotate(45deg) scale(1)}
.jack input:checked ~ .jack__ring{box-shadow:0 0 0 1px var(--brass),0 3px 9px -3px rgb(var(--brass-rgb) / .5),inset 0 2px 3px rgba(0,0,0,.9)}
.jack input:checked ~ .jack__text{color:var(--cream)}
.jack input:focus-visible ~ .jack__ring{box-shadow:0 0 0 2px var(--signal)}

/* позиціонування — сегменти */
.stance{display:flex;flex-wrap:wrap;gap:0;margin-bottom:16px;border:1px solid var(--edge);width:fit-content}
.stance label{position:relative;cursor:pointer}
.stance label + label{border-left:1px solid var(--edge)}
.stance input{position:absolute;opacity:0;width:0;height:0}
.stance span{
  display:block;padding:8px 14px;
  font:400 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.stance label:hover span{color:var(--cream);background:rgba(242,239,233,.04)}
.stance input:checked + span{color:var(--on-brass);background:var(--brass)}
.stance input:focus-visible + span{outline:2px solid var(--signal);outline-offset:-2px}

/* Підвал консолі: ліворуч галочка «Зараз онлайн» (просьба замовника
   27 жовтня 2026), праворуч кнопка пошуку — тому space-between, а не
   притиснуте до правого краю flex-end, як було до галочки. Підвал
   існує лише в консолі пошуку (у воріт входу, скидання пароля й картки
   «тільки для зареєстрованих» кнопка стоїть у тілі форми), тож інших
   місць ця зміна не чіпає.

   На телефоні липне не підвал, а слот кнопки всередині нього (див. 860px),
   тож галочка там лишається в тілі форми. Вертикальний зазор 16px потрібен
   на проміжних ширинах, де обидва блоки ще в підвалі, але вже не в рядок. */
.console__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;
  margin-top:clamp(16px,1.8vw,24px);
}
/* гніздо тут одне й однорядкове, тому по центру: базовий .jack вирівняний
   по верху заради багаторядкових підписів у вподобаннях */
.jack--live{align-items:center}

/* ============================================================
   УЧАСНИКИ — картки на головній і список на сторінці спільноти
   ============================================================ */
/* обидві секції про людей стоять на одній поверхні: той самий фон,
   та сама відбивка і лінія згори */
.people,.roster,.prof{
  position:relative;padding-block:clamp(78px,11vh,148px);border-top:1px solid var(--edge);
  background:
    radial-gradient(80% 60% at 50% 0%,rgb(var(--brass-rgb) / .055),transparent 70%),
    linear-gradient(180deg,rgba(26,26,28,.78),rgba(17,17,18,.72));
}

/* на сторінці спільноти ця секція — перша і єдина: верхній відступ мусить
   покривати висоту fixed-шапки, а лінії згори бути не повинно — над нею
   нічого немає */
.roster--top,.prof{padding-top:calc(var(--rail-h) + clamp(26px,4vh,48px));border-top:none}
/* форма пошуку стоїть над колонками, на всю ширину оболонки, і нічим не
   відрізняється від консолі на головній — ділиться надвоє вже те, що нижче */
.roster .shell > .console,.roster .shell > .hunt{margin-bottom:clamp(44px,6vh,76px)}
/* повітря між заголовком результатів і списком більше, ніж у секцій на
   головній (прохання замовника 12 жовтня 2026) */
.roster .page__head{margin-bottom:clamp(40px,6vh,76px)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:clamp(18px,2.2vw,30px)}
/* Блок «Нові в спільноті» на головній набирається з бази, і анкет у ньому
   може бути менше чотирьох: auto-fit із 1fr розтягнув би одну картку на
   всі 1084px оболонки, і портрет 132px поплив би в пустоті. Тому неповному
   ряду дається стеля колонки — рівно та ширина, яку має картка в ряду з
   чотирьох ((1084 - 3 × 30) / 4 = 248.5).

   Модифікатор вішається ЛИШЕ на неповний ряд (Blade рахує картки), і це
   не косметика: кількість колонок auto-fit рахує від СТЕЛІ, коли вона
   задана довжиною, а не від підлоги. Поставлений на повний ряд, цей самий
   minmax давав floor(1114 / 278) = 3 колонки, і четверта картка падала
   в другий ряд. Повний ряд тому лишається на 1fr — піксель у піксель
   із затвердженим макетом. */
.cards--few{grid-template-columns:repeat(auto-fit,minmax(236px,248px));justify-content:center}
.card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:18px 22px 24px;border:1px solid var(--edge);
  background:var(--panel);box-shadow:var(--lift);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.card:hover{border-color:rgb(var(--brass-rgb) / .38);transform:translateY(-3px)}
/* репліка учасника — мовний балон із хвостиком до портрета */
.card__quote{
  position:relative;margin:0 0 6px;padding:13px 16px 14px;width:100%;
  /* висота під три рядки: репліки різної довжини, а портрети мусять стояти в один ряд */
  min-height:92px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--edge);border-radius:14px;background:var(--balloon);
  font:300 italic 15px/1.45 var(--body);color:var(--cream-soft);text-align:center;
  text-wrap:pretty;
}
/* хвостик — квадрат на 45°, дві його сторони продовжують контур балона */
.card__quote::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:11px;height:11px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--balloon);
  border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);
}
/* Привітання в анкеті не обовʼязкове, а портрети карток у ряду мусять
   стояти на одній висоті: балон лишається на місці й тримає свої 92px,
   але нічого не малює. Вигадати за людину репліку не можна. */
.card__quote--none{border-color:transparent;background:none}
.card__quote--none::after{display:none}
/* Портрет у картці — те саме гніздо .ava, що в каталозі й на візитці
   (фаза 7): живе фото без інверсії, силует, коли фото ще немає, плашка
   18+ на позначеному портреті. Обідок і ореол у .ava ті самі, що були
   в мальованого .card__photo, — відрізняється лише внутрішня тінь
   підкладки, і її видно лише в силуеті. Разом із розміткою пішли з
   CSS мальований .card__photo, позиції аркуша .f0…f3 і зерно на
   ховері: живих носіїв у них на сайті більше немає. */
.card .ava{--ava-size:132px;flex:none}
.card__grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.5;mix-blend-mode:overlay;transition:opacity .45s var(--ease);
}

.card__name{font-family:var(--display);font-size:1.32rem;line-height:1.2}
/* Клік по всій картці — розтягнуте посилання імені, як у рядку каталогу
   (.rost__name::after). Тому посилання в картці рівно одне: друге лягло
   б поверх першого й зробило б частину картки непередбачуваною. */
.card__name a{color:var(--cream);text-decoration:none;transition:color .25s var(--ease)}
.card__name a::after{content:"";position:absolute;inset:0;z-index:3}
.card:hover .card__name a{color:var(--brass-light)}
.card__name a:focus-visible{outline:none}
.card__name a:focus-visible::after{outline:2px solid var(--signal);outline-offset:3px}
.card__city{font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}
.tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:auto;padding-top:4px}
.tags li{
  padding:6px 11px;border:1px solid rgb(var(--brass-rgb) / .3);
  font:400 11px/1 var(--label);letter-spacing:.11em;text-transform:uppercase;color:var(--brass);
}

/* --- Привітання: другий блок «Нові в спільноті», у дві колонки ---
   Просьба замовника 24 жовтня 2026: ще один блок нових учасників,
   сторінка ділиться навпіл — ліворуч чоловіки, праворуч усі інші,
   картки одна під одною. Сюди йдуть лише ті, хто написав привітання,
   і репліка тут не підпис, а головне: балон підсвічений, решта картки
   навколо нього.

   Тло секції своє, і підбиралося воно під старе місце — МІЖ подіями
   (темна плоскість) і блоком чотирьох карток (.people, світліша з
   ореолом згори): тон проміжний, ореол знизу. З 26 жовтня 2026 секція
   стоїть першою під херо, вище головної події (просьба замовника), тому
   знизу вона тепер межує з найтемнішою плоскістю сторінки — ступінька
   на тій межі навмисна й тримається лінією border-top у .events. */
.greets{
  position:relative;padding-block:clamp(78px,11vh,148px);border-top:1px solid var(--edge);
  background:
    radial-gradient(70% 55% at 50% 100%,rgb(var(--brass-rgb) / .05),transparent 72%),
    linear-gradient(180deg,rgba(14,14,15,.82),rgba(22,22,24,.74));
}
/* дві рівні колонки на всю оболонку: картка завширшки з половину
   сторінки — це і є те, що замовник просив */
.greets__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.8vw,38px)}
.greets__col{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Підписів у колонок немає: капітель «Чоловіки» / «Жінки та інші» знята
   замовником 24 жовтня 2026. Поділ на статі лишився, просто мовчазний. */
/* колонка без жодної анкети лишається на місці — інакше сусідня
   розтяглася б на всю сторінку й поділу навпіл не стало б */
.greets__none{font:300 italic 15px/1.5 var(--body);color:var(--cream-dim)}
.greets__list{display:flex;flex-direction:column;gap:14px}
/* «Приєднатися» під колонками — дія для гостя, тому за замовчуванням її
   немає, а показує її body[data-session="guest"]: те саме джерело правди,
   що в блоках гостя й учасника в шапці (.session--guest/--member вище).
   display:flex тут не косметика, а умова центрування: у .btn стоїть
   inline-flex, і самого text-align йому мало. */
.greets__join{display:none;justify-content:center;margin-top:clamp(28px,3.4vw,46px)}
body[data-session="guest"] .greets__join{display:flex}

/* картка: портрет ліворуч, балон і підпис праворуч. isolation:isolate —
   з тієї самої причини, що в .rost: кадр портрета підмішується екраном
   до панелі картки, а не до тла секції */
.greet{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;
  gap:clamp(14px,1.6vw,20px);padding:18px clamp(18px,2vw,24px);
  /* контур у спокої прозорий, як у рядка каталогу: на ньому тримаються
     акцентна рамка під курсором і золото Gold, а геометрія не їде на 2px */
  border:1px solid transparent;background:var(--panel);box-shadow:var(--lift);
  transition:border-color .3s var(--ease);
}
.greet:hover{border-color:rgb(var(--brass-rgb) / .38)}
.greet .ava{--ava-size:84px;flex:none}
.greet__body{display:flex;flex-direction:column;gap:12px;min-width:0}

/* БАЛОН — головне в картці, і він підсвічений (просьба замовника).
   Підсвітка зроблена трьома речами, і жодної з них немає в тихого
   балона .card__quote: акцентний контур, акцент, підмішаний у тло, і
   світла кромка зверху. Ореолу навколо балона немає свідомо — його
   розірвав би хвостик, а другого теплого світла в системі бути не може
   (правило DESIGN.md). */
.greet__quote{
  position:relative;margin:0;padding:15px 18px 16px 44px;
  border:1px solid rgb(var(--brass-rgb) / .34);border-radius:14px;
  background:color-mix(in srgb,var(--balloon) 92%,var(--brass));
  box-shadow:var(--lift),inset 0 1px 0 rgb(var(--brass-rgb) / .16);
  font:300 italic 16px/1.5 var(--body);color:var(--cream);text-wrap:pretty;
  transition:border-color .3s var(--ease);
}
.greet:hover .greet__quote{border-color:rgb(var(--brass-rgb) / .55)}
/* лапка — єдиний Playfair у блоці: акцентний глиф, а не набір тексту.
   Лапки в самому тексті немає навмисно: малювати обидві довелося б
   навколо реплік будь-якої довжини, а капітальна ліва лапка працює
   як знак того, що це пряма мова */
.greet__quote::before{
  content:"“";position:absolute;left:15px;top:13px;
  font:500 italic 38px/1 var(--accent-italic);color:rgb(var(--brass-rgb) / .55);
}
/* хвостик дивиться ВЛІВО, на портрет: той самий квадрат на 45°, що в
   .card__quote, тільки повернутий — видимі сторони ліва й нижня */
.greet__quote::after{
  content:"";position:absolute;left:-6px;top:24px;width:11px;height:11px;
  transform:rotate(45deg);
  background:color-mix(in srgb,var(--balloon) 92%,var(--brass));
  border-left:1px solid rgb(var(--brass-rgb) / .34);
  border-bottom:1px solid rgb(var(--brass-rgb) / .34);
  transition:border-color .3s var(--ease);
}
.greet:hover .greet__quote::after{border-color:rgb(var(--brass-rgb) / .55)}

.greet__id{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.greet__name{
  font-family:var(--display);font-size:1.18rem;line-height:1.2;
  color:var(--cream);text-decoration:none;transition:color .25s var(--ease);
}
/* розтягнуте посилання: клік по всій картці, фокус-ринг теж на ньому.
   Тому посилання в картці рівно одне */
.greet__name::after{content:"";position:absolute;inset:0;z-index:3}
.greet__name:focus-visible{outline:none}
.greet__name:focus-visible::after{outline:2px solid var(--signal);outline-offset:3px}
.greet:hover .greet__name{color:var(--brass-light)}
.greet__city{font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}
.greet .scope{padding:4px 8px 4px calc(8px + .16em);font-size:10px;align-self:center}
/* плашки вподобань — ОКРЕМИЙ рядок під імʼям (просьба замовника
   24 жовтня 2026). Оформлення тихе, те саме, що в рядку каталогу: акцент
   у картці лишається за підсвіченим балоном */
.greet__tags{display:flex;flex-wrap:wrap;gap:6px}

/* --- Список результатів пошуку ------------------------------ */
/* лічильник стоїть ПІСЛЯ волосіні: у .page__head лінія — це ::after, тобто
   завжди останній елемент, тож порядок задає order, а не розмітка */
.found{order:2;font:400 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);white-space:nowrap}
.found b{font-weight:500;color:var(--brass);font-variant-numeric:tabular-nums}

/* ліворуч липкий сайдбар з оголошеннями, праворуч список анкет */
/* колонка оголошень на 30% вужча за першу версію (прохання замовника
   12 жовтня 2026): було clamp(272px,23vw,330px) */
.roster__grid,.prof__grid{display:grid;grid-template-columns:clamp(190px,16vw,231px) minmax(0,1fr);gap:clamp(22px,2.6vw,34px);align-items:start}
/* у каталогах просвіт між колонкою подій і результатами пошуку в півтора раза
   ширший за спільний (прохання замовника 24 жовтня 2026): було
   clamp(22px,2.6vw,34px). Правило адресне, лише .roster__grid — на публічному
   профілі зазор лишається колишнім */
.roster__grid{column-gap:clamp(33px,3.9vw,51px)}
.roster__list{display:flex;flex-direction:column;gap:14px}

/* рядок: портрет ліворуч, ім'я / підпис / теги праворуч. Увесь рядок
   кликабельний розтягнутим .rost__name::after — звідси isolation:isolate,
   інакше mix-blend-mode портрета підмішувався б до фону секції, а не до
   панелі самого рядка (та сама причина, що й у плитки події) */
.rost{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(18px,2.4vw,30px);padding:18px clamp(20px,2.4vw,28px);
  /* контур у спокої знято (замовник, 12 жовтня 2026), але рамка лишається
     прозорою: на ній тримаються акцентний контур під курсором і золота
     обводка Gold-рядка, а геометрія не їде на 2px при наведенні */
  border:1px solid transparent;background:var(--panel);box-shadow:var(--lift);
  transition:border-color .3s var(--ease);
}
/* підйому під курсором у рядка немає: замовник зняв зсув 12 жовтня 2026.
   Відгук лишився — акцентний контур, ім'я світлішає, стрілка їде вправо */
.rost:hover{border-color:rgb(var(--brass-rgb) / .38)}

/* обідок і ореол малює .ava, а не сам кадр: у кадра mix-blend-mode:screen,
   і тінь на ньому теж змішувалась би екраном — золото Gold-обідка зблякло б.
   Крізь темні ділянки кадра (після інверсії це папір) читається внутрішня
   тінь підкладки, тож аватар лишається тим самим гніздом, що й у шапці */
.ava{
  position:relative;width:var(--ava-size,92px);height:var(--ava-size,92px);border-radius:50%;background:#0d0d0e;
  box-shadow:0 0 0 1px rgb(var(--brass-rgb) / .32),0 0 0 5px rgb(var(--brass-rgb) / .08),inset 0 2px 6px rgba(0,0,0,.8);
}
.ava__shot{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background-image:url(../img/avatars-sheet.webp);background-size:206% 206%;
  filter:grayscale(1) invert(1) contrast(1.06);
  mix-blend-mode:screen;
}
.rost:hover .card__grain{opacity:.18}

.rost__body{display:flex;flex-direction:column;gap:7px;min-width:0}
/* праве поле зняте разом із числом фото: воно переїхало під аватар
   (просьба замовника 23 жовтня 2026), і кут картки вільний */
.rost__id{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.rost__name{
  font-family:var(--display);font-size:1.32rem;line-height:1.2;
  color:var(--cream);text-decoration:none;transition:color .25s var(--ease);
}
/* розтягнуте посилання: клік працює по всьому рядку, фокус-ринг теж на ньому */
.rost__name::after{content:"";position:absolute;inset:0;z-index:3}
.rost__name:focus-visible{outline:none}
.rost__name:focus-visible::after{outline:2px solid var(--signal);outline-offset:3px}
.rost:hover .rost__name{color:var(--brass-light)}
.rost__city{font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}
/* скільки фото в анкеті — ПІД аватаром (просьба замовника 23 жовтня 2026;
   з 12 жовтня число висіло абсолютом у правому верхньому куті картки).
   Звідси стовпчик .rost__face у першій колонці сітки: аватар і число —
   один предмет, і вирівнюються вони разом. Прийом сам не змінився —
   акцентна іконка плюс приглушена капітель, як у місця події */
.rost__face{display:flex;flex-direction:column;align-items:center;gap:9px}
.rost__shots{
  display:inline-flex;align-items:center;gap:6px;font:400 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,233,.62)}
.rost__shots svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* підпис — не більше двох рядків: репліки різної довжини, а рядки списку
   мусять лишатися однакової висоти */
.rost__line{
  font:300 italic 15px/1.5 var(--body);color:var(--cream-soft);text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* теги тихіші за картки на головній (прохання замовника): контур --edge,
   приглушені чорнила, без акценту — акцент у рядку лишається за іменем */
.rost__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.rost__tags li,.greet__tags li,.likes__tags li{
  padding:5px 9px;border:1px solid var(--edge);
  font:400 11px/1 var(--label);letter-spacing:.11em;text-transform:uppercase;color:var(--cream-dim);
}

/* стрілка на правому краю: увесь рядок — посилання на профіль, і це
   єдине, що про нього повідомляє. Поведінка та сама, що в «Детальніше»
   на плитці події: під курсором їде на 4px і йде в акцент */
.rost__go{
  display:flex;align-items:center;justify-content:center;width:30px;color:rgba(242,239,233,.38);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.rost__go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rost:hover .rost__go{color:var(--brass);transform:translateX(4px)}

/* Gold-учасник: обідок аватара, ім'я і табличка статусу золоті, рядок
   обведений золотом. Усе з --gold-rgb, а не з акценту: статус платний
   і мусить лишатися золотим за будь-якої палітри */
/* у спокої Gold-рядок теж без контуру (замовник, 12 жовтня 2026): статус
   тримають обід аватара, жирне золоте ім'я і табличка. Під курсором контур
   лишається золотим — інакше золотий рядок підсвічувався б рожевим */
.rost--gold:hover,.greet--gold:hover{border-color:rgb(var(--gold-rgb) / .5)}
.rost--gold .ava,.greet--gold .ava,.ad--gold .ava,.prof__card--gold .ava,.ava--gold{box-shadow:0 0 0 2px var(--gold),0 0 0 7px rgb(var(--gold-rgb) / .13),inset 0 2px 6px rgba(0,0,0,.8)}
.rost--gold .rost__name,.greet--gold .greet__name,.ad--gold .ad__name{font-weight:600}
.rost--gold .rost__name,.greet--gold .greet__name{color:var(--gold)}
.rost--gold:hover .rost__name,.greet--gold:hover .greet__name{color:var(--gold-light)}
.rost--gold:hover .rost__go{color:var(--gold)}
.rost__gold,.greet__gold,.prof__gold{
  /* ліве поле більше за праве рівно на трекінг: інакше слово стоїть
     ліворуч від центру пігулки — та сама вада, що в лічильнику груп */
  padding:4px 8px 4px calc(8px + .16em);border:1px solid rgb(var(--gold-rgb) / .5);
  font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}

/* Бейдж «у мережі» (просьба замовника 27 жовтня 2026): у рядку каталогу
   праворуч від міста, у візитці учасника — окремим рядком під іменем.

   Пігулка того ж рецепта, що Gold вище, але АКЦЕНТНА, а не золота:
   колір «онлайн» на сайті вже заведений — так само світиться підпис у
   шапці діалогу (.chat__state.is-online у messages.css), — і другого
   кольору для того самого стану не вводимо. Золотою її робити не можна
   тим паче: золото тут означає куплений статус.

   Крапка перед словом — щоб пігулка читалася як індикатор, а не як ще
   один тег анкети. Праве поле тут менше за ліве рівно на трекінг: першою
   стоїть крапка, а не буква, тож компенсувати треба з того боку, де
   трекінг лишає повітря, — дзеркально до Gold. */
.rost__live,.prof__live{
  /* Значок — хвилі сигналу (вибір замовника 27 жовтня 2026 з чотирьох
     показаних варіантів; до того тут стояла крапка-індикатор, і її він
     зняв того ж дня). Праве поле менше за ліве рівно на трекінг —
     дзеркально до Gold поруч: там першою стоїть буква і повітря від
     трекінга лишається праворуч, тут першим стоїть значок. */
  display:inline-flex;align-items:center;gap:7px;
  padding:4px calc(8px - .16em) 4px 8px;border:1px solid rgb(var(--brass-rgb) / .5);
  font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.rost__live svg,.prof__live svg{
  width:13px;height:13px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* крапка під дугами — єдине залите місце значка */
.rost__live circle,.prof__live circle{fill:currentColor;stroke:none}
/* під іменем у візитці: рядок свій, бо .prof__id — стовпчик із зазором 13px,
   і пігулка в ньому має лишитися завширшки зі слово, а не на всю колонку */
.prof__live-row{display:flex}

/* --- Сайдбар оголошень -------------------------------------- */
/* не липкий: замовник зняв прикріплення 15 жовтня 2026 — блок стоїть угорі
   колонки і їде зі сторінкою. До того він був sticky з відліком від низу
   fixed-шапки; у профілі статичним він став ще 12 жовтня, тепер це спільна
   поведінка і окреме правило .prof більше не потрібне */
.promo{display:flex;flex-direction:column;gap:13px}
.promo__head,.pane__head{
  display:flex;align-items:center;gap:12px;margin-bottom:1px;
  font:500 11px/1 var(--label);letter-spacing:.19em;text-transform:uppercase;color:var(--brass);
}
.promo__head::after,.pane__head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge-bright),rgba(242,239,233,0))}
/* у сайдбара оголошень під заголовком іде картка з власним полем, у панелі
   профілю — одразу текст, тож відступ свій */
.pane__head{margin-bottom:17px}

/* оголошення: автор угорі (ава, ім'я з віком, місто), текст — у балоні.
   Акцент на тексті: він на світлішій поверхні й найяскравішими чорнилами,
   автор поряд навмисно тихіший */
.ad{
  /* 16px, а не 11: замовник 12 жовтня 2026 попросив опустити балон із хвостиком
     на ~5px нижче за автора — хвостик їде разом із балоном, він на ::after */
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:16px;
  padding:14px 15px 16px;border:1px solid var(--edge);background:var(--panel);box-shadow:var(--lift);
  transition:border-color .3s var(--ease);
}
.ad:hover{border-color:rgb(var(--brass-rgb) / .38)}
.ad .ava{--ava-size:40px}
.ad__who{display:flex;align-items:center;gap:10px;min-width:0}
.ad__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.ad__name{
  font-family:var(--display);font-size:1rem;line-height:1.2;
  color:var(--cream);text-decoration:none;transition:color .25s var(--ease);
}
/* уся картка клікабельна — звідси isolation вище */
.ad__name::after{content:"";position:absolute;inset:0;z-index:3}
.ad__name:focus-visible{outline:none}
.ad__name:focus-visible::after{outline:2px solid var(--signal);outline-offset:3px}
.ad:hover .ad__name{color:var(--brass-light)}
.ad__city{font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}
/* балон той самий, що в репліки на картці учасника, тільки хвостик дивиться
   вгору — на автора, який стоїть над ним. Клампа тут немає навмисно: хвостик
   малюється ЗЗОВНІ боксу, і overflow:hidden зрізав би його */
.ad__text{
  position:relative;padding:12px 14px 13px;
  border:1px solid var(--edge);border-radius:14px;background:var(--balloon);
  font:300 14px/1.5 var(--body);color:var(--cream);text-wrap:pretty;
}
.ad__text::after{
  content:"";position:absolute;left:16px;top:-6px;width:11px;height:11px;
  transform:rotate(45deg);background:var(--balloon);
  border-left:1px solid var(--edge);border-top:1px solid var(--edge);
}
/* Gold-автор: обідок ави й ім'я золоті — рівно те саме, що в рядку анкети */
.ad--gold .ad__name{color:var(--gold)}
.ad--gold:hover .ad__name{color:var(--gold-light)}
.promo__cta{width:100%;margin-top:3px}

/* --- Найближчі події у сайдбарі ------------------------------ */
/* три найближчі події під оголошеннями (замовник, 15 жовтня 2026). Спершу це
   був окремий компонент-рядок .slot з квадратним кадром 46px; того ж дня
   замовник попросив ту саму плитку, що на головній, тільки звужену — тож
   компонент тут спільний (.event), а модифікатор лише стискає його під колонку
   ~231px: кадр нижчий (3/2 проти 16/10 — інакше три плитки виносять колонку
   майже на 1200px), поля тіла менші, назва й лід дрібніші, лід у два рядки
   замість трьох. Кадри свої не малювались: це той самий контактний аркуш, що
   в подій (.event__photo), позицію задають ті самі .f0…f3.
   .side — сама колонка: в ній оголошення й події, і відстань між блоками
   більша за відстань усередині них */
.side{display:flex;flex-direction:column;gap:clamp(26px,3vw,38px)}
.slots{display:flex;flex-direction:column;gap:14px}
/* самі модифікатори звуженої плитки лежать нижче, біля решти модифікаторів
   .event: специфічність у них однакова з базовими правилами, і вирішує
   порядок — поставлені тут, вони мовчки програли б minmax(300px) сітки */

/* --- Пейджинація -------------------------------------------- */
/* смуга клавіш: силует сегментів позиціонування, тільки більший — контур
   на всю смугу, роздільник між клавішами, поточна сторінка залита акцентом */
.pager{display:flex;width:fit-content;margin:clamp(34px,5vh,56px) auto 0;border:1px solid var(--edge)}
.pager__key{
  display:flex;align-items:center;justify-content:center;min-width:48px;height:46px;padding:0 6px;
  font:500 14px/1 var(--label);letter-spacing:.08em;color:var(--cream-dim);
  text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.pager__key + .pager__key{border-left:1px solid var(--edge)}
.pager__key svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pager__key:hover{color:var(--cream);background:rgba(242,239,233,.04)}
.pager__key.is-on{background:var(--brass);color:var(--on-brass)}
/* на першій сторінці кроку назад немає: клавіша лишається на місці, щоб смуга
   не стрибала, але не реагує і не ловить фокус */
.pager__key--mute{color:rgba(242,239,233,.38);pointer-events:none}

/* ============================================================
   ПУБЛІЧНИЙ ПРОФІЛЬ
   ============================================================ */
/* Сторінка одного учасника стоїть на тій самій поверхні, що й список
   спільноти (.prof дописано в групу .people,.roster і в .roster--top), а
   ділиться так само, як результати пошуку: ліворуч липкий сайдбар оголошень,
   праворуч колонка блоків — візитка, тексти, галерея, адреса сторінки.
   Сітку .prof__grid дописано в правило .roster__grid, щоб геометрія двох
   сторінок не розходилась. Контурів у блоків немає (рішення замовника):
   плоскість тримають світліша підкладка --panel і тінь --lift */
.prof__main{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px);min-width:0}

/* --- Візитка ------------------------------------------------- */
/* ліворуч стовпчик дій (портрет, число фото, кнопка), праворуч чотири ряди:
   ім'я з привітанням, факти, вподобання і стать того, кого учасник шукає.
   Ширину лівої колонки задає кнопка, а не портрет: у неї капітель із
   трекінгом і вона не стискається, тож портрет центрується в цій колонці */
.prof__card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"ava id" "ava facts" "ava goal" "ava likes" "ava seek" "ava support" "ava gifts";
  gap:clamp(16px,2vw,22px) clamp(22px,3vw,38px);
  padding:clamp(22px,2.6vw,32px);
  background:var(--panel);box-shadow:var(--lift);
}
.prof__ava{grid-area:ava;align-self:start;display:flex;flex-direction:column;align-items:center;gap:15px}
.prof__card .ava{--ava-size:200px}
/* скільки знімків у профілі — посилання вниз, на галерею. Оформлення те саме,
   що в числа фото у списку спільноти: акцентна іконка плюс тиха капітель */
.prof__shots{
  display:inline-flex;align-items:center;gap:7px;
  font:400 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-dim);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .22s var(--ease);
}
.prof__shots:hover{color:var(--brass)}
/* дві дії під портретом однакової ширини: колонку розсуває ширша з них
   («Написати повідомлення»), друга тягнеться до неї. Подарунок — найтихіша
   кнопка системи: дія необов'язкова.
   Бокові поля вужчі за звичайні 34px: ширину колонки портрета задає саме
   кнопка, і замовник 12 жовтня 2026 попросив звузити колонку на 10% */
.prof__write,.prof__gift{align-self:stretch;padding-inline:20px}
/* обидві кнопки-подарунки без рамки (рішення замовника 12 жовтня 2026) —
   лишаються тільки чорнила та іконка; тло в .btn--ghost і так прозоре */
.prof__gift,.prof__gift:hover{border-color:transparent}
/* числа задав замовник 12 жовтня 2026. У стовпчика зазор 15px, тож -25px —
   це перекриття кнопок на 10px: тло в них прозоре, тому видно тільки те, що
   рядки стали ближче, але нижні 10px поля верхньої кнопки накриті нижньою */
.prof__gift + .prof__gift{margin-top:-25px}
/* а від числа фото головну кнопку, навпаки, відсунуто: 15px зазору плюс 25px */
.prof__write{margin-top:25px}
/* «Подарувати Gold» — та сама найтихіша кнопка, тільки золота: чорнила
   й іконка з --gold-rgb, а не з акценту. Це колір платного статусу, і він
   мусить лишатися золотим за будь-якої палітри — як обід аватара й бейдж */
.prof__gift--gold{color:var(--gold)}
.prof__gift--gold:hover{color:var(--gold-light)}
.prof__shots svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* портрет відкривається більшим: кнопка розтягнута на все гніздо, як у кадрі галереї */
.ava__btn{
  position:absolute;inset:0;z-index:2;padding:0;
  border:none;border-radius:50%;background:none;cursor:zoom-in;
}
.ava__btn:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.prof__id{grid-area:id;align-self:center;display:flex;flex-direction:column;gap:13px;min-width:0}
.prof__name{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.prof__name h1{font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.1}
/* ім'я Gold-учасника золоте — як у рядку списку спільноти (рішення замовника
   12 жовтня 2026). Колір із --gold-rgb, а не з акценту: статус платний і
   мусить лишатися золотим за будь-якої палітри */
.prof__card--gold .prof__name h1{color:var(--gold)}
/* привітання — та сама курсивна репліка, що в рядку списку, тільки повна:
   ні клампа на два рядки, ні обмеження ширини (рішення замовника) — рядок
   іде на всю ширину колонки */
.prof__hello{font:300 italic 17px/1.5 var(--body);color:var(--cream-soft);text-wrap:pretty}

/* факти: підпис капітеллю над значенням, між клітками волосінь --edge.
   Остання клітка — позиціонування, і в ній не значення, а дві акцентні
   плашки; звідси вирівнювання по верху, щоб сусідні значення лишалися
   на одній лінії з ними */
.facts{grid-area:facts;display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:14px}
.facts__cell{padding-inline:clamp(16px,2vw,26px);border-left:1px solid var(--edge)}
.facts__cell:first-child{padding-left:0;border-left:none}
.facts dt,.ev__facts dt{font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}
.facts dd,.ev__facts dd{margin:7px 0 0;font-size:17px}
/* клітка позиціонування мусить лишатися в одному рядку з віком, а не з'їжджати
   під нього: база 170px дозволяє їй стати на місце, а плашки всередині самі
   переходять на другий рядок. Без flex-basis вона міряється за max-content
   (обидві плашки в рядок ≈ 350px) і flex-wrap зносить її цілком */
.facts__cell--stance{flex:1 1 170px;min-width:0}
.facts__cell--stance dd{margin-top:9px}

/* решта вподобань — окремий ряд під фактами, одним списком і без поділу на
   розділи (рішення замовника). Ряд іде на всю ширину візитки, крім колонки
   портрета: у сітці це область likes */
.prof__goal{grid-area:goal;display:flex;flex-direction:column;gap:9px}
.prof__likes{grid-area:likes;display:flex;flex-direction:column;gap:9px}
/* позиціонування в смузі фактів виділено акцентом, решта — нейтральні плашки */
.likes__tags{display:flex;flex-wrap:wrap;gap:6px}
.likes__tags .is-stance{border-color:rgb(var(--brass-rgb) / .3);color:var(--brass)}
.likes__name{font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}

/* --- Сайдбар оголошень на сторінці профілю -------------------- */
/* Тут він тихіший, ніж у результатах пошуку (рішення замовника 12 жовтня
   2026): колонка вужча на 10%, в оголошень немає ні підкладки, ні контуру,
   ні тіні — лишається тільки балон репліки, заголовок сірий замість акценту,
   а кнопка «Розмістити оголошення» без рамки. Усе під .prof, щоб сторінка
   спільноти лишилась як була */
.prof__grid{grid-template-columns:clamp(171px,14.4vw,208px) minmax(0,1fr)}
/* порожнього сайдбара на сторінці більше немає (рішення замовника 23 жовтня
   2026): немає оголошень — немає й блоку, а значить і колонки під нього.
   Правило мусить стояти ПІСЛЯ сусіднього: специфічність однакова, вирішує
   порядок — та сама грабля, що в .acct__grid--solo.
   Ширину колонки тримаємо ту саму, що з сайдбаром (843px на 1440), і ставимо
   її по центру оболонки — рівно так, як кабінет при первинному заповненні.
   Розтягнута на всі 1084px сторінка міняла б те, що замовник затвердив:
   у галереї ставало б сім стовпців замість п'яти (15 кадрів лягали б
   рваним хвостом), а рядок тексту ріс би з ~115 знаків до ~145 */
.prof__grid--solo{grid-template-columns:minmax(0,1fr)}
.prof__grid--solo .prof__main{max-width:843px;margin-inline:auto}
.prof .promo__head{color:var(--cream-dim)}
.prof .ad{padding:7px;border:none;background:none;box-shadow:none}
.prof .promo__cta,.prof .promo__cta:hover{border-color:transparent}

/* --- Блоки сторінки ------------------------------------------ */
/* панель: та сама підкладка й тінь, що в консолі й картки, але без контуру */
.pane{padding:clamp(20px,2.4vw,30px);background:var(--panel);box-shadow:var(--lift)}

/* текст іде на всю ширину блока (рішення замовника): обмеження рядка в 68ch
   знято, тож на цільовій ширині в рядку ~115 знаків — довше за 78, які
   check-layout вважає межею читабельності. Через це .prose виключено з
   виміру довжини рядка в тесті */
.prose{display:flex;flex-direction:column;gap:14px}
/* «Про мене» і «Кого шукаю» живуть в одній панелі (рішення замовника):
   два розділи зі своїми заголовками на спільній поверхні */
.prof__text{display:flex;flex-direction:column;gap:clamp(24px,3vw,34px)}
.prose p{font-weight:300;color:rgba(242,239,233,.88);text-wrap:pretty}

/* кого шукає учасник — ряд під вподобаннями: стать партнера плашками акценту,
   їх може бути кілька. У блоці «Кого шукаю» нижче лишився тільки опис */
.prof__seek{grid-area:seek;display:flex;flex-direction:column;gap:9px}

/* матеріальна підтримка — ряд під статтю того, кого шукають (рішення
   замовника 20 жовтня 2026). Значення рядком тексту, а не плашкою: у
   плашок капітель із трекінгом, і найдовше значення (50 знаків) у ній
   стало б смугою на півтори сотні пікселів заголовкового кеглю. Кегль
   той самий, що в значення факту — це така сама відповідь про себе */
.prof__support{grid-area:support;display:flex;flex-direction:column;gap:9px}
.prof__supportval{font-size:17px;color:var(--cream-soft);text-wrap:pretty}

/* подарунки від інших учасників — останній ряд візитки. Єдина кольорова
   графіка на сайті: решта растру монохромна й виводиться через інверсію, а
   подарунок мусить бути яскравим (рішення замовника 12 жовтня 2026), тож ні
   grayscale, ні invert, ні mix-blend-mode тут немає. Картинки з прозорим тлом
   лежать просто на панелі, без плашки під ними */
/* ряд подарунків відсунуто від «Шукаю» сильніше за інші ряди візитки:
   у сітки зазор clamp(16px,2vw,22px), тут до нього додається 16px */
.prof__gifts{grid-area:gifts;display:flex;flex-direction:column;gap:9px;margin-top:16px}
.gifts{display:flex;flex-wrap:wrap;gap:10px}
.gifts img{
  width:100px;height:100px;object-fit:contain;
  transition:transform .25s var(--ease);
}
.gift{position:relative}
.gift:hover img,.gift:focus-visible img{transform:translateY(-2px) scale(1.04)}
.gift:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

/* підпис дарувальника — той самий мовний балон, що в репліки на картці
   учасника: дно --balloon, контур, радіус 14px і хвостик-ромб. Хвостик
   прибитий до лівого краю, а не до середини: балон ширший за подарунок і
   росте вправо, інакше крайній лівий подарунок виносив би його за візитку */
.gift__tip,.cal__tip,.scopes__tip{
  position:absolute;left:-6px;bottom:calc(100% + 12px);z-index:5;
  width:max-content;max-width:min(290px,calc(100vw - 2 * var(--gutter)));
  padding:12px 14px 13px;border:1px solid var(--edge);border-radius:14px;background:var(--balloon);
  box-shadow:0 24px 44px -28px #000;
  font:300 14px/1.5 var(--body);color:var(--cream);text-wrap:pretty;
  /* display:none, а не visibility: прихований балон усе одно займав би місце
     в розкладці, і на вузькому екрані 290px виносили б сторінку в
     горизонтальний скрол. Поява без анімації — як у панелі вподобань і
     випадного списку селектора */
  display:none;pointer-events:none;
}
.gift__tip::after,.cal__tip::after,.scopes__tip::after{
  content:"";position:absolute;left:28px;bottom:-6px;width:11px;height:11px;
  transform:rotate(45deg);background:var(--balloon);
  border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);
}
/* :focus, а не :focus-visible — інакше балон не з'являвся б, коли фокус
   прийшов не з клавіатури (перевірка в тесті якраз такий випадок) */
.gift:hover .gift__tip,.gift:focus .gift__tip{display:block}
.gift__from,.cal__tipday{
  display:block;margin-bottom:5px;
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:var(--brass);
}
/* останній подарунок у ряду: балон росте вправо й вилазив би за візитку
   на ~90px, тож у нього хвостик і прив'язка дзеркальні. Тільки на широкому
   екрані: у вузькому ряд переноситься, останній подарунок стає крайнім лівим,
   і дзеркальний балон виносило б уже вліво */
@media (min-width:1061px){
  .gift:last-child .gift__tip{left:auto;right:-6px}
  .gift:last-child .gift__tip::after{left:auto;right:28px}
}
/* теги .tags на картці центровані й притиснуті до низу — у профілі ряд
   починається ліворуч і стоїть просто під підписом */
.tags--row{justify-content:flex-start;margin-top:0;padding-top:0}

/* адреса сторінки — останній блок, під галереєю, і підкладки .pane під ним
   немає (рішення замовника): заголовок із волосінню й поле лежать просто на
   поверхні секції. Рядок відповіді тримає висоту завжди — інакше поява слова
   «Скопійовано» підштовхувала б блок на 11px */
.share{display:flex;flex-direction:column;gap:9px;max-width:460px}
.share__url{font-size:15px;color:var(--cream-soft);text-overflow:ellipsis}
.share__said{min-height:11px;font:400 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}

/* --- Галерея -------------------------------------------------- */
/* заголовок із лічильником у рядок: волосінь у .pane__head — це ::after,
   тож лічильник просто стає після неї */
.prof__gal{scroll-margin-top:calc(var(--rail-h) + 22px)}
.prof__galhead{display:flex;align-items:center;gap:16px}
.prof__galhead .pane__head{flex:1;margin-bottom:0}
/* 132px, а не 172: у правій колонці (≈820px) це рівно п'ять стовпців, тобто
   15 кадрів лягають трьома повними рядами. Ширші кадри давали чотири стовпці
   й рваний останній ряд */
.shots{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:clamp(10px,1.2vw,15px);margin-top:18px;
}
/* кадр: та сама рамка й та сама обробка, що в плитки події. isolate — щоб
   screen підмішувався до дна самого кадру, а не до панелі галереї */
.shot{
  position:relative;isolation:isolate;aspect-ratio:1;overflow:hidden;
  border:1px solid var(--edge);background:#0d0d0e;
  transition:border-color .3s var(--ease);
}
.shot:hover{border-color:rgb(var(--brass-rgb) / .38)}
.shot__img{
  position:absolute;inset:0;
  filter:grayscale(1) invert(1) contrast(1.04);mix-blend-mode:screen;
  transition:transform .6s var(--ease);
}
.shot:hover .shot__img{transform:scale(1.05)}
.shot:hover .card__grain{opacity:.2}
/* кнопка розтягнута на весь кадр — той самий приём, що в .event__link::after */
.shot__btn{position:absolute;inset:0;z-index:2;padding:0;border:none;background:none;cursor:zoom-in}
.shot__btn:focus-visible{outline:2px solid var(--signal);outline-offset:-3px}
/* те саме місце в гостя — посилання на вхід, а не збільшення (просьба
   замовника 27 жовтня 2026). Міняється лише курсор: zoom-in обіцяв би кадр
   на весь екран, якого гостю не буде. */
.shot__btn--locked,.ava__btn--locked{cursor:pointer}
/* рядок під заголовком галереї, яким гостю кажуть, куди веде клік. Шрифт
   мітки той самий, що в .found, тож нової поверхні не з'являється */
.shots__lock{
  /* .prof__galhead нижнього відступу не має зовсім (.pane__head у ньому
     обнулений), тому зазор над рядком задає він сам */
  margin:14px 0 2px;
  font:400 12px/1.5 var(--label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-dim);
}
.shots__lock a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.shots__lock a:hover{color:var(--brass-light)}

/* кадр 18+ закритий плашкою, а не розмиттям: блюру в системі немає, щільність
   замість нього — під непрозорим дном кадру не видно зовсім. Клік відкриває
   один кадр (і в сітці, і в перегляді), стан тримає клас .is-open на .shot,
   другого джерела правди немає */
.shot__veil{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:0;border:none;background:#141415;color:var(--cream-dim);cursor:pointer;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.shot__veil:hover{color:var(--cream);background:#1a1a1c}
.shot__veil svg{width:26px;height:26px;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.shot__veil b{font:600 19px/1 var(--display);letter-spacing:.01em;color:var(--cream);font-variant-numeric:tabular-nums}
.shot__veil span{font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase}
.shot--adult.is-open .shot__veil{display:none}
/* у перегляді плашка лежить на тому ж місці — клон приходить із тими ж класами */
.lb__frame .shot__veil{gap:14px}
.lb__frame .shot__veil svg{width:40px;height:40px}
.lb__frame .shot__veil b{font-size:30px}

/* кадри галереї беруться з уже намальованого: два контактні аркуші подій (по
   чотири кадри, позицію задають ті самі .f0….f3) і силуети, зроблені для
   воріт. Нічого нового не генерували — манера й обробка однакові, тож кадри
   стають на одну полицю */
.shot__img--a,.shot__img--b{background-size:206% 206%}
.shot__img--a{background-image:url(../img/events-sheet.webp)}
.shot__img--b{background-image:url(../img/events-sheet-2.webp)}
.shot__img--pair,.shot__img--behind,.shot__img--wash,
.shot__img--dust,.shot__img--smoke,.shot__img--lean,.shot__img--water{
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
/* суцільний силует після інверсії спалахує білою плямою і з'їдає власний
   контур — йому потрібна не різкість, а менша сила. Тональним малюнкам
   навпаки: контраст ДО інверсії, інакше вони тонуть у сірому */
.shot__img--pair,.shot__img--behind{filter:grayscale(1) invert(1);opacity:.66}
.shot__img--wash,.shot__img--dust,.shot__img--smoke,.shot__img--lean,.shot__img--water{
  filter:grayscale(1) contrast(1.3) invert(1);opacity:.88;
}
.shot__img--pair{background-image:url(../img/auth-bg-pair-silhouette.webp)}
.shot__img--behind{background-image:url(../img/auth-bg-pair-behind.webp)}
/* акварель, що лежала під формою пошуку до 11 жовтня: тональний малюнок,
   якому інверсія лишає півтони — у ряду силуетів він тримає різноманітність */
.shot__img--wash{background-image:url(../img/search-bg-wash.webp)}
.shot__img--dust{background-image:url(../img/auth-bg-dust.webp)}
.shot__img--smoke{background-image:url(../img/auth-bg-smoke.webp)}
.shot__img--lean{background-image:url(../img/auth-bg-lean.webp)}
.shot__img--water{background-image:url(../img/auth-bg-water.webp)}

/* --- Перегляд кадру ------------------------------------------- */
/* той самий кадр, лише більший: JS кладе в .lb__frame клон мініатюри, тож
   аркуш, позиція й обробка приходять разом із її класами. Діалог обтягує
   кадр (width:fit-content), а кадр міряється висотою екрана */
.lb{
  width:fit-content;max-width:94vw;max-height:94vh;margin:auto;padding:14px;
  border:1px solid var(--edge-bright);background:var(--panel);
  box-shadow:0 40px 90px -40px #000;color:var(--cream);
}
.lb::backdrop{background:rgb(9 9 10 / .88)}
.lb:focus{outline:none}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.lb__count{font:400 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.lb__count b{font-weight:500;color:var(--brass);font-variant-numeric:tabular-nums}
.lb__x{
  display:grid;place-items:center;width:30px;height:30px;padding:0;
  border:none;background:none;color:var(--cream-soft);cursor:pointer;
  transition:color .22s var(--ease);
}
.lb__x:hover{color:var(--brass)}
.lb__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lb__stage{position:relative}
.lb__frame{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(86vw,calc(90vh - 180px));aspect-ratio:1;margin-inline:auto;
  border:1px solid var(--edge);background:#0d0d0e;
}
/* у перегляді кадр не масштабується під курсором — там немає ховеру */
.lb__frame .shot__img{transition:none}
/* портрет у перегляді: те саме гніздо, тільки на весь кадр. Обід з ореолом
   малюється box-shadow'ом ЗЗОВНІ кола, тож рамку й обріз кадру знімаємо,
   інакше золото Gold зрізало б по краях. Стрілок і лічильника тут немає —
   портрет один, гортати нічого */
.lb[data-solo] .lb__frame{border:none;background:none;overflow:visible}
.lb[data-solo] .lb__count,.lb[data-solo] .lb__step{display:none}
.lb__frame .ava{--ava-size:100%}
/* стрілки лежать на кадрі: тло щільне, щоб вони читались і на світлому штриху */
.lb__step{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--edge-bright);background:rgb(14 14 15 / .88);
  color:var(--cream-soft);cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.lb__step:hover{color:var(--brass);border-color:rgb(var(--brass-rgb) / .5)}
.lb__step svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lb__step--prev{left:14px}
.lb__step--next{right:14px}
.lb__cap{margin-top:13px;text-align:center;font:300 italic 15px/1.5 var(--body);color:var(--cream-soft)}

/* ============================================================
   ПОДІЇ
   ============================================================ */
.events,.evs,.ev{
  position:relative;padding-block:clamp(78px,11vh,148px);border-top:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(9,9,10,.84),rgba(14,14,15,.78));
}
.events .shell,.evs .shell,.ev .shell{position:relative;z-index:1}

/* плитка: три в ряд на цільовій ширині, вужче — сама перебудовується */
.events__list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,30px);
}
.event{
  /* isolate: кадр підмішується екраном до тла самої плитки, а не до секції */
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  border:1px solid var(--edge);background:var(--panel);box-shadow:var(--lift);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.event:hover{
  border-color:rgb(var(--brass-rgb) / .38);transform:translateY(-4px);
  box-shadow:var(--lift),0 28px 52px -34px rgba(0,0,0,.95);
}

.event__frame{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--edge)}
.event__photo{
  position:absolute;inset:0;
  background-image:url(../img/events-sheet.webp);
  /* ширина 206% ховає білі жолоби контактного аркуша, висота auto — щоб
     квадратний кадр не розтягувало під прямокутник плитки */
  background-size:206% auto;
  filter:grayscale(1) invert(1) contrast(1.04);mix-blend-mode:screen;
  transition:transform .6s var(--ease);
}
/* кадри лежать двома контактними аркушами по чотири: --b перемикає на другий.
   Правило мусить стояти після .event__photo — специфічність однакова, вирішує порядок */
.event__photo--b{background-image:url(../img/events-sheet-2.webp)}
.event:hover .event__photo{transform:scale(1.045)}
.event:hover .card__grain{opacity:.22}
/* низ кадру гасне в тіло плитки — табличка дати лягає на спокійне місце */
.event__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(10,10,11,.78) 100%);
}
/* табличка дати. На кадрі плитки вона сидить у самому куті, спираючись на лінію
   між кадром і тілом плитки; .daytag — той самий предмет у потоці, ним набрані
   всі дати головної події на сторінці подій */
.event__when,.daytag{
  display:grid;justify-items:center;gap:2px;padding:8px 13px 9px;
  background:var(--brass);color:var(--on-brass);
  box-shadow:0 12px 24px -16px rgba(0,0,0,.95);
}
.event__when{position:absolute;left:0;bottom:0;z-index:2}
.event__day{font:600 21px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* 11px — нижня межа для функціонального тексту; нижче місяць на табличці не читався б */
.event__month{font:500 11px/1 var(--label);letter-spacing:.1em;text-transform:uppercase}

.event__body{flex:1;display:flex;flex-direction:column;gap:9px;padding:17px 18px 15px}
.event__place{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;row-gap:5px;
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:var(--cream-dim);
}
.event__place svg{
  width:13px;height:13px;flex:none;fill:none;stroke:var(--brass);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.event__body h3{font-size:1.24rem;line-height:1.3}
.event__link{color:inherit;text-decoration:none}
/* клікабельна вся плитка: лінк розтягує свою площину на картку */
.event__link::after{content:"";position:absolute;inset:0;z-index:3}
.event__link:focus-visible{outline:none}
.event__link:focus-visible::after{outline:2px solid var(--signal);outline-offset:3px}
.event:hover .event__link{color:var(--brass-light)}
.event__text{
  font-weight:300;font-size:15px;line-height:1.55;color:var(--cream-dim);text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.event__more{
  display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--edge);
  font:500 11px/1 var(--label);letter-spacing:.15em;text-transform:uppercase;color:var(--cream-soft);
  transition:color .25s var(--ease);
}
.event__more svg{
  width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.event:hover .event__more{color:var(--brass)}
.event:hover .event__more svg{transform:translateX(4px)}


/* ============================================================
   СТОРІНКА ПОДІЙ
   ============================================================ */
/* Поверхня та сама, що в секції подій на головній (.evs дописано в групу
   .events вище), але секція тут перша й єдина: верхній відступ мусить покривати
   висоту fixed-шапки, а лінії згори бути не повинно — над нею нічого немає */
.evs,.ev{padding-top:calc(var(--rail-h) + clamp(26px,4vh,48px));border-top:none}
/* три блоки сторінки йдуть одним ритмом: головна подія, календар, список.
   На головній у тому ж ритмі стоїть заголовок плитки «Найближчі події» —
   правило ловить його тільки тоді, коли над ним є головна подія */
.cals,.evs__all,.feat + .events__head{margin-top:clamp(44px,6vh,76px)}
/* дні календаря ведуть на саму подію, тож якір мусить зупинятися під шапкою:
   спільне правило main > section[id] ловить лише прямих дітей main */
.feat,.event[id]{scroll-margin-top:calc(var(--rail-h) + 22px)}

/* --- Головна подія ------------------------------------------- */
/* Фото події лежить ФОНОМ під текстом (рішення замовника 13 жовтня 2026), а
   вміст стоїть центрованим стовпчиком поверх нього. Розкладка від сюжету на
   фото не залежить: кадри заливають самі учасники, тож текст завжди по центру,
   а фото обрізається по центру ж — не має значення, де на ньому сюжет.
   Три шари знизу вгору: фото (z0) → віньєтка (z1) → текст (z2).
   isolate — щоб screen підмішувався до дна самого блока, а не до секції */
.feat{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;place-items:center;min-height:clamp(400px,40vw,540px);
  padding:clamp(34px,4vw,56px) clamp(24px,3vw,44px);
  border:1px solid var(--edge);background:var(--panel);box-shadow:var(--lift);
}
.feat__art{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/events-bg.webp) center/cover no-repeat;
  /* контраст ДО інверсії — як у малюнка воріт і фону пошуку: у півтонах
     інакше все злипається в сіру пляму */
  filter:grayscale(1) contrast(1.35) invert(1);
  mix-blend-mode:screen;opacity:.3;
}
/* віньєтка гасить середину під текстом — той самий прийом, що .hero::after на
   першому екрані (там вона затемнює центр під зверненням поверх хмари).
   Це не друге тепле світло, а затемнення: кольору не додає */
.feat::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 56% at 50% 50%,rgba(12,12,13,.93) 0%,rgba(12,12,13,.7) 48%,transparent 82%);
}
.feat__body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  max-width:760px;margin-inline:auto;text-align:center;
}

/* тип події: на панелі — контурна плашка, як тег на картці учасника;
   на кадрі плитки — щільна темна табличка в куті */
.feat__kind,.event__kind{
  display:inline-flex;align-items:center;gap:7px;
  font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.feat__kind svg,.event__kind svg{
  width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.feat__kind{padding:6px 11px;border:1px solid rgb(var(--brass-rgb) / .3)}
.event__kind{
  position:absolute;top:0;right:0;z-index:2;padding:7px 11px;
  background:rgb(14 14 15 / .88);
  border-left:1px solid var(--edge);border-bottom:1px solid var(--edge);
}

/* --- Належність до спільноти --------------------------------- */
/* Кожна подія належить або кінкі-, або BDSM-спільноті, і це сказано на кожній
   карточці (прохання замовника 15 жовтня 2026). Замовник попросив тег ПОВЕРХ
   картинки й одне слово: «Кінкі» або «BDSM». Значення несе колір — фіолетовий
   проти чорного, — і це свідомий виняток із правила «весь акцент із
   --brass-rgb»: тег не йде за палітрою, як не йде за нею золото Gold.
   На кадрі збирається три позначки, і вони не сперечаються, бо стоять
   у різних кутах і різні на вигляд: дата — акцентна заливка внизу ліворуч,
   тип події — тонка темна табличка з іконкою вгорі праворуч, спільнота —
   кольоровий тег угорі ліворуч. Де кадру немає (панель головної події,
   смуга фактів сторінки події) тег стоїть у потоці */
.scope{
  display:inline-flex;align-items:center;align-self:start;padding:7px 11px;
  font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:rgb(var(--kink-rgb));
}
/* BDSM — чорний тег. Волосинка намальована inset-тінню, а не border: інакше
   плашка з контуром була б на 2px більша за фіолетову й кути поїхали б.
   Без неї чорне зливалося б із темною ділянкою кадру */
.scope--bdsm{background:rgb(14 14 15 / .92);box-shadow:inset 0 0 0 1px rgb(242 239 233 / .16)}
/* третій варіант — учасник обох спільнот одразу (замовник, 16 жовтня 2026):
   той самий фіолетовий, що в кінкі-тега, розтушований у чорний BDSM-тега,
   тож кожне слово тега стоїть на своєму кольорі. Чорний дає background-color,
   а фіолетовий — градієнт, який гасне до нуля: якби чорний теж був у градієнті
   поверх підкладки, дві напівпрозорі заливки склалися б і правий край тега
   став би щільнішим за .scope--bdsm, а без підкладки замір контрасту в
   check-layout піднявся б із тега на панель під ним */
.scope--both{
  background-color:rgb(14 14 15 / .92);
  background-image:linear-gradient(90deg,rgb(var(--kink-rgb)) 38%,rgb(var(--kink-rgb) / 0) 72%);
  box-shadow:inset 0 0 0 1px rgb(242 239 233 / .16);
}
/* у смузі ідентифікації учасника тег дрібніший за подієвий: поряд стоять
   Gold-пігулка і місто капітеллю, і повнорозмірний тег перебивав би ім'я.
   Ліве поле більше за праве рівно на трекінг — той самий оптичний зсув,
   що в пігулки Gold. Вирівнювання різне, бо різні контейнери: смуга рядка
   анкети стоїть по baseline, колонка картки й ряд імені в профілі — по центру */
.rost .scope,.card .scope{padding:4px 8px 4px calc(8px + .16em);font-size:10px}
.rost .scope{align-self:baseline}
.card .scope,.prof__name .scope{align-self:center}
/* на кадрі тег сидить у ЛІВОМУ верхньому куті — дзеркально табличці типу
   (правий верхній) і не чіпаючи дати (лівий нижній) */
.event__frame .scope{position:absolute;top:0;left:0;z-index:2}
/* на панелі головної події тип і спільнота стоять одним рядом по центру:
   .feat__body — центрована колонка, тож ряд мусить центруватися сам */
.feat__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}

.feat__name{font-size:clamp(1.7rem,2.7vw,2.3rem);line-height:1.12;letter-spacing:-.015em}
.feat__link{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
.feat__link:hover{color:var(--brass-light)}
/* смуга місця тут світліша й більша за плиткову: це перший блок сторінки */
.feat__place{justify-content:center;color:var(--cream-soft);font-size:12px}
.feat__place .event__at{font-size:15px;color:var(--cream-soft)}

/* усі дати події: табличка дня плюс день тижня з часом. Подія може мати
   кілька дат — вони йдуть рядом, а не ховаються за «та інші» */
.feat__dates{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:3px}
.feat__dates li{display:flex;align-items:center;gap:11px}
.feat__time{
  font:500 12px/1.35 var(--label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-soft);font-variant-numeric:tabular-nums;
}
.feat__lead{font-weight:300;color:rgba(242,239,233,.88);text-wrap:pretty}
.feat__btn{margin-top:6px}

/* --- Календар ------------------------------------------------- */
/* Календар згорнутий за умовчанням (рішення замовника 13 жовтня 2026):
   панель із місяцями й легендою РОЗКРИТА за умовчанням (просьба замовника
   23 жовтня 2026), заголовок-кнопка її згортає. Стан тримає aria-expanded
   на заголовку, другого джерела правди немає — той самий підхід, що в груп
   вподобань. Без JS блок лишається розкритим: згорнути його буде нічим,
   зате календар видно — а він тут головне */
/* кнопка — звичайна тиха пігулка станції (.btn.btn--quiet у розмітці), а не
   тихий підпис: замовник 13 жовтня 2026 попросив виділити її чіткіше. Яскравість
   дає акцентна іконка календаря плюс світліші чорнила, а розкритий стан — контур
   акцентом, рівно як у заголовка групи вподобань */
.cals .pane__head{margin-bottom:0}
.cals__head{gap:11px}
.cals__icon{stroke:var(--brass)}
.cals__head[aria-expanded="true"]{border-color:rgb(var(--brass-rgb) / .5);color:var(--cream)}
.cals__arrow{transition:transform .25s var(--ease)}
/* у кнопки станції іконка під курсором їде вправо — стрілці згортання це ні до
   чого, вона повертається */
.cals__head:hover svg{transform:none}
.cals__head[aria-expanded="true"] .cals__arrow{transform:rotate(180deg)}
.cals__body{margin-top:17px}
.cals__body[hidden]{display:none}
/* три місяці в ряд на одній панелі, волосінь між ними — як між клітками
   фактів у профілі. Поле від лінії дорівнює зазору сітки, інакше вона
   притискається до наступного місяця */
.cals__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px)}
.cal + .cal{border-left:1px solid var(--edge);padding-left:clamp(16px,2.2vw,30px)}
.cal__name{margin-bottom:14px;font:500 12px/1 var(--label);letter-spacing:.19em;text-transform:uppercase;color:var(--cream)}
.cal__name span{color:var(--cream-dim)}
/* таблиця, а не сітка з <div>: календар — табличні дані, і читалка мусить
   назвати день тижня разом із числом */
.cal__tab{width:100%;table-layout:fixed;border-collapse:collapse}
.cal__tab th{
  padding-bottom:9px;font:400 11px/1 var(--label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim);
}
.cal__tab abbr{text-decoration:none;cursor:default}
.cal__tab td{
  height:34px;text-align:center;
  font:400 14px/1 var(--label);font-variant-numeric:tabular-nums;color:rgba(242,239,233,.55);
}
/* день із подією — залитий акцентом квадрат-посилання на саму подію нижче.
   Заливка акцентом тут дозволена: це табличка розміром зі знак, а не площина.

   Обгортка .cal__cell з'явилася 23 жовтня 2026, коли рядки балона стали
   посиланнями: балон виїхав із дня (вкладене <a> браузер викидає) і став
   його сусідом, а позиціонує балон і показує його тепер саме обгортка.
   Через неї ж день світліє, поки миша стоїть на балоні: :hover на самому
   дні там уже не діє, а гасити підсвічування під відкритим балоном
   виглядало б як помилка */
.cal__cell{position:relative;display:inline-grid}
.cal__day{
  display:inline-grid;place-items:center;width:28px;height:28px;
  background:var(--brass);color:var(--on-brass);font-weight:500;text-decoration:none;
  transition:background .22s var(--ease),box-shadow .22s var(--ease);
}
/* підсвічування дня під курсором — тільки на миші (просьба замовника
   24 жовтня 2026). На тачі Chrome лишає :hover на дні після тапу, і день
   світився б уже після того, як балон закрили; там його світить сам
   відкритий стан, правило нижче */
@media (hover:hover) and (pointer:fine){
  .cal__cell:hover .cal__day{background:var(--brass-light);box-shadow:0 0 0 4px rgb(var(--brass-rgb) / .14)}
}
/* .cal__cell у селекторі — заради ваги: інакше ореол «сьогодні» нижче
   (клас плюс атрибут) перебив би тінь відкритого дня */
.cal__cell .cal__day[aria-expanded="true"]{background:var(--brass-light);box-shadow:0 0 0 4px rgb(var(--brass-rgb) / .14)}
/* день із подією, що вже МИНУЛА (просьба замовника 25 жовтня 2026: у
   списку лише майбутні події, у календарі всі). Та сама заливка, але
   приглушена, і чорнила кремові: на акценті в .34 --on-brass уже не
   читається. Правила стоять ПІСЛЯ підсвічувань вище — вага та сама
   (три рівні класів), тож порядок тут і вирішує, інакше під курсором
   минулий день світився б як майбутній */
.cal__day--past{background:rgb(var(--brass-rgb) / .34);color:var(--cream)}
@media (hover:hover) and (pointer:fine){
  .cal__cell:hover .cal__day--past{background:rgb(var(--brass-rgb) / .5);box-shadow:0 0 0 4px rgb(var(--brass-rgb) / .1)}
}
.cal__cell .cal__day--past[aria-expanded="true"]{background:rgb(var(--brass-rgb) / .5);box-shadow:0 0 0 4px rgb(var(--brass-rgb) / .1)}
/* сьогодні — не подія, тож не заливка, а обід тим самим акцентом */
.cal__today{
  display:inline-grid;place-items:center;width:28px;height:28px;
  color:var(--cream);box-shadow:inset 0 0 0 1px rgb(var(--brass-rgb) / .55);
}
/* день, який і сьогодні, і з подією: заливку лишаємо (вона несе «є подія»),
   а «сьогодні» додаємо ореолом НАВКОЛО квадрата. Класи .cal__day і
   .cal__today разом вішати не можна — другий перефарбовує чорнила в кремові,
   а на акцентній заливці читаються лише --on-brass */
.cal__day[aria-current="date"]{box-shadow:0 0 0 2px rgb(var(--brass-rgb) / .38)}
/* балон над днем — той самий предмет, що підпис дарувальника в профілі
   (спільне правило .gift__tip,.cal__tip вище). :focus, а не :focus-visible —
   з тієї ж причини: інакше він не з'являється, коли фокус прийшов не з
   клавіатури.

   Ширина тут ФІКСОВАНА, а не max-content: усередині список подій, і рядки
   мусять бути однакові.

   Далі — арифметика, без якої ширину й зсуви міняти не можна. Балон
   шириною 280px СТОЇТЬ НА ДНІ (28px) всередині місяця, а місяць вузький:
   321px на 1440 і 290px на 1061 — тобто ненабагато ширший за сам балон.
   Якби всі дні тримали його лівим краєм, як раніше, у середині тижня він
   вилазив би за панель на 76px, а в третього місяця — за край сторінки
   (на 1200 це 28px горизонтального скролу). Тому КОЖЕН СТОВПЕЦЬ має свій
   зсув, а хвостик переїжджає назустріч і лишається під серединою дня:
   хвостик = 14 - зсув - 5.5. Числа порахованы для найвужчого
   триколонкового екрана (1061px) і зміряны на 1440 / 1280 / 1061 / 768 /
   390 — tests/visual/check-event-calendar.mjs */
.cal__tip{
  left:-8px;bottom:calc(100% + 10px);
  width:280px;max-width:min(280px,calc(100vw - 2 * var(--gutter)));
  padding:13px 15px 14px;
  /* text-align обов'язковий: клітинка таблиці центрує текст (.cal__tab td),
     і балон успадковував би це — дата й «і ще N» стояли б посередині, а
     рядки подій ліворуч */
  text-align:left;
}
.cal__tip::after{left:17px}
/* :focus-within, а не :focus — фокус може стояти і на дні, і на рядку
   всередині балона, і балон мусить лишатися на екрані в обох випадках.
   Саме цим клавіатура й дістає рядки: поки балон display:none, посилання в
   ньому не фокусуються, але таб на день показує балон — і наступний таб
   уже заходить усередину */
/* hover — тільки на миші, бо на тачі він залипає після тапу й балон не
   вдалося б закрити повторним тапом. Там балон відкриває клік, і стан
   тримає aria-expanded на самому дні (main.js) — другого джерела правди
   немає, той самий підхід, що в пояснення до плашки спільноти */
@media (hover:hover) and (pointer:fine){
  .cal__cell:hover .cal__tip{display:block}
}
.cal__cell:focus-within .cal__tip,.cal__day[aria-expanded="true"] + .cal__tip{display:block}
/* балон знову ловить мишу (спільне правило вище гасить це для підпису
   дарувальника): інакше клікнути рядок події не вийшло б */
.cal__tip{pointer-events:auto}
/* місток через зазор між днем і балоном. Без нього балон зникає рівно
   посередині дороги: 10px, на яких не наведено ні день, ні балон, а
   показує його обгортка. Висота дорівнює зазору, ширина — балонова */
.cal__tip::before{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px}
.cal__tab td:nth-child(3) .cal__tip{left:-50px}
.cal__tab td:nth-child(3) .cal__tip::after{left:58px}
.cal__tab td:nth-child(4) .cal__tip{left:-100px}
.cal__tab td:nth-child(4) .cal__tip::after{left:108px}
.cal__tab td:nth-child(5) .cal__tip{left:-150px}
.cal__tab td:nth-child(5) .cal__tip::after{left:158px}
.cal__tab td:nth-child(6) .cal__tip{left:-200px}
.cal__tab td:nth-child(6) .cal__tip::after{left:208px}
/* неділя — єдиний стовпець, де балон лишився дзеркальним: зсув -244px і
   right:-8px — це те саме місце, тільки записане від правого краю */
.cal__tab td:nth-child(7) .cal__tip{left:auto;right:-8px}
.cal__tab td:nth-child(7) .cal__tip::after{left:auto;right:17px}
/* у перших двох тижнях балон виводимо ПІД день, а не над ним: зі списком
   подій він високий (чотири кадри — близько 320px), а місяць стоїть одразу
   під заголовком панелі — вгорі балон ішов би за край екрана й під липку
   шапку. Хвостик при цьому переїжджає на верх і дивиться вгору */
.cal__tab tbody tr:nth-child(-n+2) .cal__tip{top:calc(100% + 10px);bottom:auto}
.cal__tab tbody tr:nth-child(-n+2) .cal__tip::after{
  top:-6px;bottom:auto;
  border-right:0;border-bottom:0;
  border-left:1px solid var(--edge);border-top:1px solid var(--edge);
}
.cal__tab tbody tr:nth-child(-n+2) .cal__tip::before{top:-10px;bottom:auto}
/* список подій того дня: кадр, назва, час — рядок на подію (просьба
   замовника 23 жовтня 2026, до того в балоні стояла одна назва й «і ще N»).
   Волосінь між рядками та сама, що між місяцями */
.cal__tipday{margin-bottom:10px}
.cal__tiplist{display:flex;flex-direction:column;gap:10px}
.cal__tipev{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:11px;align-items:center;
  color:inherit;text-decoration:none;
}
.cal__tipev + .cal__tipev{border-top:1px solid var(--edge);padding-top:10px}
/* відгук рядка той самий, що в рядка анкети (.rost): назва світлішає
   акцентом, кадр трохи наїжджає. Обведення фокуса дає спільне правило
   :focus-visible */
.cal__tipev:hover .cal__tipname{color:var(--brass-light)}
.cal__tipev:hover .cal__tipshot img{transform:scale(1.06)}
/* кадр — квадрат 52px із обрізом. Фільтра й змішування тут немає з тієї ж
   причини, що в .event__photo--photo: це жива світлина, а не чорнильний
   аркуш макета */
.cal__tipshot{
  display:grid;place-items:center;flex:none;width:52px;height:52px;overflow:hidden;
  background:#0d0d0e;box-shadow:inset 0 0 0 1px var(--edge);
}
.cal__tipshot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s var(--ease)}
.cal__tipshot--none svg{
  width:24px;height:24px;fill:none;
  stroke:rgba(242,239,233,.3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.cal__tipname{display:block;font:400 14px/1.35 var(--body);color:var(--cream);transition:color .22s var(--ease)}
.cal__tiptime{
  display:block;margin-top:5px;
  font:500 11px/1 var(--label);letter-spacing:.14em;color:var(--brass);
}
.cal__tipmore{display:block;margin-top:10px;font:300 13px/1.4 var(--body);color:var(--cream-dim)}
.cals__legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:15px;
  font:400 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
}
.cals__key{width:12px;height:12px;flex:none;background:var(--brass)}
.cals__key--past{margin-left:14px;background:rgb(var(--brass-rgb) / .34)}
.cals__key--today{margin-left:14px;background:none;box-shadow:inset 0 0 0 1px rgb(var(--brass-rgb) / .55)}

/* --- Список подій рядками ------------------------------------- */
/* Замовник 13 жовтня 2026 попросив список, а не плитку: кадр ліворуч, тіло
   праворуч, «Детальніше» на правому краю — силует рядка анкети .rost.
   Розмітка та сама, що в плитки, лише «Детальніше» стоїть прямим дитям рядка:
   це третій стовпець сітки, а не останній рядок тіла */
/* зазор між рядками удвічі більший за первісні 14px (прохання замовника
   13 жовтня 2026) */
.events__list--rows{grid-template-columns:minmax(0,1fr);gap:28px}

/* сітка плитки в одну колонку: три події йдуть стовпцем */
.events__list--slim{grid-template-columns:minmax(0,1fr);gap:14px}
.event--slim .event__frame{aspect-ratio:3/2}
/* табличка дати тримає ту саму посадку в куті, тільки дрібнішу: 11px у місяця
   лишились — це нижня межа читабельності для функціонального тексту */
.event--slim .event__when{padding:6px 10px 7px}
.event--slim .event__day{font-size:17px}
.event--slim .event__body{gap:7px;padding:12px 13px 11px}
.event--slim .event__place{gap:5px;font-size:10px;letter-spacing:.14em}
.event--slim .event__place svg{width:12px;height:12px}
.event--slim .event__body h3{font-size:1rem;line-height:1.25}
.event--slim .event__text{font-size:13px;line-height:1.45;-webkit-line-clamp:2}
.event--slim .scope{padding:4px 7px;font-size:10px;letter-spacing:.1em}
.event--slim .event__more{padding-top:10px;font-size:10px;letter-spacing:.13em}
.event--slim .event__more svg{width:14px;height:14px}
.event--row{
  display:grid;grid-template-columns:clamp(210px,21vw,268px) minmax(0,1fr) auto;
  align-items:stretch;
}
/* кадр тягнеться на висоту рядка: пропорція тут не потрібна — висоту задає
   тіло, а кадр однаково обрізається по центру */
.event--row .event__frame{aspect-ratio:auto;border-bottom:none;border-right:1px solid var(--edge)}
/* рядок вищий на 10% за первісний (прохання замовника 13 жовтня 2026): висоту
   задає тіло, тож піднято його вертикальне поле — 22px → 31px дають 175 → 193px.
   Кадр ліворуч тягнеться за ним сам */
/* зазор між рядками всередині карточки збільшений (прохання замовника
   13 жовтня 2026): 8px → 14px між місцем, назвою, датами й лідом. Карточка від
   цього підросла з 193 до 211px — висоту задає саме тіло */
.event--row .event__body{justify-content:center;gap:14px;padding:clamp(22px,2.4vw,31px) clamp(18px,2vw,26px)}
/* рядок ширший за плитку, і лід розтягнувся б на ~120 знаків — межа
   читабельності 78. Обмежуємо довжину рядка й лишаємо два рядки тексту,
   щоб рядки списку не розповзалися по висоті */
/* 68ch, а не 76: check-layout міряє довжину рядка як width / (0.5 * font-size),
   і в цій мірці 76ch одиниці CSS дають 83 — більше за межу 78 */
.event--row .event__text{max-width:68ch;-webkit-line-clamp:2}
.event--row .event__more{
  align-self:center;margin-top:0;border-top:none;
  padding:0 clamp(18px,2vw,26px) 0 clamp(6px,1vw,14px);
}
/* підйому під курсором у рядка немає — так само, як у рядка анкети
   (замовник зняв його там 12 жовтня 2026). Відгук лишився: акцентний контур,
   назва світлішає, стрілка їде вправо, кадр масштабується */
.event--row:hover{transform:none;box-shadow:var(--lift)}

/* --- Рядки плитки, яких немає на головній --------------------- */
/* адреса або назва місця поряд із містом. Не капітель: це довгий рядок,
   а не службова позначка. Крапку-розділювач малює ::before, щоб у розмітці
   не стояв окремий знак */
.event__at{font:300 14px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--cream-dim)}
.event__at::before{content:"·";margin-right:7px;color:rgba(242,239,233,.34)}
/* усі дати події під назвою: табличка на кадрі показує лише першу */
.event__times{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font:500 11px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-soft);font-variant-numeric:tabular-nums;
}
.event__times svg{
  width:14px;height:14px;flex:none;fill:none;stroke:var(--brass);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.event__times time + time::before{content:"·";margin-right:7px;color:rgba(242,239,233,.34)}

/* ============================================================
   СТОРІНКА ОДНІЄЇ ПОДІЇ
   ============================================================ */
/* Поверхня та сама, що в каталозі подій (.ev дописано в групу .events,.evs), і
   секція так само перша й єдина на сторінці: верхній відступ покриває висоту
   fixed-шапки, лінії згори немає. Згори шапка події — той самий блок .feat, що
   головна подія в каталозі, лише з h1 замість h3: широке горизонтальне фото
   фоном, віньєтка, центрований текст. Нижче сторінка ділиться надвоє, як
   результати пошуку: ліворуч липка панель «Коли і де» з головною дією,
   праворуч повний опис і блок реєстрації. Під колонками — плитка інших подій */

/* --- Назад до каталогу --------------------------------------- */
/* тиха капітель зі стрілкою, і стрілка під курсором їде ВЛІВО: вона веде
   назад, а не вперед */
.ev__back{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(20px,2.6vh,30px);
  font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:var(--cream-soft);text-decoration:none;transition:color .22s var(--ease);
}
.ev__back:hover{color:var(--brass)}
.ev__back svg{
  width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s var(--ease);
}
.ev__back:hover svg{transform:translateX(-3px)}

/* --- Шапка події --------------------------------------------- */
/* той самий .feat, тільки вищий і з більшим кеглем назви: тут вона h1 і перший
   предмет сторінки, а не рядок у каталозі */
.feat--page{min-height:clamp(430px,43vw,580px)}
.feat--page .feat__body{max-width:800px}
.feat--page .feat__name{font-size:clamp(2.1rem,3.6vw,3.05rem)}
/* головна дія веде вниз, до блоку реєстрації, тому стрілка дивиться вниз і
   під курсором їде вниз: у кнопок станції вона за умовчанням їде вправо */
.ev__cta:hover svg,.ev__ask:hover svg{transform:translateY(2px)}

/* --- Колонки -------------------------------------------------- */
/* силует той самий, що в результатах пошуку: вузька колонка ліворуч, широка
   праворуч. Колонка тут ширша за сайдбар оголошень — у ній стоять таблички
   дат із часом, а 231px різали рядок «22:00 — 04:00» навпіл */
.ev__grid,.doc__grid,.acct__grid{
  display:grid;grid-template-columns:clamp(236px,20vw,290px) minmax(0,1fr);
  gap:clamp(22px,2.6vw,34px);align-items:start;margin-top:clamp(44px,6vh,76px);
}
.ev__main,.doc__main,.acct__main{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px);min-width:0}

/* --- Коли і де ------------------------------------------------ */
/* липка, як сайдбар оголошень у результатах пошуку: їде зі сторінкою до кінця
   тексту й тримає головну дію на видноті. Підписи й значення набрані тим самим
   правилом, що смуга фактів у профілі (.ev__facts дописано в .facts dt/dd),
   а між фактами — волосінь --edge: вони стоять стовпчиком, тож лінія
   горизонтальна, а не збоку */
.ev__side,.doc__side,.acct__side{position:sticky;top:calc(var(--rail-h) + 18px)}
.ev__fact + .ev__fact{margin-top:15px;padding-top:15px;border-top:1px solid var(--edge)}
/* назва місця — рядком вище за адресу: разом вони не вміщаються у вузьку
   колонку й ламалися б будь-де */
.ev__addr{display:block;margin-top:4px;font-size:15px;color:var(--cream-soft)}
.ev__dates{display:flex;flex-direction:column;gap:12px}
.ev__dates li{display:flex;align-items:center;gap:11px}
.ev__slot{display:flex;flex-direction:column;gap:5px;min-width:0}
.ev__slot b{font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}
.ev__slot time{font:500 13px/1 var(--label);letter-spacing:.08em;color:var(--cream);font-variant-numeric:tabular-nums}
/* кнопка тягнеться на всю колонку, а бокові поля вужчі за звичайні 26px: у
   найвужчій колонці (236px на 1061) капітель із трекінгом інакше не влазить —
   ярлик вилазив за кнопку на 16px. Там само дозволено перенос: у два рядки
   краще, ніж за край, і тому ж рядкам потрібен інтерліньяж (у .btn він 1) */
.ev__ask,.ev__ics{
  width:100%;margin-top:clamp(18px,2vw,24px);padding-inline:18px;
  white-space:normal;line-height:1.35;text-align:center;
}
/* .ics у затвердженому макеті не намальовано — його додала фаза 9, бо подію
   з кількома датами людина інакше переписує в календар руками. Геометрія та
   сама, що в кнопки реєстрації, тільки тиша: .btn--ghost без рамки.
   Відступ менший — це друга кнопка того самого блоку, а не новий ряд */
.ev__ics{margin-top:10px}

/* --- Реєстрація ----------------------------------------------- */
/* реєстрації на сайті немає: місця підтверджує сама організаторка, тож блок —
   це вона та її канали зв'язку. Якір свій: спільне правило main > section[id]
   ловить лише прямих дітей main, а ця панель лежить у колонці.
   Підкладка світліша за звичайну панель, а тінь глибша (прохання замовника):
   це ціль сторінки, обидві кнопки ведуть саме сюди. Світліший градієнт той
   самий, що --panel-hover, але вписаний окремо: там він означає стан під
   курсором, а тут — постійну поверхню */
.ev__signup{
  scroll-margin-top:calc(var(--rail-h) + 22px);
  background:linear-gradient(180deg,#242426,#1b1b1d);
  box-shadow:var(--lift),0 30px 56px -36px rgba(0,0,0,.95);
}
.ev__org{display:flex;align-items:center;gap:14px}
.ev__org .ava{--ava-size:58px}
.ev__orgid{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev__orgrole{font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:var(--brass)}
.ev__orgname{
  font-family:var(--display);font-size:1.08rem;line-height:1.2;
  color:var(--cream);text-decoration:none;transition:color .25s var(--ease);
}
.ev__orgname:hover{color:var(--brass-light)}
.ev__orgcity{font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}

/* канал зв'язку — тарілка, та сама поверхня, що в поля введення .ctrl: дно
   #0e0e0f, контур --edge, --sink, радіус 2px. Іконка акцентом, підпис
   капітеллю, значення звичайними чорнилами; стрілка праворуч їде вправо —
   посилання веде геть зі сторінки */
/* канали йдуть на всю ширину панелі (рішення замовника): короткі значення
   лишають праворуч порожнечу, зате тарілки читаються як рядки одного списку */
.ev__ways{display:grid;gap:10px;margin-top:clamp(18px,2vw,24px)}
.ev__way,.nf__way{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:13px 16px;border:1px solid var(--edge);border-radius:2px;
  background:#0e0e0f;box-shadow:var(--sink);
  color:inherit;text-decoration:none;
  transition:border-color .22s var(--ease);
}
.ev__way:hover,.nf__way:hover{border-color:rgb(var(--brass-rgb) / .5)}
.ev__way > svg:first-child,.nf__way > svg:first-child{
  width:20px;height:20px;flex:none;fill:none;stroke:var(--brass);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.ev__wayid{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev__wayid b{font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:rgba(242,239,233,.62)}
.ev__wayid span{font-size:15px;color:var(--cream)}
.ev__go{
  width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  color:var(--cream-dim);transition:transform .22s var(--ease),color .22s var(--ease);
}
.ev__way:hover .ev__go,.nf__way:hover .ev__go{color:var(--brass);transform:translateX(3px)}

/* ============================================================
   ТЕКСТОВА СТОРІНКА
   ============================================================ */
/* Довге читання (правила спільноти, приватність, згода). Своїх поверхонь
   сторінка не вводить: угорі заголовок секції .page__head з датою редакції,
   нижче та сама пара колонок, що на сторінці події (.doc__grid дописано в
   .ev__grid — липкий зміст ліворуч, текст праворуч), а розділи стоять
   панелями .pane. Врізка — утоплена тарілка тієї самої поверхні, що поле
   введення .ctrl: нового тла всередині панелі система не дозволяє */

/* дата редакції стає після волосіні заголовка — так само, як лічильник
   кадрів у заголовку галереї профілю */
.doc__stamp{
  font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;
  color:var(--cream-dim);white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* лід сторінки: той самий другий голос, що обіцянка в херо, тільки тихіший.
   Рядок обмежено свідомо — у вимірі check-layout (width / 0.5em) 62ch дають
   ~68 одиниць, тобто лід лишається в межі читабельності */
.doc__lead{
  max-width:62ch;
  font:300 clamp(1.08rem,1.5vw,1.3rem)/1.55 var(--body);color:var(--cream-soft);text-wrap:pretty;
}

/* --- Зміст ---------------------------------------------------- */
/* посилання — капітель на волосині: активний розділ підсвічує main.js через
   aria-current, і CSS читає саме його. Без JS це звичайний список якорів */
.doc__nav li + li{margin-top:9px}
.doc__nav a{
  display:block;padding:1px 0 1px 13px;border-left:1px solid var(--edge);
  font:500 12px/1.35 var(--label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-dim);text-decoration:none;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.doc__nav a:hover{color:var(--cream);border-color:var(--edge-bright)}
.doc__nav a[aria-current="true"]{color:var(--brass);border-color:var(--brass)}

/* --- Розділ ---------------------------------------------------- */
/* якорю потрібен власний запас: загальне правило main > section[id] ловить
   лише прямих дітей main, а розділи лежать у колонці .doc__main — без цього
   рядка зміст відправляв би заголовок під фіксовану шапку */
.doc__part{scroll-margin-top:calc(var(--rail-h) + 22px)}
/* заголовок двоповерховий: номер капітеллю акцентом і назва Montserrat — той
   самий підпис, що роль і ім'я організаторки в блоці реєстрації */
.doc__num{
  font:500 11px/1 var(--label);letter-spacing:.19em;text-transform:uppercase;color:var(--brass);
  font-variant-numeric:tabular-nums;
}
.doc__name{margin-top:9px;font-size:clamp(1.28rem,1.9vw,1.6rem);line-height:1.22}
/* текст розділу вужчий за панель: 68ch — межа читабельності довгого тексту,
   і це свідомо не «на всю ширину», як у профілі, бо тут читають абзацами */
.doc .prose{max-width:68ch;margin-top:clamp(16px,1.8vw,22px)}
.prose h3{font-size:1.1rem;line-height:1.3;color:var(--cream)}

/* --- Списки в тексті ------------------------------------------- */
/* маркер — волосінь акцентом, той самий прийом, що розділювачі сторінки;
   у нумерованому списку цифра набрана капітеллю з табличними цифрами */
/* list-style знято обом: глобальне правило ul{list-style:none} не ловить ol,
   і поряд із власною цифрою ::before стояв ще й браузерний маркер */
.prose ul,.prose ol{display:flex;flex-direction:column;gap:10px;list-style:none;padding-left:0}
.prose li{position:relative;padding-left:27px;font-weight:300;color:rgba(242,239,233,.88);text-wrap:pretty}
.prose ul li::before{content:"";position:absolute;left:0;top:.76em;width:12px;height:1px;background:var(--brass)}
.prose ol{counter-reset:step}
.prose ol li{counter-increment:step}
.prose ol li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.3em;
  font:500 11px/1 var(--label);letter-spacing:.1em;color:var(--brass);
  font-variant-numeric:tabular-nums;
}
.prose strong{font-weight:500;color:var(--cream)}

/* --- Словник --------------------------------------------------- */
/* пара «слово капітеллю акцентом / значення тілом»: та сама ідея, що смуга
   фактів у профілі, але в рядок і без волосіні між клітками */
.doc__terms{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 18px;align-items:baseline}
.doc__terms dt{font:500 11px/1.5 var(--label);letter-spacing:.17em;text-transform:uppercase;color:var(--brass)}
.doc__terms dd{margin:0;font-weight:300;color:rgba(242,239,233,.88)}

/* --- Врізка ---------------------------------------------------- */
/* те саме дно #0e0e0f, контур, --sink і радіус 2px, що в поля введення .ctrl:
   врізка всередині панелі — утоплена плоскість, а не нове тло */
.note{
  display:flex;gap:14px;padding:15px 17px;
  border:1px solid var(--edge);border-radius:2px;background:#0e0e0f;box-shadow:var(--sink);
}
.note__icon{
  width:20px;height:20px;flex:none;margin-top:1px;
  fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.note__body{display:flex;flex-direction:column;gap:7px;min-width:0}
.note__head{font:500 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase;color:var(--brass)}
.note__body p{font-weight:300;color:rgba(242,239,233,.88);text-wrap:pretty}
/* посилання у врізці: те саме, що в підказці воріт (.gate__note a) —
   світлі чорнила, акцент під курсором. Правило спільне на всі врізки,
   бо посилання в них уже у двох місцях: заклик підключити Telegram
   в анкеті й такий самий у списку діалогів */
.note__body a{color:var(--cream-soft);text-decoration:underline;text-underline-offset:3px}
.note__body a:hover{color:var(--brass)}
/* список помилок збереження. Маркер — акцентна волосинка, як у .prose ul:
   другого вигляду списку система не має, і заводити його заради врізки
   не потрібно */
.note__list{display:flex;flex-direction:column;gap:7px;list-style:none;padding-left:0}
.note__list li{position:relative;padding-left:27px;font-weight:300;color:rgba(242,239,233,.88);text-wrap:pretty}
.note__list li::before{content:"";position:absolute;left:0;top:.76em;width:12px;height:1px;background:var(--brass)}

/* --- Проста текстова сторінка ---------------------------------- */
/* тільки заголовок і текст: колонок, змісту й панелей немає, абзаци лежать
   просто на поверхні секції, як блок адреси сторінки в профілі.
   Ширина тексту — одне число --doc-measure (рішення замовника 13 жовтня 2026,
   три кроки: «на всю ширину» → «чуть вужче за сторінку» → «вільне місце і
   ліворуч, і праворуч»). Колонка стоїть по центру оболонки разом із
   заголовком: поля обабіч однакові, інакше текст висів би праворуч від
   заголовка. Міняти ширину тільки тут — заголовок, лід і абзаци беруть її
   з одного токена.
   Межі читабельності це все одно не тримає — у рядку ~125 знаків, тож
   .doc__lead прибрано з виміру довжини рядка в check-layout, як свого часу
   .prose: це рішення, а не недогляд.
   Блок мусить стояти ПІСЛЯ .doc .prose: специфічність у них однакова (0,2,0),
   тож вирішує порядок — зверху правило мовчки програвало обмеженню 68ch */
.doc--plain{--doc-measure:900px}
.doc--plain .page__head,.doc--plain .doc__lead,.doc--plain .prose{
  max-width:var(--doc-measure);margin-inline:auto;
}
.doc--plain .prose{margin-top:clamp(26px,3.6vh,40px);gap:16px}

/* ============================================================
   ОСОБИСТИЙ КАБІНЕТ
   ============================================================ */
/* Редагування анкети. Силует той самий, що на сторінці правил і сторінці
   події (.acct__grid дописано в .ev__grid): ліворуч липка колонка з меню
   кабінету і смугою заповненості, праворуч — анкета панелями .pane.
   Своїх поверхонь сторінка не вводить: поле введення .ctrl, селектор, гніздо
   і сегменти позиціонування прийшли з форми пошуку як є */


/* --- Меню кабінету --------------------------------------------- */
/* той самий предмет, що зміст правил (.doc__nav): капітель на волосині,
   активний розділ акцентом. Додано іконку і лічильник непрочитаних.
   Активний розділ позначено aria-current="page" прямо в розмітці — це
   посилання на інші сторінки, а не якорі, тож JS тут не потрібен */
/* Вкладка-ручка шухляди й затемнення тла — тільки для вузьких екранів
   (див. медіазапит 860px наприкінці файлу). Чекбокс схований завжди:
   він лише тримає стан, а натискають по label. */
.acct__tab,.acct__scrim{display:none}
.acct__switch{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.acct__nav li + li{margin-top:5px}
/* у пункта своя плашка (рішення замовника 13 жовтня 2026). Заливка суцільна,
   без градієнта, колір #151516 задав замовник 14 жовтня 2026 (темніший за верх
   панелі --panel-top), під курсором #242426 — верх --panel-hover. Волосінь ліворуч
   лишилася: саме вона, а не заливка, показує активний розділ, і акцентний
   градієнт активного пункта замовник залишив як є */
.acct__nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 13px;border-left:2px solid var(--edge-bright);
  background:#151516;
  font:500 13px/1.35 var(--label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-soft);text-decoration:none;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.acct__nav a:hover{color:var(--cream);border-color:rgb(var(--brass-rgb) / .55);background:#242426}
.acct__nav a[aria-current="page"]{
  color:var(--brass);border-color:var(--brass);
  background:linear-gradient(90deg,rgb(var(--brass-rgb) / .13),rgb(var(--brass-rgb) / .03));
}
.acct__nav svg{
  width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* лічильник — та сама пігулка, що в шапці й у заголовка групи вподобань:
   трекінг гаситься, інакше цифра стоїть ліворуч від центру кружка */
/* колонка кабінету на 20% вужча за колонку сторінки події і зміст правил
   (просьба замовника 15 жовтня 2026): у меню стоять самі посилання з іконкою,
   а табличок із часом, через які та колонка ширша за сайдбар оголошень, тут
   немає. Найдовший пункт «Баланс монет» із лічильником у 232px влазить —
   заміряно. Верхній відступ групи знято: заголовок сторінки стоїть у другій
   колонці, тож сітка починається просто під шапкою */
.acct__grid{margin-top:0;grid-template-columns:clamp(189px,16vw,232px) minmax(0,1fr)}
/* первинне заповнення анкети: меню кабінету не малюється зовсім (просьба
   замовника 19 жовтня 2026 — щоб людина зосередилась на формі), тож колонка
   одна. Правило мусить стояти ПІСЛЯ сусіднього: специфічність однакова,
   вирішує порядок — та сама грабля, що в .event__photo--b.
   Ширину форми тримаємо ту саму, що з меню (760px на 1440), і ставимо
   колонку по центру оболонки: розтягнута на всі 1026px, вона дала б
   розділам вподобань четвертий стовпець, тобто іншу форму, ніж та, у
   яку людина повернеться після збереження */
.acct__grid--solo{grid-template-columns:minmax(0,1fr)}
.acct__grid--solo .acct__main{max-width:760px;margin-inline:auto}
/* кеглі заголовків помінялися місцями (рішення замовника 13 жовтня 2026):
   заголовок блока 14px, підпис поля 11px — було навпаки. Правило обмежене
   кабінетом: .pane__head спільний із профілем, подією і правилами, а 14px
   у підпису поля на головній — окрема просьба замовника.
   Відступ від заголовка до вмісту подвоєно: 34px замість 17 */
.acct .pane__head{font-size:14px;margin-bottom:34px}
.acct .field__label{font-size:11px}
.acct__main{min-width:0}
.acct .page__head{margin-bottom:clamp(20px,2.6vh,30px)}
.acct__form,.acct__stack{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px)}
/* анкет на сторінці три — по одній на тип профілю, — і видима лише та, чия
   спільнота обрана перемикачем. Правило обов'язкове: [hidden] браузера має
   нижчу специфічність за .acct__form{display:flex}, тож без нього схована
   форма лишилася б на екрані. Та сама грабля, що в .group__body[hidden]
   і .cals__body[hidden] */
.acct__form[hidden]{display:none}

/* --- Де показувати профіль -------------------------------------- */
/* великий сегментований перемикач під заголовком анкети (просьба замовника
   15 жовтня 2026): три варіанти на всю ширину колонки. Предмет той самий, що
   сегменти позиціонування .stance — radio зі спільною рамкою і акцентною
   заливкою вибраного, — але втричі вищий і на всю ширину: це головне рішення
   анкети, а не дрібний вибір усередині групи. Radio тут доречні: спільнота
   одна з трьох, і це другий такий контрол у системі після .stance, решта
   прапорців анкети — чекбокси .jack. Кольори тегів спільноти (.scope:
   фіолетовий кінкі, чорний BDSM) сюди не перенесені: у першому варіанті
   спільноти дві разом, двоколірної заливки система не має, тож вибір
   позначає акцент — як у сегментах. Обгортка — звичайне .field, тому
   пояснення під перемикачем набране спільним .field__hint */
.scopes{margin:0;padding:0;border:1px solid var(--edge);display:grid;grid-template-columns:repeat(3,1fr)}
/* з 20 жовтня 2026 плашка — не сам <label>, а обгортка: у правому верхньому
   кутку стоїть кнопка «i» з поясненням, що це за розділ (просьба замовника),
   а вкладати кнопку в label не можна — клік по ній перемикав би радіо.
   Тому radio тепер прямий нащадок плашки, а підпис — окремий <label for>:
   так сусідські селектори input:checked + .scopes__pick і input:checked ~
   .scopes__info дістають і текст, і іконку без :has() */
.scopes__opt{position:relative;display:flex;cursor:default}
.scopes__pick{flex:1;display:flex;min-width:0;cursor:pointer}
.scopes__opt + .scopes__opt{border-left:1px solid var(--edge)}
.scopes input{position:absolute;opacity:0;width:0;height:0}
/* перенос дозволено (white-space за умовчанням normal, line-height 1.35):
   «Кінкі & BDSM спільноти» капітеллю з трекінгом просить ~245px, а колонка
   в сітці на 1061px дає ~235px — там ярлик чесно стає у два рядки */
.scopes span{
  flex:1;display:grid;place-items:center;text-align:center;
  min-height:76px;padding:18px 16px;
  font:500 14px/1.35 var(--label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-dim);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.scopes__pick:hover span{color:var(--cream);background:rgba(242,239,233,.04)}
.scopes input:checked + .scopes__pick span{color:var(--on-brass);background:var(--brass)}
.scopes input:focus-visible + .scopes__pick span{outline:2px solid var(--signal);outline-offset:-2px}

/* кнопка пояснення. Коло 20px акцентним контуром у кутку плашки; на обраній
   плашці заливка акцентна, тож і чернила, і контур іконки переходять у
   --on-brass — інакше акцент на акценті зник би */
.scopes__info{
  position:absolute;top:7px;right:7px;z-index:3;
  width:20px;height:20px;display:grid;place-items:center;padding:0;
  border:1px solid rgb(var(--brass-rgb) / .55);border-radius:99px;background:none;
  color:var(--brass);font:500 12px/1 var(--label);cursor:pointer;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.scopes__info:hover{border-color:var(--brass);background:rgb(var(--brass-rgb) / .14)}
.scopes input:checked ~ .scopes__info{color:var(--on-brass);border-color:rgb(0 0 0 / .4)}
.scopes input:checked ~ .scopes__info:hover{border-color:rgb(0 0 0 / .65);background:rgb(0 0 0 / .08)}
/* сам балон — той самий мовний балон, що підпис дарувальника й день
   календаря (спільне правило нижче). Відмінність одна: він висить ПІД
   кнопкою, тож хвостик дивиться вгору, а стан тримає aria-expanded на
   кнопці — другого джерела правди немає */
.scopes__tip{
  left:auto;right:-1px;bottom:auto;top:calc(100% + 9px);
  pointer-events:auto;text-transform:none;letter-spacing:normal;
}
.scopes__tip::after{left:auto;right:13px;bottom:auto;top:-6px;border:0;border-left:1px solid var(--edge);border-top:1px solid var(--edge)}
.scopes__info[aria-expanded="true"] + .scopes__tip{display:block}
/* на пристрої з мишею пояснення з'являється під курсором, на тачі —
   по кліку (просьба замовника 20 жовтня 2026). Тому hover-правило
   живе в медіазапиті вказівника, а click-перемикач у main.js питає
   той самий медіазапит і на миші нічого не робить: інакше клік
   залишав би балон відкритим після того, як курсор пішов.
   :focus-visible, а не :focus — з тієї ж причини (фокус від кліку
   показувати нічого не має, його вже показав hover); клавіатурі
   focus-visible дає те саме. Це свідома відмінність від балона
   подарунка, де стоїть саме :focus */
@media (hover:hover) and (pointer:fine){
  .scopes__info:hover + .scopes__tip,
  .scopes__info:focus-visible + .scopes__tip{display:block}
}

/* той самий перемикач в один стовпець — налаштування приватності
   (просьба замовника 20 жовтня 2026). Розкладка не нова: це рівно те, що
   .scopes робить на ≤620px, тільки тут завжди. Капітель знята свідомо:
   ярлики тут речення («Анкету бачать лише зареєстровані користувачі»), а
   не назви розділів, і в три колонки капітеллю вони стали б у чотири
   рядки. Поверхня, обрана заливка й контур лишаються ті самі.
   Правила МУСЯТЬ стояти після базових .scopes: специфічність однакова,
   вирішує порядок — та сама грабля, що в .event__photo--b */
.scopes--rows{grid-template-columns:minmax(0,1fr)}
.scopes--rows .scopes__opt + .scopes__opt{border-left:none;border-top:1px solid var(--edge)}
.scopes--rows span{
  min-height:58px;padding:16px 18px;place-items:center start;text-align:left;
  font:400 14px/1.4 var(--body);letter-spacing:normal;text-transform:none;
}
.acct__togal{margin-top:20px;align-self:flex-start}
.acct__count{
  margin-inline-start:auto;flex:none;
  min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:99px;
  background:var(--brass);color:var(--on-brass);
  font:500 12px/1 var(--label);letter-spacing:0;font-variant-numeric:tabular-nums;
}
/* монети — золотом, тим самим токеном, що статус Gold: куплене не йде за
   акцентом і палітра його не чіпає. Чорнила темні — на світлому золоті
   кремові не читаються */
.acct__count--gold{background:var(--gold);color:#17120a}

/* --- Головне фото ---------------------------------------------- */
/* обід золотий, бо учасниця Gold: статус красить --gold-rgb, і палітра його
   не чіпає. Галерею редагують не тут — у неї свій розділ меню */
.face{display:flex;align-items:flex-start;gap:clamp(20px,2.6vw,32px)}
.face .ava{--ava-size:140px;flex:none}
/* дії стовпчиком: «Видалити» стоїть під «Завантажити фото» (рішення замовника) */
/* кнопки стовпчиком і однакової ширини: контейнер міряється по найширшій
   (width:fit-content), а stretch тягне до неї другу. Зазор 18px — замовник
   просив опустити «Видалити фото» нижче */
.face__act{display:flex;flex-direction:column;align-items:stretch;width:fit-content;gap:18px;min-width:0}
.face__hint{
  flex-basis:100%;font-size:14px;font-weight:300;line-height:1.5;
  color:var(--cream-dim);text-wrap:pretty;
}

/* --- Поля анкети ------------------------------------------------ */
/* ряд полів тієї самої мірки, що поле вподобань у формі пошуку
   (.prefs__field): колонка не вужча за 248px, далі перенос */
.acct__row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:clamp(20px,2.4vw,30px);align-items:start;
}
/* перший ряд «Основного» — ім'я, область і місто втрьох (рішення
   замовника 20 жовтня 2026). Спільна мірка тут не годиться: у колонці
   анкети 760px auto-fit дає два стовпці, і місто переходило б у другий
   рядок. Нижче 861px ряд повертається до спільної мірки — у трьох
   стовпцях на планшеті від значень селекторів лишалася б трикрапка.
   Правило обов'язково ПІСЛЯ .acct__row: специфічність однакова,
   вирішує порядок — та сама грабля, що в .event__photo--b */
.acct__row--three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* два ряди полів підряд: вертикальний зазор той самий, що між полями
   всередині ряду */
.acct__row + .acct__row{margin-top:clamp(20px,2.4vw,30px)}
.acct__wide{margin-top:clamp(20px,2.4vw,30px)}
/* стопка врізок над анкетою: відмова модератора, зведення помилок,
   відповідь про збережене, заклик підключити Telegram. Їх буває кілька
   підряд, а своїх відступів .note не має — зазор і відбивка від форми
   живуть тут. Саму обгортку шаблон малює лише коли є що показати:
   ховати порожню через :empty не вийде (всередині лишаються переводи
   рядків, тобто текстові вузли), а зайвий відступ на чистому GET зсунув
   би анкету на 30px і розвів пиксельне порівняння кабінету з макетом */
.acct__notes{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(20px,2.4vw,30px)}
/* пояснення під перемикачем спільноти стоїть по центру (рішення замовника
   20 жовтня 2026): перемикач на всю ширину колонки, і підпис, притиснутий
   ліворуч, читався як підпис до першої плашки. Правило обмежене самим
   перемикачем — решта .field__hint у кабінеті лишилася ліворуч */
.acct [data-scopes] .field__hint{text-align:center}
.field__hint{font-size:13px;font-weight:300;line-height:1.5;color:var(--cream-dim);text-wrap:pretty}
.field__hint b{color:var(--cream-soft);font-weight:500}
/* лічильник знаків тримає висоту завжди: без цього його поява штовхала б
   блок — та сама грабля, що в рядка «Скопійовано» під адресою профілю */
.field__count{
  margin-top:-4px;min-height:14px;text-align:right;
  font:400 12px/1 var(--label);letter-spacing:.06em;color:var(--cream-dim);
  font-variant-numeric:tabular-nums;
}
.field__count[data-low]{color:var(--brass)}
/* багаторядкове поле — та сама тарілка, що .ctrl, тільки вище і з ручкою
   розтягування по вертикалі. Нової поверхні не вводимо */
.ctrl--area{
  display:block;min-height:150px;resize:vertical;
  font-size:15px;line-height:1.55;font-weight:300;
}
.ctrl--two{min-height:0;height:auto;resize:none}
/* три селектори в ряд: день, місяць, рік. Середній ширший — у ньому слово,
   а не число. Нативний <input type="date"> не беремо: Chrome малює в ньому
   власний світлий календар, і в темній системі він світить білим */
.born{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr) minmax(0,1fr);gap:8px}
/* заголовок панелі вже каже «Вподобання», тож легенди немає, а відступи
   групи рахуються від підпису під ним */
.acct__prefs .prefs,.acct__prefs .prefs__field{margin-top:0}
/* панель вподобань спливає НАД вмістом (position:absolute), а наступні панелі
   йдуть пізніше в дереві й мають власне тло — без цього рядка вони закрили б
   її нижню половину. Те саме робить z-index:2 у секції пошуку */
.acct__prefs{position:relative;z-index:2}
/* панель BDSM-вподобань стоїть ПЕРЕД вподобаннями, а список селектора
   розкривається вниз — тож їй потрібен z-index вищий за 2, інакше відкриті
   «Основні практики» (нижнє поле) ховалися б за наступною панеллю */
.acct__bdsm{position:relative;z-index:3}
/* два тексти на одній поверхні — так само, як «Про мене» і «Кого шукаю»
   стоять однією панеллю в публічному профілі */
.acct__texts .field + .pane__head{margin-top:clamp(24px,3vw,32px)}

/* --- Підвал форми ------------------------------------------------ */
/* Зірочка обовʼязкового поля (рішення замовника 24 жовтня 2026). Власного
   кольору не має: і підпис поля, і заголовок панелі вже набрані акцентом,
   другий відтінок тут був би шумом. Знято тільки letter-spacing — у
   підписів він .19em, і зірочка відʼїжджала б від слова далі, ніж знак
   розділу. У заголовку панелі зірочка стоїть усередині <span> разом із
   текстом, а не окремим вузлом: .pane__head — це flex із gap:12px, і
   окремим елементом вона відлетіла б на цей самий gap. */
.req{letter-spacing:0}
/* Рядок-пояснення до зірочок. Стоїть у підвалі форми, поруч із кнопкою,
   а не вгорі: самі зірочки людина бачить із першого поля, а питання «що
   це» виникає наприкінці, коли вона збирається зберігати. На вузькому
   екрані .acct__foot переносить його під кнопку — підвал тоді 76px
   замість 44. */
.acct__req{font-size:13px;font-weight:300;line-height:1.5;color:var(--cream-dim)}
/* Рядок помилки під гніздами мети й під розділами вподобань: там, де
   контрол стоїть прямо в панелі, а не в .field з його gap в 11px. */
.pane > .field__err{margin-top:14px}
.acct__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.acct__said{
  margin-left:auto;min-height:12px;
  font:400 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--brass);
}

/* ============================================================
   АУТЕНТИФІКАЦІЯ (фаза програмування)
   ============================================================ */
/* Усе, що з'явилось на сторінках разом зі справжнім входом. Нових
   поверхонь тут немає взагалі: помилка — це текст акцентом, стан —
   уже наявна врізка .note, кнопка Google — тиха пігулка .btn--quiet,
   розділювач «або» — той самий .nf__or зі сторінки 404.
   На чистій сторінці воріт (без помилок і без ключів OAuth) жоден із цих
   елементів не малюється, тому ворота лишаються такими самими до пікселя,
   як затверджений макет — це тримає tests/visual/compare.mjs. */

/* Помилка під полем. Червоного в системі немає і вводити його заради
   валідації не можна: акцент і так єдиний сигнальний колір сайту, а
   поруч горить акцентом підпис поля — отже помилка читається як
   продовження того самого поля, а не як чужа плашка. Рядок іде під
   контролом, тому власного верхнього відступу не має: його дає gap
   у .field (11px). */
.field__err{
  margin:0;font:400 13px/1.45 var(--body);color:var(--brass);text-wrap:pretty;
}
/* поле з помилкою тримає той самий контур, що під фокусом, тільки щільніший */
.ctrl[aria-invalid="true"]{border-color:rgb(var(--brass-rgb) / .75)}

/* Рядок стану у воротах («Посилання надіслано», «Пароль змінено») —
   врізка .note. Свій відступ потрібен тому, що .gate__form розставляє
   ряди однаковим gap у 18px, а повідомлення стоїть окремим блоком між
   заголовком і першим полем. */
.gate__said{margin-top:-4px}

/* Вхід через Google. Кнопки в затвердженому макеті немає — намальована
   найтихішим зі способів: та сама пігулка, що «Увійти» в шапці, на всю
   ширину консолі. Загальний зсув іконки вправо під курсором погашено:
   логотип не стрілка, їхати йому нікуди (та сама правка, що в стрілки
   згортання календаря). Знак кольоровий за гайдлайном Google — це другий
   виняток із правила «увесь растр монохромний» після подарунків. */
.gate__or{margin-top:clamp(16px,2.2vw,22px)}
.gate__google{width:100%;margin-top:14px}
.gate__google:hover svg{transform:none}

/* --- Кабінет: налаштування -------------------------------------- */
/* форма всередині панелі: підказка, ряд полів, кнопка. Ритм тісніший за
   стопку панелей — це одна думка, а не кілька */
.acct__set{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px)}
/* кнопка міряється по собі, а не тягнеться на всю панель — так само, як
   «Перейти до галереї» в анкеті (.acct__togal) */
.acct__set .btn{align-self:flex-start}
/* підказка, яка стоїть у панелі ПОЗА формою, не має прилипати до того, що
   йде за нею (просьба замовника 20 жовтня 2026: кнопка «Підключити
   Telegram» і рядок «Нікого не заблоковано» зливалися з текстом над
   ними). Ритм той самий, що gap у .acct__set — усередині панелі він один.
   Правило обмежене сторінкою налаштувань: .pane з підказкою стоїть і в
   оголошеннях, і в подіях, і в монетах, а просьба була про цю сторінку */
.acct--settings .pane > .field__hint + *{margin-top:clamp(18px,2.2vw,26px)}
/* те саме для врізки: кнопка «Відкрити бота» прилипала до рядка «Відкрийте
   бота, натисніть Start» (просьба замовника 21 жовтня 2026). Раніше ритм у
   панелі Telegram тримала підказка над врізкою — її заказник тим самим
   раундом попросив зняти, і стик лишився без відступу. Ритм один і той
   самий, що в правилі вище */
.acct--settings .pane > .note + *{margin-top:clamp(18px,2.2vw,26px)}
/* панелі налаштувань — цілі з адреси (#telegram після привʼязки, #privacy
   з тексту видалення), а загальне правило main > section[id] ловить лише
   прямих дітей main: без свого scroll-margin-top панель заїжджала б під
   фіксовану шапку. П'ятий раз та сама грабля — до цього галерея профілю,
   якорі подій, #signup і розділи правил */
.acct__stack > .pane[id]{scroll-margin-top:calc(var(--rail-h) + 22px)}
/* ряд дій у панелі (кабінет → Мої події, фаза 9): єдина розкладка, якої
   не було в затверджених частинах — там кнопки стояли або стовпчиком
   (.face__act), або по одній. Нової поверхні не вводить: самі кнопки ті
   самі, це лише ряд із переносом */
.acct__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.acct__acts form{margin:0}

/* ============================================================
   ФУТЕР
   ============================================================ */
.foot{
  position:relative;border-top:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(12,12,13,.82),rgba(8,8,9,.94));
}
.foot__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,52px);padding-block:clamp(50px,7vh,84px) clamp(30px,4vh,48px);
}
.foot__brand img{width:min(100%,280px);height:auto;margin-bottom:12px}
.foot__tagline{
  font:300 15px/1.5 var(--body);color:var(--cream-dim);margin-bottom:16px;font-style:italic;
}
.foot__line{font-weight:300;font-size:14px;color:var(--cream-dim);max-width:34ch}
.foot__nav h2{
  font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass);margin-bottom:16px;
}
.foot__nav li + li{margin-top:10px}
.foot__nav a{font-size:15px;font-weight:300;color:var(--cream-dim);text-decoration:none;transition:color .22s var(--ease)}
.foot__nav a:hover{color:var(--cream);text-decoration:underline}
.foot__rail{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;
  padding-block:20px;border-top:1px solid var(--edge);
  font:400 13px/1.5 var(--label);letter-spacing:.03em;color:rgba(242,239,233,.58);
}
.foot__copy{grid-column:2;text-align:center}
/* пігулка «Демонстрація» переїхала в ЛІВУ колонку: праву з 21 жовтня 2026
   займає канал проєкту, а копірайт мусить лишитися по центру — тобто
   в колонці 2, між ними */
.foot__rail .foot__demo{grid-column:1;justify-self:start}
/* посилання на канал проєкту в правому куті (просьба заказчика 21 жовтня
   2026). Предмет той самий, що пігулка поруч: волосінь --edge, радіус 2px,
   капітель --label. Нового в системі немає — латунь на наведенні й зсув
   знака на 2px уже так поводяться кнопки (.btn:hover svg) */
.foot__tg{
  grid-column:3;justify-self:end;
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 13px;border:1px solid var(--edge);border-radius:2px;
  color:rgba(242,239,233,.62);text-decoration:none;
  font:400 12px/1 var(--label);letter-spacing:.06em;white-space:nowrap;
  transition:color .22s var(--ease),border-color .22s var(--ease),background-color .22s var(--ease);
}
.foot__tg svg{
  width:15px;height:15px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .26s var(--ease);
}
.foot__tg:hover{
  color:var(--brass);border-color:rgb(var(--brass-rgb) / .45);
  background:rgb(var(--brass-rgb) / .06);
}
.foot__tg:hover svg{transform:translateX(2px)}
.foot__demo{
  display:inline-flex;align-items:center;gap:11px;
  padding:7px 14px 7px 8px;cursor:pointer;border:1px solid var(--edge);border-radius:2px;background:none;
  color:rgba(242,239,233,.6);font:400 12px/1 var(--label);letter-spacing:.03em;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.foot__demo::before{
  content:"";width:34px;height:18px;flex:none;border-radius:2px;
  background:#0c0c0d;box-shadow:var(--sink);
}
.foot__demo::after{
  content:"";position:absolute;width:14px;height:22px;border-radius:2px;
  margin-left:3px;
  background:linear-gradient(180deg,var(--brass-light),var(--brass) 55%,var(--brass-deep));
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 3px 6px -2px #000,inset 0 1px 0 color-mix(in srgb,var(--brass-light) 60%,transparent);
  transform:translateX(0);
  transition:transform .28s var(--ease);
}
.foot__demo{position:relative}
.foot__demo:hover{color:var(--brass);border-color:rgb(var(--brass-rgb) / .4)}
.foot__demo[aria-pressed="true"]{color:var(--brass);border-color:rgb(var(--brass-rgb) / .5)}
.foot__demo[aria-pressed="true"]::after{transform:translateX(16px)}

main{position:relative;flex:1 0 auto}
/* шапка тепер висить над вмістом — якорі мають зупинятися нижче за неї */
main > section[id],#main{scroll-margin-top:calc(var(--rail-h) + 22px)}

/* ============================================================
   ФОТОГРАФІЇ УЧАСНИКІВ (фаза 7)
   ============================================================ */
/* Уся растрова графіка сайту виводиться через grayscale(1) invert(1) +
   mix-blend-mode:screen — обробка зроблена для чорнильних малюнків на
   світлому папері: інверсія робить папір чорним, а штрих світлим.
   ЖИВА ФОТОГРАФІЯ крізь неї стає негативом, і настройками це не
   лікується. Тому фото — форк правил, а не нова поверхня: геометрія
   (коло, обід, обріз, масштаб під курсором) лишається тією самою,
   знімаються рівно фільтр і змішування.
   Зерно .card__grain у фото теж немає: воно імітує папір малюнка. */
.ava__shot--photo,.member__photo--photo,.shot__img--photo{
  filter:none;mix-blend-mode:normal;opacity:1;background:none;overflow:hidden;
}
.ava__shot--photo img,.member__photo--photo img,.shot__img--photo img{
  display:block;width:100%;height:100%;object-fit:cover;
}

/* Портрет 18+ (просьба замовника 21 жовтня 2026). Та сама механіка, що
   в кадрів галереї: гніздо закрите непрозорою плашкою, відкриває його сам
   відвідувач, стан несе .is-open на .ava — другого джерела правди немає.
   Плашка кругла (гніздо кругле) і масштабується від --ava-size: та сама
   розмітка стоїть і в каталозі на 72px, і на візитці анкети на 200px. */
.ava__veil{
  position:absolute;inset:0;z-index:4;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:0;border:none;background:#141415;color:var(--cream-dim);cursor:pointer;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.ava__veil:hover{color:var(--cream);background:#1a1a1c}
.ava__veil svg{
  width:max(14px,calc(var(--ava-size,92px) * .2));height:max(14px,calc(var(--ava-size,92px) * .2));
  fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.ava__veil b{font:600 max(11px,calc(var(--ava-size,92px) * .17))/1 var(--display);color:var(--cream);font-variant-numeric:tabular-nums}
/* підпис влазить тільки у велике гніздо візитки — у рядку каталогу на
   його місці лишається саме «18+» */
.ava__veil span{display:none}
.prof__card .ava__veil span{display:block;font:400 11px/1 var(--label);letter-spacing:.17em;text-transform:uppercase}
.ava.is-open .ava__veil{display:none}
.ava__veil:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

/* Своє гніздо в кабінеті не ховають — але знати, що модератор позначив
   портрет, людина мусить: кутова мітка тим самим акцентом, що плашка
   18+ на плитці галереї */
.ava__mark{
  position:absolute;z-index:4;left:50%;bottom:-6px;transform:translateX(-50%);
  padding:4px 8px;border:1px solid var(--brass);background:var(--brass);
  color:var(--on-brass);font:500 11px/1 var(--label);letter-spacing:.12em;
}

/* Фото немає — і це не «поки що»: анкету заповнюють раніше, ніж знаходять
   портрет. Силует тією самою лінією, що іконки меню кабінету. */
.ava__shot--none,.member__photo--none{
  display:grid;place-items:center;
  filter:none;mix-blend-mode:normal;background:#0d0d0e;
}
.ava__shot--none svg,.member__photo--none svg{
  width:52%;height:52%;fill:none;stroke:rgba(242,239,233,.34);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.member__photo--none{border-radius:50%}
.member__photo--photo{display:block;border-radius:50%}

/* ФОТО ПОДІЙ (фаза 9) — та сама розвилка, що в портретів вище, і з тієї ж
   причини: у макеті тут лежали контактні аркуші чорнильних кадрів.
   Модификатори --photo знімають рівно фільтр і змішування; пропорція кадру,
   обріз, маска низу й масштаб під курсором лишаються макетними. */
.event__photo--photo,.feat__art--photo{
  filter:none;mix-blend-mode:normal;background:none;overflow:hidden;
}
.event__photo--photo img,.feat__art--photo img{
  display:block;width:100%;height:100%;object-fit:cover;
}
/* Непрозорість фону шапки лишається МАКЕТНОЮ (.3 з базового правила), і
   це не недогляд. Інверсія робила з білого паперу чорне тло, тож на
   екрані світилися самі штрихи; жива світлина — навпаки, середньотонова,
   і ті самі .3 дають рівно те, що задумано: тихе темне тло під текстом.
   Піднімати число не можна без заміру: поверх фото текст тримає лише
   віньєтка, а блюр у системі заборонений. */

/* Фото немає — силует тією самою лінією, що іконки меню кабінету. Порожній
   стан обовʼязковий: подію заводять раніше, ніж знаходять кадр. */
.event__photo--none{
  display:grid;place-items:center;
  filter:none;mix-blend-mode:normal;background:#0d0d0e;
}
.event__photo--none svg{
  width:34%;height:34%;max-width:64px;max-height:64px;fill:none;
  stroke:rgba(242,239,233,.3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
/* У шапки .feat порожнього стану немає: шар просто не малюється, а разом із
   ним гасне віньєтка — затемнювати в ній нічого, і темна пляма посеред
   панелі читалася б як недомальований блок. */
.feat--plain::after{display:none}

/* ============================================================
   КАБІНЕТ → ГАЛЕРЕЯ
   ============================================================ */
/* Сторінки в макеті немає, тож екран зібраний із затверджених частин:
   силует .acct__grid, панелі .pane, сітка .shots і кадр .shot із галереї
   публічного профілю. Нового тут дві речі, і обидві — варіації наявного:
   поле вибору файлів .drop (та сама утоплена тарілка, що .ctrl, тільки
   висока) і кнопки в кутах кадру. */
.drop{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:clamp(26px,3.4vw,38px) 20px;border:1px dashed var(--edge-bright);border-radius:2px;
  background:#0e0e0f;box-shadow:var(--sink);cursor:pointer;text-align:center;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
.drop:hover{border-color:rgb(var(--brass-rgb) / .5)}
.drop:focus-within{border-color:rgb(var(--brass-rgb) / .5);outline:2px solid var(--signal);outline-offset:3px}
.drop.is-busy{cursor:progress;border-style:solid}
/* input лишається в потоці, але невидимий: клік по всій тарілці відкриває
   вибір файлів сам, без JS */
.drop__input{position:absolute;inset:0;opacity:0;cursor:inherit}
.drop__icon{width:30px;height:30px;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drop__title{font:500 15px/1.2 var(--body);color:var(--cream)}
.drop__hint{font:300 13px/1.5 var(--body);color:var(--cream-dim);max-width:46ch}

.drop__bar{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.drop__track{height:4px;border-radius:2px;background:#0c0c0d;box-shadow:var(--sink);overflow:hidden}
.drop__fill{height:100%;background:linear-gradient(90deg,var(--brass-deep),var(--brass));transition:width .2s linear}
/* друга фаза — конверсії на сервері: відсотків у неї немає, тому смуга
   біжить. Та сама анімація, що в індикатора на сторінці оновлення */
.drop__fill--run{width:38%;animation:upd-run 1.3s var(--ease) infinite}

/* підписи під тарілкою і під сіткою кадрів — окремі абзаци, а не
   продовження блока вище: p{margin:0} у базі, тож без цього правила
   текст лип до тарілки й до останнього ряду плиток (рішення замовника
   21 жовтня 2026). Крок той самий, що між рядами в налаштуваннях
   (.acct--settings .pane > .field__hint + *) — іншого в кабінеті немає */
.drop ~ .field__hint,
.drop ~ .field__err,
.shots--edit + .field__hint{margin-top:clamp(18px,2.2vw,26px)}

/* --- одне фото в полі форми (подія: широке фото й кадр для списку) ---
   Та сама тарілка, тільки з прев'ю: кадр лягає на всю площину, а
   піктограма з підписом переїжджають у шар поверх нього. Поки фото
   немає, .drop--pic виглядає як звичайний .drop — шар просто стоїть по
   центру порожньої тарілки.

   Пропорція, а не висота: обидва кадри мають сенс лише у своїй
   пропорції (21:9 лягає під шапку сторінки події, 16:10 — у плитку
   каталогу, та сама .event__frame), і прев'ю мусить показувати саме те,
   що людина побачить на сайті. Галочка «прибрати» стоїть окремим рядком
   під тарілкою: вона сильніша за новий файл, тож їй не місце в самому
   шарі вибору. Зроблено 24 жовтня 2026 за просьбою замовника «фото
   завантажувати, як ми це стандартно робимо» — як аватар і обкладинка
   профілю на kinbaku-ukraine. */
.drop--pic{padding:0;justify-content:center;overflow:hidden}
.drop--wide{aspect-ratio:21/9}
.drop--card{aspect-ratio:16/10}
.drop__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Поки фото немає, <img> стоїть у розмітці порожнім — його наповнює
   main.js. Правило обов'язкове: браузерний [hidden] слабший за будь-який
   свій display, а в базі стоїть img,svg{display:block} — без цього рядка
   порожня тарілка показувала б значок «зламана картинка». Та сама
   грабля вже була в .search[hidden], .group__body[hidden] і
   .acct__form[hidden] */
.drop__img[hidden]{display:none}
.drop__over{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:20px;text-align:center;
  transition:opacity .22s var(--ease),background-color .22s var(--ease);
}
/* з прев'ю шар гаситься й виходить лише під курсором або з клавіатури:
   інакше він закривав би рівно те, що людина прийшла подивитися */
.drop--pic.has-pic{border-style:solid}
.drop--pic.has-pic .drop__over{position:absolute;inset:0;justify-content:center;opacity:0;background:rgb(0 0 0 / .62)}
.drop--pic.has-pic:hover .drop__over,
.drop--pic.has-pic:focus-within .drop__over{opacity:1}
/* підпис поля всередині .field уже має свій зазор 11px — довгий відступ
   від тарілки потрібен лише в галереї, де підписи стоять за межами
   .field. Правило мусить стояти ПІСЛЯ спільного: специфічність та сама */
.drop--pic ~ .field__hint,
.drop--pic ~ .field__err{margin-top:0}
.pic__kill{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font:300 13px/1.5 var(--body);color:var(--cream-dim);cursor:pointer;
  transition:color .2s var(--ease);
}
.pic__kill:hover{color:var(--cream)}

/* --- ряд дати в формі події -------------------------------------------
   Дати додаються по одній (просьба замовника 24 жовтня 2026): замість
   шести намальованих наперед рядів стоїть один ряд і кнопка «додати».
   Ряд обведений рамкою, бо полів у ньому три й без рамки на вузькому
   екрані не видно, де закінчується одна дата й починається друга.
   Хрестик у ряду єдиної дати ховає :only-child, а не JS: ряди —
   єдині діти своєї обгортки, тож другого джерела правди не треба. */
.dates{display:flex;flex-direction:column;gap:14px}
.dates__row{
  display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:clamp(14px,1.6vw,20px);
  align-items:end;padding:clamp(14px,1.6vw,18px);border:1px solid var(--edge);
}
.dates__kill{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--edge-bright);background:none;color:var(--cream-dim);
  font:400 15px/1 var(--body);cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.dates__kill:hover{color:var(--brass);border-color:rgb(var(--brass-rgb) / .6)}
.dates__row:only-child .dates__kill{display:none}
.dates__add{margin-top:2px}
/* кнопка ховається на межі DATES_LIMIT — і знову проти свого display:
   .btn стоїть inline-flex, тож самого [hidden] не досить */
.dates__add[hidden]{display:none}

/* --- поле дати й часу -------------------------------------------------
   Дві правки замовника 24 жовтня 2026, і обидві про рідний контрол
   Chrome: іконка календаря й годинника в полі ЧОРНА («мають бути білі
   або нашого фіолетового»), а календар відкривався ЛИШЕ з неї — клік у
   саме поле не робив нічого.

   Лікується без жодного JS. Рідний індикатор розтягується на все поле
   й гасне: клік у будь-яке місце поля приходить у нього, тобто відкриває
   календар, а видиму іконку малює свій <svg> поруч — акцентом, із
   stroke:currentColor, як усі іконки сайту. Набирати дату з клавіатури
   це не ламає: поле лишається сфокусованим, і цифри йдуть у його
   сегменти.

   Чому не showPicker() на click: той самий ефект ціною JS, а без JS
   поле лишилось би мертвим — рідну іконку ми вже сховали.

   @supports selector(…) обов'язковий: псевдоелемент є лише в Chrome і
   Safari. У Firefox рідний індикатор нікуди не дівається (і клік по
   полю там відкриває календар сам), тож свою іконку там малювати не
   можна — поле показувало б дві. */
.ctrl--when{padding-right:46px;cursor:pointer}
.ctrl--when::-webkit-calendar-picker-indicator{
  position:absolute;left:0;top:0;width:100%;height:100%;
  margin:0;padding:0;opacity:0;cursor:pointer;
}
/* стрілки й хрестик Chrome у полі зайві: значення або набирають, або
   вибирають у календарі */
.ctrl--when::-webkit-inner-spin-button,
.ctrl--when::-webkit-clear-button{display:none}
.ctrl__pick{
  position:absolute;right:15px;top:50%;translate:0 -50%;
  width:19px;height:19px;pointer-events:none;
  fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .22s var(--ease);
}
.ctrl-wrap:hover .ctrl__pick,
.ctrl-wrap:focus-within .ctrl__pick{stroke:var(--brass-light)}
@supports not selector(::-webkit-calendar-picker-indicator){
  .ctrl__pick{display:none}
  .ctrl--when{padding-right:16px}
}

@media (max-width:620px){
  /* дата на весь ряд: у половині колонки рідний календар браузера
     не вміщує сім стовпчиків і розпирає сторінку вбік */
  .dates__row{grid-template-columns:1fr 1fr}
  .dates__row > .field:first-child{grid-column:1/-1}
  .dates__act{grid-column:1/-1;justify-self:end}
}

/* --- Кабінет → Мої події: картка події -------------------------------
   Просьба замовника 24 жовтня 2026: показувати кадр для списку, поставити
   «Редагувати / Переглянути / Зняти» одну під одною праворуч і зібрати
   інформацію події «красивіше, у нашому стилі». До цього подія стояла
   панеллю .pane з назвою в заголовку й рядком факту через «·» — вигляд
   службового списку, а не події.

   Нової поверхні тут немає: це РЯДОК КАТАЛОГУ подій (.event--row) —
   кадр ліворуч із тегом спільноти, табличкою типу й акцентною датою,
   тіло праворуч. Третій стовпець у каталозі — «Детальніше», тут —
   стовпець кнопок. Усе всередині набрано тими самими класами
   (.event__frame, .event__place, .event__times, .event__text), тож
   правки каталогу приїжджають і сюди.

   Дві речі свідомо зняті: акцентний контур і масштаб кадру під курсором.
   У каталозі вони обіцяють клік по всій картці, а тут картка не
   клікабельна — клікають назву або кнопку. */
.event--mine{grid-template-columns:clamp(168px,17vw,214px) minmax(0,1fr) auto}
.event--mine:hover{border-color:var(--edge)}
.event--mine:hover .event__photo{transform:none}
.event--mine .event__body{gap:12px;padding:clamp(18px,2vw,24px) clamp(16px,1.8vw,22px)}
/* назва — свій клас, а не .event__link: той розтягує клікабельну площину
   на всю картку (::after, z-index 3) і накрив би стовпець кнопок */
.myev__name{font-size:1.18rem;line-height:1.3}
.myev__name a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
.myev__name a:hover{color:var(--brass-light)}
/* стан події. Опубліковану набираємо ТИХО, решту — акцентом: рядок у
   кабінеті читають не щоб помилуватися, а щоб побачити, де потрібна
   дія. Кружечок — та сама currentColor, що й текст */
.myev__state{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin:0;padding:6px 11px;border:1px solid var(--edge-bright);
  font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-soft);
}
.myev__state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.myev__state--wait{color:var(--brass);border-color:rgb(var(--brass-rgb) / .38)}
/* стовпець кнопок. Кнопки однакової ширини дає стовпчиковий flex сам
   (align-items:stretch), а формі «Зняти» потрібен свій display:flex —
   без нього кнопка в ній лишилася б по контенту */
.myev__acts{
  display:flex;flex-direction:column;gap:10px;align-self:center;
  padding:clamp(18px,2vw,24px) clamp(16px,1.8vw,22px);
  border-left:1px solid var(--edge);
}
.myev__acts form{margin:0;display:flex}
.myev__acts .btn{width:100%;justify-content:center}

/* сітка та сама, що в галереї профілю; кадр у кабінеті лише дістає кнопки */
.shots--edit{margin-top:18px}
.shot--edit{cursor:grab}
.shot--edit:active{cursor:grabbing}
/* заблокований модератором кадр лишається у власника, але приглушений:
   він має розуміти, чому кадру немає на публічній сторінці */
.shot--blocked .shot__img{opacity:.35}

/* хрестик і перемикач 18+ стоять у кутах поверх кадру. Підкладка щільна —
   на світлому знімку тонка іконка потонула б (та сама причина, що
   в стрілок перегляду .lb__step) */
.shot__kill,.shot__flag{
  position:absolute;z-index:4;padding:0;
  border:1px solid var(--edge-bright);background:rgb(14 14 15 / .88);
  color:var(--cream-soft);
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.shot__kill{top:6px;right:6px;display:grid;place-items:center;width:26px;height:26px;cursor:pointer}
.shot__kill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.shot__kill:hover{color:var(--cream);border-color:rgb(var(--brass-rgb) / .5)}
/* 18+ — підпис, а не кнопка: з 21 жовтня 2026 позначку ставить модератор,
   і на кадрі без неї її немає зовсім (рішення замовника) */
.shot__flag{
  left:6px;bottom:6px;padding:5px 8px;
  font:500 11px/1 var(--label);letter-spacing:.12em;
  color:var(--on-brass);background:var(--brass);border-color:var(--brass);
}
.shot__kill:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.shot__state{
  position:absolute;z-index:4;right:6px;bottom:6px;
  padding:4px 8px;background:rgb(14 14 15 / .88);border:1px solid var(--edge-bright);
  font:400 10px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);
}
.shot__state--off{color:var(--brass);border-color:rgb(var(--brass-rgb) / .45)}

/* перетягування: плитка, що їде, і ціль. Клон під пальцем лежить у body,
   тож його pointer-events обов'язково none — інакше elementFromPoint
   повертав би сам клон, і ціль не знаходилась би ніколи */
.shot.is-dragging{opacity:.4}
.shot.is-over{border-color:rgb(var(--brass-rgb) / .7)}
.shot-ghost{
  position:fixed;z-index:60;pointer-events:none;opacity:.85;
  border:1px solid rgb(var(--brass-rgb) / .5);background:#0d0d0e;
  box-shadow:0 20px 40px -20px #000;overflow:hidden;
}
.shot-ghost img{width:100%;height:100%;object-fit:cover}
body.is-tile-dragging{user-select:none}

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* Блок учасника звужується сходинками, і кожну сходинку задає арифметика
   колонки, а не смак. Підпис «Публічний профіль» просить 124.5px, і стільки
   колонка сітки дає лише від 1156px; текстовій колонці взагалі лишається
   «ширина колонки мінус 127» (аватар 41, зазор 10, дві іконки з зазорами 76),
   тобто на 1024px — 70px, а на 861px — взагалі нічого. Тому:
   ≤1155px зникає підпис (інакше він ліг би у два рядки і підняв шапку до
   84px проти токена 70), ≤1060px зникає і саме імʼя — від нього лишалося
   17px, тобто одна літера з трьома крапками. Нижче 1060px у шапці аватар
   (він веде в кабінет) і дві іконки; публічну сторінку відкривають звідти.
   Іконки не стискаються ніде й ніколи — це й була скарга замовника. */
@media (max-width:1155px){
  .member__role{display:none}
}
@media (max-width:1060px){
  .member__text{display:none}
}
@media (max-width:1060px){
  /* два поля в рядок — і тут зазор знову однаковий з обох боків: тіснота
     14px потрібна лише п'ятірці колонок на цільовій ширині */
  .console__row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2.4vw,34px)}
  /* сайдбар оголошень іде під список: вузькій колонці поруч із анкетами тісно */
  .roster__grid,.prof__grid{grid-template-columns:minmax(0,1fr)}
  .promo,.side{order:2}
  /* ... і відстань від результатів до «Найближчих подій» утричі більша
     за зазор колонок (просьба замовника 23 жовтня 2026). Збоку зазор
     ділить дві колонки, а тут — розділяє результати пошуку і чужий
     блок під ними, і 22px на телефоні читалися як продовження списку.
     Втричі — це рівно той самий вираз, помножений на 3 (на 390px було
     22px, стало 66px). Правило адресне, .roster__grid: профіль
     замовник не правив, і в ньому сайдбар лишається при колишньому
     зазорі */
  .roster__grid{row-gap:clamp(66px,7.8vw,102px)}
  /* панель «Коли і де» лишається над текстом, а не під ним: факти події
     важливіші за оголошення, які в результатах пошуку їдуть униз */
  .ev__grid,.doc__grid,.acct__grid{grid-template-columns:minmax(0,1fr)}
  .ev__side,.doc__side,.acct__side{position:static}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
}

@media (max-width:860px){
  /* ряд «ім'я / область / місто» повертається до спільної мірки анкети:
     на планшеті три стовпці лишили б від значень селекторів трикрапку */
  .acct__row--three{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
  /* Шапка лишається в один рядок, а меню їде в шухляду. Доти три пункти
     переносилися на другий рядок і піднімали шапку з 70px до 113px,
     а --rail-h лишався 70px — від нього рахуються відступи секцій, якорі
     й липкі сайдбари, тож заголовки сторінок молча ховалися під шапку. */
  .rail__inner{display:flex;align-items:center;gap:12px}
  .rail__brand{margin-right:auto}
  /* лого на мобільному в 1,5 раза більше (просьба замовника 23 жовтня 2026):
     109px було фактичною шириною на всьому діапазоні 621–860px, бо clamp
     тут уже впирався в свій мінімум */
  .rail__brand img{width:164px}
  .rail__burger{display:inline-flex;order:3}
  .rail__session{order:2}
  /* Вихід із шапки прибрано — він переїхав у шухляду (просьба замовника
     23 жовтня 2026). Гасимо обидва варіанти: форму POST /logout і
     посилання на головну, яким вихід стає на safe-сторінках. */
  .session__out,.session__act--out{display:none}
  /* Проміжки в ряду шапки мусять читатися однаковими (просьба замовника
     23 жовтня 2026): від аватара до конверта стільки само, скільки від
     конверта до бургера. Міряти треба ЧОРНИЛА, а не бокси. У бургера
     іконка 23px стоїть у кнопці 40px, і сам малюнок займає в ній лише
     15.33px (шлях іде від 4 до 20 з 24 одиниць viewBox) — тобто від краю
     кнопки до першої лінії 12.33px порожнечі; у конверта такого запасу
     3px. Звідси зазор блоку учасника = зазор .rail__inner + 12.33:
     12 + 12.33 ≈ 24px, і обидва проміжки стають 27.3px (третину пікселя
     округлення не видно).
     Правило адресне, .session--member: у гостя в тому самому рядку дві
     кнопки, що не стискаються, і зайвий зазор виносив би їх за екран
     на 320px. */
  .session--member{gap:24px}
  /* Шухляда виїжджає справа, на всю висоту екрана, поверх шапки (просьба
     замовника 23 жовтня 2026 — як у кабінеті kinbaku). position:fixed тут
     справді від вікна: .rail хоч і fixed сам, але containing block робить
     лише transform/filter, а їх у нього немає.
     Закритий стан ховаємо visibility, а не display: інакше не було б
     переходу transform, але пункти не мусять ловити фокус і читалку —
     звідси парні transition із затримкою visibility. */
  .rail__nav{
    display:flex;order:4;position:fixed;top:0;right:0;bottom:0;z-index:2;
    width:min(84vw,320px);
    flex-direction:column;align-items:stretch;gap:0;
    padding:calc(12px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));
    background:#141415;border-left:1px solid var(--edge);
    box-shadow:-44px 0 90px -50px rgba(0,0,0,.9);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(101%);visibility:hidden;
    transition:transform .36s var(--ease),visibility 0s .36s;
  }
  .rail__burger[aria-expanded="true"] ~ .rail__nav{
    transform:translateX(0);visibility:visible;
    transition:transform .36s var(--ease),visibility 0s 0s;
  }
  /* 14px згори й знизу дають рядок ~47px — палець влучає без прицілювання */
  .rail__nav a{padding:14px 2px;gap:12px;border-bottom:1px solid var(--edge)}
  /* саме :last-of-type, а не :last-child: останній у шухляді — підвал із
     виходом, і волосінь у нього своя (border-top у .rail__out). У гостя
     підвалу немає, і список просто закінчується без висячої лінії. */
  .rail__nav a:last-of-type{border-bottom:none}
  .rail__nav a svg{width:19px;height:19px}
  /* хрестик стоїть у своєму ряду над пунктами, праворуч — там, де під ним
     лишився бургер, тобто палець не переїжджає */
  .rail__nav-x{
    display:inline-flex;align-items:center;justify-content:center;
    align-self:flex-end;width:40px;height:40px;flex:none;margin-bottom:4px;
    padding:0;background:none;border:none;border-radius:2px;
    color:var(--brass);cursor:pointer;
  }
  .rail__nav-x svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  /* підвал шухляди: вихід показуємо лише учаснику — у гостя його немає,
     а кнопки «Увійти» й «Реєстрація» лишилися в самій шапці */
  .rail__nav-foot{margin-top:auto;padding-top:14px}
  body[data-session="member"] .rail__nav-foot{display:block}
  .rail__nav-foot form{margin:0}
  /* вихід виглядає пунктом меню: ті самі капітель, іконка і зазор, тільки
     без волосіні знизу — нижче нього нічого немає */
  .rail__out{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:14px 2px;background:none;border:none;border-top:1px solid var(--edge);
    font:500 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;
    color:var(--cream-soft);text-decoration:none;cursor:pointer;
    transition:color .25s var(--ease);
  }
  .rail__out:hover{color:var(--cream)}
  .rail__out svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
  .rail__out:hover svg{opacity:1;color:var(--brass)}
  /* затемнення тла: тап по ньому закриває шухляду (обробник на
     [data-menu-close] у main.js) */
  .rail__scrim{
    display:block;position:fixed;inset:0;z-index:1;
    background:rgb(10 10 11 / .62);
    opacity:0;visibility:hidden;
    transition:opacity .32s var(--ease),visibility 0s .32s;
  }
  .rail__burger[aria-expanded="true"] ~ .rail__scrim{
    opacity:1;visibility:visible;
    transition:opacity .32s var(--ease),visibility 0s 0s;
  }
  /* сторінку під відкритою шухлядою замикаємо. Браузер без :has() просто
     лишить її прокручуваною — шухляда від цього не ламається */
  html:has(.rail__burger[aria-expanded="true"]),
  html:has(.rail__burger[aria-expanded="true"]) body{overflow:hidden}
  /* Стрічка прапора на час шухляди зникає. Її z-index (40) вищий за .rail,
     а шухляда меню — нащадок .rail (z-index:30), тобто з його шару вилізти
     не може: інакше куток лежав би поверх затемнення й поверх меню
     кабінету. На ≤620px стрічки немає й так. */
  html:has(.rail__burger[aria-expanded="true"]) .flag,
  html:has(.acct__switch:checked) .flag{display:none}
  /* ─── Меню кабінету: шухляда з липкою вкладкою ───────────────
     Просьба замовника 23 жовтня 2026: на мобільному колонка меню зникає,
     а саме меню виїжджає злива по тапу на вкладці «Кабінет» — той самий
     предмет, що в кабінеті kinbaku. Керує чистий CSS: чекбокс плюс label.
     Колонка згортається в нуль (усе всередині — fixed), тому й grid-gap
     тут зайвий: інакше над вмістом висіла б дірка. */
  .acct__grid{gap:0}
  .acct__side{--acct-drawer-w:min(86vw,300px)}
  /* Ручка. Висота — по слову, але не менша за min-height, щоб вкладка
     лишалась помітною ціллю для пальця. Центрування через transform, а не
     margin-top: висота різна. z-index вищий за .rail (30) — шухляда лягає
     поверх шапки, інакше вкладка на її рівні була б під нею. */
  .acct__tab{
    position:fixed;top:50%;left:0;z-index:33;transform:translateY(-50%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:40px;min-height:142px;padding:16px 0;
    background:linear-gradient(90deg,rgb(var(--brass-rgb) / .2),#19191a 72%),#151516;
    border:1px solid var(--edge-bright);border-left:0;border-radius:0 6px 6px 0;
    box-shadow:12px 0 38px -20px rgba(0,0,0,.9),var(--lift);
    color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:left .36s var(--ease),background .22s var(--ease);
  }
  .acct__tab:active{background:linear-gradient(90deg,rgb(var(--brass-rgb) / .34),#19191a 72%),#151516}
  .acct__switch:focus-visible ~ .acct__tab{outline:2px solid var(--brass);outline-offset:2px}
  .acct__tab-text{
    writing-mode:vertical-rl;
    font:500 13px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;
    color:var(--cream);
  }
  /* Відкритий стан: вкладка їде разом із панеллю і стає хрестиком. Напис
     ховаємо через visibility, а хрестик кладемо поверх абсолютно — так
     вкладка не змінює розміру й не стрибає під пальцем. */
  .acct__tab-x{display:none;position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px}
  .acct__tab-x span{position:absolute;top:50%;left:0;width:18px;height:1.5px;background:var(--brass);border-radius:2px}
  .acct__tab-x span:first-child{transform:rotate(45deg)}
  .acct__tab-x span:last-child{transform:rotate(-45deg)}
  .acct__switch:checked ~ .acct__tab{left:var(--acct-drawer-w)}
  .acct__switch:checked ~ .acct__tab .acct__tab-text{visibility:hidden}
  .acct__switch:checked ~ .acct__tab .acct__tab-x{display:block}
  .acct__scrim{
    display:block;position:fixed;inset:0;z-index:31;
    background:rgb(10 10 11 / .62);
    opacity:0;visibility:hidden;
    transition:opacity .32s var(--ease),visibility 0s .32s;
  }
  .acct__switch:checked ~ .acct__scrim{
    opacity:1;visibility:visible;
    transition:opacity .32s var(--ease),visibility 0s 0s;
  }
  /* Сама шухляда. Прокрутка потрібна: шість пунктів із заголовком у
     лежачий екран не влазять, а сторінка під шухлядою замкнена. */
  .acct__nav{
    position:fixed;top:0;bottom:0;left:0;z-index:32;
    width:var(--acct-drawer-w);
    padding:calc(18px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
    background:#141415;border-right:1px solid var(--edge);
    box-shadow:44px 0 90px -50px rgba(0,0,0,.9);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(-101%);visibility:hidden;
    transition:transform .36s var(--ease),visibility 0s .36s;
  }
  .acct__switch:checked ~ .acct__nav{
    transform:translateX(0);visibility:visible;
    transition:transform .36s var(--ease),visibility 0s 0s;
  }
  /* у шухляді місця більше, ніж у колонці 232px, тому пункти ростуть під
     палець; іконки й лічильники лишаються — меню виглядає так само, як на
     десктопі, а не окремим мобільним варіантом */
  .acct__nav a{padding:13px 12px}
  .acct__nav li + li{margin-top:6px}
  /* сторінку під відкритою шухлядою замикаємо — так само, як під меню шапки */
  html:has(.acct__switch:checked),
  html:has(.acct__switch:checked) body{overflow:hidden}

  /* ─── Мобільна панель «Фільтри» ──────────────────────────────
     Просьба замовника 23 жовтня 2026: консоль пошуку в каталозі
     згортається в липку смугу під шапкою, тап розкриває всю форму вниз,
     а кнопка пошуку в розкритій формі липне до низу екрана.

     Смуга липка від .shell, а не від .hunt: згорнута .hunt заввишки
     нуль, і прилипати в ній було б ні до чого. z-index:3 кладе смугу над
     зоною малюнка (.hunt, z-index:2) і під шапку (.rail, z-index:30) —
     випадні списки селекторів усередині .hunt замкнені її isolation,
     тому під смугою вони й лишаються. */
  .hunt__bar{
    position:sticky;top:var(--rail-h);z-index:3;
    display:flex;align-items:center;gap:12px;
    /* удвічі менше за відступ під формою на 1440 (просьба замовника
       23 жовтня 2026: «уменьшить два эти отступа в два раза» — зверху
       й знизу від заголовка «Результати пошуку»). Вираз той самий,
       поділений навпіл: 6vh → 3vh, тобто 50.63 → 25.32px на 844 */
    margin-bottom:clamp(22px,3vh,38px);
    padding:14px 16px;
    /* дно суцільне (не --panel-sheer): під смугою проїжджає список анкет */
    background:#141415;border:1px solid var(--edge);box-shadow:var(--lift);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .hunt__switch:focus-visible ~ .hunt__bar{outline:2px solid var(--brass);outline-offset:2px}
  .hunt__bar-ico{width:18px;height:18px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .hunt__bar-text{font:500 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-soft)}
  /* пігулка числа — та сама, що лічильник групи вподобань: трекінг у ній
     погашено, інакше цифра стоїть ліворуч від центру кружка */
  .hunt__bar-count{
    min-width:19px;height:19px;padding:0 5px;flex:none;
    display:grid;place-items:center;border-radius:99px;
    background:var(--brass);color:var(--on-brass);
    font:500 12px/1 var(--label);letter-spacing:0;font-variant-numeric:tabular-nums;
  }
  .hunt__bar-arrow{
    width:15px;height:15px;flex:none;margin-inline-start:auto;
    fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .25s var(--ease);
  }
  .hunt__switch:checked ~ .hunt__bar{border-color:rgb(var(--brass-rgb) / .5);margin-bottom:0}
  /* та сама половина — під розкритою формою (там відступ тримає вже
     .hunt, а не смуга) і під заголовком результатів: замовник міряв
     відстань «фільтри → заголовок → результати», і обидві її половини
     мусять зменшитися однаково */
  .roster .shell > .hunt{margin-bottom:clamp(22px,3vh,38px)}
  .roster .page__head{margin-bottom:clamp(20px,3vh,38px)}
  .hunt__switch:checked ~ .hunt__bar .hunt__bar-arrow{transform:rotate(180deg)}
  /* розкрита форма приклеєна до смуги знизу: свого верхнього контуру в неї
     тоді немає, інакше дві волосіні злилися б у лінію 2px */
  .hunt__switch:checked ~ .hunt .console{border-top:0}
  /* Згорнута консоль — display:none, а не висота з переходом: у формі
     живуть випадні списки селекторів і панелі вподобань, вони абсолютні,
     а overflow, потрібний анімації висоти, зрізав би їх. Той самий вибір,
     що в .group__body[hidden]. */
  .hunt__switch:not(:checked) ~ .hunt{display:none}
  /* Кнопка пошуку липне до низу екрана, поки форма розкрита: форму гортають,
     і повертатися по ній до кнопки не треба. Поля знизу в консолі немає —
     його місце зайняв підвал кнопки, тому він і бліді на всю ширину
     від'ємними полями. z-index нижчий за випадні списки (12): панель
     вподобань мусить лягати ПОВЕРХ кнопки, а не під неї.
     Правило адресне — ТІЛЬКИ консоль усередині .hunt (повідомлення
     замовника 23 жовтня 2026). Доти воно знімало поле знизу в кожної
     консолі, а їх на сайті п'ять видів: ворота входу й реєстрації,
     скидання пароля, картка «тільки для зареєстрованих» у каталогах і
     сторінки помилок. Липкого підвалу кнопки в них немає, тож поле
     нічим не замінювалося — на телефоні остання кнопка форми впиралася
     в край напівпрозорої консолі. */
  .hunt .console{padding-bottom:0}
  /* Липне СЛОТ КНОПКИ, а не весь підвал (просьба замовника 27 жовтня
     2026): галочка «Зараз онлайн» не має їхати разом із кнопкою, її
     місце — просто внизу форми пошуку. Тому підвал тут звичайний блок,
     а вся липка машинерія (від'ємні поля на ширину консолі, підкладка,
     лінія згори) переїхала на слот усередині нього. */
  /* display:contents, а не block: липкий слот нижче мусить рахуватися
     від САМОЇ КОНСОЛІ, інакше його межею стає підвал (а він заввишки
     з галочку плюс кнопку) — кнопка перестає підніматися до низу екрана
     й просто їде зі сторінкою. Підвал тут більше нічого не розкладає,
     тож зникнути з розкладки йому не шкода; відбивку згори бере на себе
     галочка. */
  .console__foot{display:contents}
  .jack--live{margin:clamp(16px,1.8vw,24px) 0 14px}
  .console__cta-slot{
    position:sticky;bottom:0;z-index:3;
    /* бліде рівно на поле консолі, і воно тут не 22px: clamp(22px,3vw,40px)
       на 860 дає 25.8px, тож число мусить лишитися тим самим виразом */
    margin-inline:calc(-1 * clamp(22px,3vw,40px));
    padding:14px clamp(22px,3vw,40px) calc(14px + env(safe-area-inset-bottom));
    background:#141415;border-top:1px solid var(--edge);
  }
  .console__foot .btn{width:100%}
  .console__cta--wide{display:none}
  .console__cta--slim{display:inline}

  .hero__inner h1{font-size:clamp(2rem,8.6vw,2.9rem);max-width:none}
  /* три місяці в ряд стають тісними: переходимо на два, третій іде під ними
     й бере горизонтальну волосінь замість вертикальної */
  .cals__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .cal + .cal{padding-left:20px}
  .cal:nth-child(3){border-left:none;padding-left:0;border-top:1px solid var(--edge);padding-top:20px}
  /* блок привітань складається в одну колонку: нижче 860 на половину
     сторінки лишається менш як 230px під портрет 84px і балон, і репліка
     починає ламатися по складах. Порядок при цьому зберігається —
     спершу чоловіки, під ними решта */
  .greets__grid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,38px)}
}

@media (max-width:620px){
  /* шапка тут нижча (менші поля й кнопки) — токен іде за нею, бо від нього
     рахуються відступи секцій, scroll-margin якорів і липкі сайдбари */
  :root{--rail-h:64px}
  /* слова хмари тут дрібніші: при 13px довгі («Бондаж (обмеження рухливості)»)
     не влазять у 390px і зрізаються краєм екрана */
  .cloud__item{font:500 11px/1 var(--label);letter-spacing:.1em}
  body{font-size:16px}
  .rail__inner{padding:11px var(--gutter);gap:10px}
  /* те саме збільшення в 1,5 раза, що й вище: було 87px */
  .rail__brand img{width:131px}
  .flag{display:none!important}
  .rail__nav a{font-size:11px}
  .session{gap:8px}
  .btn{padding:11px 14px;font-size:11px;letter-spacing:.1em}
  .session--guest .btn--quiet{padding:11px 14px}
  /* те саме, що вище: зазор .rail__inner тут 10px, отже 10 + 12.33 ≈ 22px,
     і обидва проміжки стають 25.3px */
  .session--member{gap:22px}
  .console{padding:20px 16px}
  /* поле знизу віддане липкому підвалу кнопки (див. 860px), і лише в
     формі пошуку — решта консолей тримає всі чотири поля */
  .hunt .console{padding-bottom:0}
  .console__cta-slot{margin-inline:-16px;padding-inline:16px}
  .console__row{grid-template-columns:minmax(0,1fr)}
  /* .cards--few тут обовʼязково разом із базовим класом: модифікатор
     вище має специфічність у два класи й інакше лишив би на телефоні
     колонку 248px замість картки на всю ширину, як затверджено */
  .cards,.cards--few{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .events__list{grid-template-columns:minmax(0,1fr)}
  /* смуга пейджинації з шести клавіш по 48px не влазить у 320px — звужуємо,
     щоб не з'явився горизонтальний скрол */
  /* лічильник «Знайдено: 10 анкет» і дата редакції текстової сторінки не
     влазять у рядок із заголовком: переносимо їх на свій рядок і прибираємо
     волосінь — тільки там, щоб заголовки секцій на головній лишились як були */
  .roster .page__head,.evs .page__head,.doc .page__head,.acct .page__head{flex-wrap:wrap;row-gap:6px}
  .roster .page__head::after,.evs .page__head::after,.doc .page__head::after,.acct .page__head::after{display:none}
  .found{order:0}
  .rost .ava{--ava-size:72px}
  .rost{padding:16px}
  /* картка привітання на телефоні: портрет менший, балон тісніший, а
     лапка їде ближче до краю разом із полем під неї */
  .greet{padding:16px;gap:14px}
  .greet .ava{--ava-size:68px}
  .greet__quote{padding:13px 14px 14px 36px;font-size:15px}
  .greet__quote::before{left:11px;top:11px;font-size:32px}
  /* аватар і число фото стають по ВЕРХНЬОМУ краю картки (просьба замовника
     23 жовтня 2026): рядок на телефоні високий — ім'я з містом переноситься,
     репліка займає два рядки, під ними теги, — і портрет по центру висоти
     відривався від імені. Правило адресне, .roster: той самий .rost служить
     рядком діалогу в кабінеті, а список діалогів замовник не правив */
  .roster .rost{align-items:start}
  .rost__go{display:none}
  .pager__key{min-width:40px;height:42px}
  /* візитка профілю складається в колонку */
  .prof__card{grid-template-columns:minmax(0,1fr);grid-template-areas:"ava" "id" "facts" "goal" "likes" "seek" "support" "gifts";gap:18px}
  /* портрет і число знімків стоять ПО ЦЕНТРУ колонки (просьба замовника
     25 жовтня 2026). У макеті тут було align-items:flex-start — портрет
     тиснувся до лівого краю, а кнопки під ним ідуть на всю ширину
     (align-self:stretch), і аватар випадав з ряду. Правила немає зовсім:
     центрування вже стоїть у базовому .prof__ava, і будь-який override
     тут його тільки ламав би — тому назад flex-start не повертати */
  .prof__card .ava{--ava-size:150px}
  /* клітки фактів стають одна під одною — волосінь між ними ні до чого */
  .facts{gap:16px}
  .facts__cell{padding-inline:0;border-left:none}
  .facts__cell--stance{flex-basis:100%}
  .shots{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  /* сторінка подій: місяці стають один під одним, а текст головної події
     йде на всю ширину — малюнок під ним гасимо непрозорістю */
  .cals__row{grid-template-columns:minmax(0,1fr);gap:22px}
  .cal + .cal,.cal:nth-child(3){border-left:none;padding-left:0;border-top:1px solid var(--edge);padding-top:20px}
  /* на телефоні балон дня стоїть НА РЯДКУ ТИЖНЯ, а не на дні: місяць тут
     займає всю ширину сторінки, клітинка — 45px, і балон 280px при
     будь-якому зсуві вилазив би то за правий край (скрол), то за лівий
     (обрізався б). Прив'язка до рядка робить його шириною в місяць (рядок
     таблиці завширшки з таблицю) — ширше, ніж на десктопі, і вийти за
     сторінку він не може взагалі.
     Рядок, а не .cal: прив'язаний до місяця балон ставав над УСІМ
     календарем місяця — на 390px це 148–196px над датою, по якій тапнули
     (просьба замовника 24 жовтня 2026 — балон має стояти біля дати).
     Тепер вертикаль рахується від самого тижня, і балон завжди ПІД ним:
     під календарем є куди рости, а над ним балон накрив би назву місяця
     й пішов під липку шапку.
     :nth-child(n) у селекторах — не окраса: без нього специфічність нижча
     за стовпцеві зсуви й правило перших двох тижнів вище, і ні left/right,
     ні top/bottom не перебилися б.
     І головне: position треба знести з ОБГОРТКИ дня. Балон тримає
     найближчий позиціонований предок, а .cal__cell сам position:relative —
     одного position на рядку мало, балон і далі стоїть на дні, стає
     32px шириною, а список подій вилазить з нього й дає сторінці
     78px горизонтального скролу (зміряно на 390px) */
  .cal__tab tbody tr{position:relative}
  .cal__cell{position:static}
  .cal__tab td:nth-child(n) .cal__tip{left:0;right:0;width:auto;max-width:none}
  .cal__tab tbody tr:nth-child(n) .cal__tip{top:calc(100% + 10px);bottom:auto}
  .cal__tab tbody tr:nth-child(n) .cal__tip::after{
    top:-6px;bottom:auto;
    border-right:0;border-bottom:0;
    border-left:1px solid var(--edge);border-top:1px solid var(--edge);
  }
  .cal__tab tbody tr:nth-child(n) .cal__tip::before{top:-10px;bottom:auto}
  /* балон не влазить під тижнем (дата біля нижнього краю екрана) —
     main.js вішає клас на обгортку дня, і балон стає НАД тиждень,
     хвостик дивиться вниз. Селектор довгий заради ваги: правила вище
     мають ту саму специфічність, вирішує порядок */
  .cal__tab tbody tr .cal__cell--up .cal__tip{top:auto;bottom:calc(100% + 10px)}
  .cal__tab tbody tr .cal__cell--up .cal__tip::after{
    top:auto;bottom:-6px;
    border-left:0;border-top:0;
    border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);
  }
  .cal__tab tbody tr .cal__cell--up .cal__tip::before{top:auto;bottom:-10px}
  .cal__tab td:nth-child(1) .cal__tip::after{left:calc(7.143% - 5.5px);right:auto}
  .cal__tab td:nth-child(2) .cal__tip::after{left:calc(21.43% - 5.5px);right:auto}
  .cal__tab td:nth-child(3) .cal__tip::after{left:calc(35.71% - 5.5px);right:auto}
  .cal__tab td:nth-child(4) .cal__tip::after{left:calc(50% - 5.5px);right:auto}
  .cal__tab td:nth-child(5) .cal__tip::after{left:calc(64.29% - 5.5px);right:auto}
  .cal__tab td:nth-child(6) .cal__tip::after{left:calc(78.57% - 5.5px);right:auto}
  .cal__tab td:nth-child(7) .cal__tip::after{left:calc(92.86% - 5.5px);right:auto}
  /* кабінет: аватар і його кнопки стають одне під одним. Поруч колонка кнопок
     звужується до 141px, і «Завантажити фото» (144px, nowrap) зрізався на 3px */
  .face{flex-direction:column;align-items:flex-start;gap:18px}
  .face__act{width:100%}
  /* перемикач спільнот іде в стовпчик: у трьох колонках по 114px підпис
     «Кінкі & BDSM спільноти» ставав у три рядки */
  .scopes{grid-template-columns:minmax(0,1fr)}
  .scopes__opt + .scopes__opt{border-left:none;border-top:1px solid var(--edge)}
  /* рядок списку складається: кадр згори, тіло під ним, «Детальніше» останнім */
  .event--row{grid-template-columns:minmax(0,1fr)}
  .event--row .event__frame{aspect-ratio:16/10;border-right:none;border-bottom:1px solid var(--edge)}
  .event--row .event__more{align-self:flex-start;padding:0 18px 16px}
  /* у картці кабінету складається й стовпець кнопок: він стає нижнім
     поясом картки, кнопки лишаються одна під одною й на всю ширину */
  .myev__acts{align-self:stretch;border-left:none;border-top:1px solid var(--edge)}
  /* нижній ряд підвалу складається в стовпчик: три колонки на 320px
     лишили б від копірайта по слову в рядок, а пігулка каналу (nowrap)
     вилізла б за екран горизонтальним скролом */
  .foot__rail{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px;text-align:center}
  .foot__copy,.foot__tg,.foot__rail .foot__demo{grid-column:1;justify-self:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ============================================================
   ПОП-АП 18+
   ============================================================ */
/* Що бачить людина, яка прийшла на сайт уперше (просьба замовника
   24 жовтня 2026). Своєї поверхні не вводить зовсім: лого над панеллю —
   те саме, що на сторінці оновлення, панель — звичайна .console, плашка
   «18+» — та сама латунна мітка, що стоїть на позначеному портреті
   (.ava__mark), світло внизу — той самий компонент, що в херо й на
   воротах (дописаний у .hero__glow). Своє тут лише одне — підкладка.

   Підкладка ЩІЛЬНА (.965) і не розмита: блюру в системі немає взагалі
   (кадр 18+ в анкеті теж закритий непрозорою плашкою). Крізь 3.5%
   проступає сцена сторінки — досить, щоб людина бачила, куди потрапила,
   і замало, щоб роздивитись самі знімки.

   Чому flex, а не place-items:center, як у воріт: поп-ап прокручується
   сам (на 320px у ландшафті панель вища за екран), а центрування
   гріткою в такому разі зрізає ВЕРХ панелі — заголовок разом із
   плашкою. margin:auto на внутрішній колонці центрує так само, але
   при переповненні чесно віддає прокрутку.

   Блок зветься .agegate, а не .age, хоч поп-ап і про вік: клас .age вже
   зайнятий ПОЛЕМ «вік» у консолі пошуку (два числа й тире, рядок 1099).
   24 жовтня 2026 поп-ап приїхав під іменем .age й поклав на кожну
   сторінку з консоллю — головну й обидва каталоги — свої
   position:fixed;inset:0;z-index:70 разом із щільною підкладкою: пара
   полів віку розтягувалась на весь екран поверх сайта, а сама сторінка
   виглядала згашеною. Ламалось ТІЛЬКИ там, де є консоль, і тільки після
   відповіді на поп-ап (до відповіді поп-ап стоїть зверху і все сходиться),
   тож на самому поп-апі це не видно взагалі. */
.agegate{
  position:fixed;inset:0;z-index:70;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(24px,5vh,64px) var(--gutter);
  overflow-y:auto;overscroll-behavior:contain;
  background:rgb(12 12 13 / .965);
}
/* світло не їде з прокруткою поп-апа: воно належить екрану, а не колонці */
.agegate__glow{position:fixed}

.agegate__inner{
  position:relative;z-index:2;margin-block:auto;
  width:100%;max-width:468px;
  display:flex;flex-direction:column;align-items:center;
}
.agegate__logo{width:min(100%,228px);height:auto;margin-bottom:clamp(18px,3vh,28px);opacity:.7}

/* панель НЕПРОЗОРА, на відміну від консолі воріт. Причина та сама, що
   в кнопки .btn--quiet: вона висить над хмарою херо, і крізь напівпрозору
   --panel-sheer читався б заголовок першого екрана — просто крізь текст
   поп-апа. Підкладка поп-апа слабша за панель навмисно: сцена сайта має
   проступати ПОРУЧ із нею, а не під її словами */
.agegate__card{display:flex;flex-direction:column;width:100%;text-align:center;background:var(--panel)}
/* плашка «18+» — та сама латунь, що мітка на портреті (.ava__mark),
   тільки більша: тут вона знак усього екрана, а не кут кадру */
.agegate__seal{
  align-self:center;padding:6px 13px;
  border:1px solid var(--brass);background:var(--brass);
  color:var(--on-brass);font:500 13px/1 var(--label);letter-spacing:.14em;
}
.agegate__title{
  margin-top:clamp(14px,2vw,18px);
  font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.12;letter-spacing:-.018em;font-weight:600;
}
.agegate__lead{
  margin-top:12px;font-size:15px;font-weight:300;line-height:1.5;
  color:var(--cream-soft);text-wrap:pretty;
}
.agegate__yes{width:100%;margin-top:clamp(18px,2.4vw,26px)}
/* «Ні» тихіше за «Так» і без плашки: це вихід із сайту, а не друга
   рівноцінна дія. Під курсором світлішає до кремового, а не до латуні —
   акцент на виході був би дивним запрошенням */
.agegate__no{
  align-self:center;margin-top:12px;padding:8px 12px;
  font:500 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-dim);text-decoration:none;transition:color .22s var(--ease);
}
.agegate__no:hover{color:var(--cream)}
.agegate__note{
  margin-top:clamp(14px,2vw,18px);
  font-size:13px;font-weight:300;line-height:1.5;
  color:var(--cream-dim);text-wrap:pretty;
}
.agegate__note a{color:var(--cream-soft)}
.agegate__note a:hover{color:var(--brass)}

/* сторінка під поп-апом не прокручується. Атрибут ставить сервер — той
   самий, що вирішує, чи малювати сам поп-ап, тож другого джерела правди
   немає. html потрібен разом із body: на iOS прокрутку тягне саме він */
body[data-age-gate]{overflow:hidden}
html:has(body[data-age-gate]){overflow:hidden}

@media (max-width:620px){
  /* 14px — нижня межа тексту на мобільному, нижче не опускаємось */
  .agegate__note{font-size:14px}
  .agegate__no{font-size:14px;letter-spacing:.08em}
  .agegate__lead{font-size:15px}
  .agegate__logo{width:min(100%,200px)}
}

/* Низький екран — це телефон у ландшафті (390px заввишки). Поп-ап і там
   прокручується, але головна дія мусить бути видна БЕЗ прокрутки, інакше
   людина бачить питання й не бачить відповіді. Тому прибираємо найменш
   потрібне: лого (сайт упізнається й без нього — він за підкладкою) і
   половину повітря всередині панелі. Міряємо висотою, а не шириною:
   те саме стається на низькому вікні десктопа. */
@media (max-height:560px){
  .agegate{padding-block:18px}
  .agegate__logo{display:none}
  .agegate__card{padding:20px 22px}
  .agegate__title{margin-top:12px;font-size:1.3rem}
  .agegate__lead{margin-top:10px;font-size:14px}
  .agegate__yes{margin-top:16px}
  .agegate__note{margin-top:12px}
}