/* agenda — территория онбординга. Синтез №4 Sense + №7 Talkie + №6 Family,
   тихая редакция: самое крупное на каждом экране — вопрос, а не имя.

   №4 даёт среду: размытые градиенты, ни одной рамки, экран начинается с вопроса.
   №7 даёт уверенность: один герой и имя, набранное как знак, а не как заголовок.
   №6 даёт существ: они самостоятельные объекты, а не иллюстрации к тексту.

   Правило гаммы: вся громкость уходит в размер, а не в цвет. Единственный
   насыщенный цвет во всей территории — терракота существ. */

/* Шрифты: пара A, выбранная Ни. Literata там, где мысль; IBM Plex Sans там,
   где механика; IBM Plex Mono там, где числа и время. Знак agenda остаётся
   Golos — марка не обязана быть набрана текстовой гарнитурой, и это ровно тот
   знак, который Ни видела во всех трёх парах.

   Все пути внутрь корня прототипа. Наружу (../) — нельзя: на живом адресе
   такой шрифт не приедет, а браузер тихо подставит системный, и подмена
   будет незаметна локально. */
@import url("assets/fonts/literata.css");
@import url("assets/fonts/plexsans.css");
@import url("assets/fonts/plexmono.css");
@import url("assets/fonts/golos.css");

:root {
  /* Настоящих начертаний ровно столько: Literata 400/600, Plex Sans 400/600,
     Plex Mono 400/500, Golos 400/500/600. Любой другой вес браузер подделает
     наклоном или утолщением — в прототипе таких просить нельзя. */
  --serif: "Literata", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --ink:      #1d1a17;
  --ink-2:    #6f6660;
  --ink-3:    #a3998f;
  --paper:    #fbf7f3;
  --accent:   #e2553c;

  /* три настроения плиток: люди / роль / компания */
  --rose-a:   #f9cdb4;
  --rose-b:   #f0bcc4;
  --sage-a:   #d5e2d2;
  --sage-b:   #eae4d3;
  --lilac-a:  #ded4ec;
  --lilac-b:  #e9dfe0;

  --pad:      80px;
}

* { box-sizing: border-box; }

/* <i> здесь — не курсив, а фигура: пятно света в среде, точка на полосе,
   стрелка в кнопке. Курсива в паре A нет ни у гротеска, ни у моноширинного,
   и браузер нарисовал бы поддельный наклон — что он и делал с подписью
   «вы здесь», стоявшей внутри точки маршрута. */
i { font-style: normal; }

html { background: var(--paper); scroll-behavior: smooth; }

body {
  margin: 0;
  width: 1440px;
  font: 400 17px/1.58 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ——— среда: комната со светом. Ни одной рамки, всё размыто ——— */

.env { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.env i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); }

/* зерно поверх среды — чтобы градиент не выглядел пластиковым */
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='.32'/></svg>");
  mix-blend-mode: multiply;
}

.page { position: relative; z-index: 2; padding: 44px var(--pad) 96px; }

/* ——— служебная строка сверху: тихая, без линий ——— */

/* служебная строка — механика и время: моноширинный, «квадратный» */
.top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
  font-size: 13px; color: var(--ink-3); letter-spacing: .01em;
  margin-bottom: 40px;
}
.top b { color: var(--ink-2); font-weight: 500; }

/* ——— типографика ———
   Антиква для мысли, гротеск для механики, моноширинный для чисел и времени.
   Кегли пересчитаны под Literata: очко у неё почти как у прежнего гротеска
   (x 52 против 53 на сотне), но прописные выше на 3% и строка шире на 2% —
   поэтому крупное уходит на 3–6px вниз, а не переносится один в один.
   Моноширинный шире гротеска на 16% — мелкое уменьшено ещё сильнее. */

.wordmark {
  /* 600 — самое жирное настоящее начертание Golos. Раньше здесь стояло 900,
     которого в файлах нет: браузер утолщал 600 сам. Разница на глаз почти
     нулевая, подделка — нет. */
  font-family: "Golos Text", sans-serif;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .82;
  margin: 0;
  color: var(--ink);
}

.ask {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0;
}

.lede {
  font-size: 21px; line-height: 1.5; color: var(--ink-2);
  max-width: 620px; margin: 20px 0 0;
}
.lede b { color: var(--ink); font-weight: 600; }

h3, h4 { font-family: var(--serif); font-weight: 400; }
h3 { font-size: 22px; letter-spacing: -.005em; line-height: 1.26; margin: 0 0 10px; }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
b  { font-weight: 600; }

.tag {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}

/* ——— плитка: размытый градиент, ни одной рамки ——— */

.tile {
  position: relative; overflow: hidden;
  border-radius: 34px;
  padding: 30px 32px 32px;
  background: #f4eee7;
  isolation: isolate;
}
.tile::before {
  content: ""; position: absolute; inset: -30%;
  filter: blur(46px);
  z-index: -1;
}
/* Живопись поверх градиента: подложки из локального генератора. Он годится
   ровно на это — на бессюжетное цветовое поле. Всё, что имеет форму и смысл,
   нарисовано вектором. */
.tile::after {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center;
  mix-blend-mode: soft-light; opacity: .55;
  z-index: -1; pointer-events: none;
}
.t-rose::after  { background-image: url("gen/field-rose.png"); }
.t-sage::after  { background-image: url("gen/field-sage.png"); }
.t-lilac::after { background-image: url("gen/field-lilac.png"); }
.t-plain::after { background-image: url("gen/field-warm.png"); }

.tile > * { position: relative; }

.t-rose::before {
  background:
    radial-gradient(46% 54% at 18% 24%, var(--rose-a) 0%, transparent 70%),
    radial-gradient(50% 58% at 82% 16%, var(--rose-b) 0%, transparent 72%),
    radial-gradient(60% 62% at 62% 96%, #fbe6d6 0%, transparent 70%),
    #f7ece3;
}
.t-sage::before {
  background:
    radial-gradient(48% 56% at 22% 20%, var(--sage-a) 0%, transparent 70%),
    radial-gradient(52% 58% at 86% 30%, var(--sage-b) 0%, transparent 72%),
    radial-gradient(58% 60% at 50% 98%, #f1efe2 0%, transparent 70%),
    #f0f0e6;
}
.t-lilac::before {
  background:
    radial-gradient(46% 54% at 20% 26%, var(--lilac-a) 0%, transparent 70%),
    radial-gradient(54% 58% at 84% 18%, var(--lilac-b) 0%, transparent 72%),
    radial-gradient(58% 62% at 58% 96%, #efe7ef 0%, transparent 70%),
    #eee8ee;
}
.t-plain::before {
  background:
    radial-gradient(60% 70% at 12% 30%, #f7ece1 0%, transparent 72%),
    radial-gradient(60% 70% at 88% 70%, #efe9ef 0%, transparent 72%),
    #f5f0ea;
}

/* ——— существа ——— */

.cr { display: block; }
.cr-96  { width: 96px;  height: 96px; }
.cr-120 { width: 120px; height: 120px; }
.cr-140 { width: 140px; height: 140px; }

/* ——— мелочи ——— */

.note {
  font-size: 15px; line-height: 1.47; color: var(--ink-2);
}
.note em { font-style: normal; color: var(--ink-3); }

.foot {
  display: flex; justify-content: space-between;
  margin-top: 64px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .01em; color: var(--ink-3);
}

/* ═══════════════ прототип: то, чего не было в макетах ═══════════════
   Правило то же — ни одной рамки. Кликабельность показывается движением
   и светом, а не обводкой. */

a { color: inherit; }

/* ——— переход между экранами: три слова в служебной строке ——— */

/* имя студии в служебной строке: знак 17px, тише вопроса на любом экране */
.brand {
  font-family: "Golos Text", sans-serif;
  font-weight: 600; letter-spacing: -.04em; font-size: 19px;
  color: var(--ink); text-decoration: none; line-height: 1;
}
.topleft { display: flex; align-items: baseline; gap: 26px; }

.nav { display: flex; gap: 24px; align-items: baseline; }
.nav a {
  text-decoration: none; color: var(--ink-3);
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 0;
  padding-bottom: 3px;
  transition: color .18s ease;
}
.nav a:hover { color: var(--ink); }
.nav a.here { color: var(--ink); font-weight: 500; }
.nav a.here::after {
  content: ""; display: block; height: 3px; margin-top: 5px;
  border-radius: 3px; background: var(--accent); opacity: .85;
}

/* ——— «здесь будет»: честная пометка вместо мёртвой кнопки ——— */

.soon { cursor: help; }
.soon::after {
  content: "здесь будет";
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 3px 9px 4px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 500; line-height: 1;
  color: var(--ink-3); background: rgba(255,255,255,.62);
  border-radius: 100px;
  white-space: nowrap;
}
.soon:hover::after { color: var(--accent); }

/* всплывающая записка о том, чего ещё нет */
.willbe {
  position: fixed; z-index: 40;
  max-width: 300px; padding: 14px 18px;
  border-radius: 20px; background: rgba(255,255,255,.94);
  box-shadow: 0 18px 40px rgba(60,44,32,.16);
  font-size: 15px; line-height: 1.4; color: var(--ink-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.willbe.on { opacity: 1; transform: translateY(0); }
.willbe b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* ——— общий вид всего, что нажимается ——— */

.hit { cursor: pointer; transition: transform .2s ease, box-shadow .25s ease; }
.hit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(80,58,42,.10); }

/* плитка, на которую только что привёл ответ на вопрос */
@keyframes lit {
  0%   { box-shadow: 0 0 0 0 rgba(226,85,60,.30); }
  35%  { box-shadow: 0 0 0 12px rgba(226,85,60,.13); }
  100% { box-shadow: 0 0 0 0 rgba(226,85,60,0); }
}
.lit { animation: lit 1.5s ease-out 1; }