/* Компоненты: всё, что повторилось дважды. Класс с модификаторами (`.btn`, `.btn--accent`), описание – docs/design-system.md → Компоненты.
   Появляются по ходу сборки; ничего не заводится «на будущее». */

/* Закладка: картонный разделитель над листом. Низ уходит под лист на --tab-tuck, на hover вытягивается (приём tab-pull).
   Цветная подложка – декоративный ::before: трапеция через perspective + наклон, сама ссылка не трансформируется */
.tab {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--tab-pad-y) var(--tab-pad-x) calc(var(--tab-pad-y) + var(--tab-tuck));
  margin-block-end: calc(var(--tab-tuck) * -1);
  color: var(--color-ink);
  white-space: nowrap;
  transition: translate var(--dur-300) var(--ease-out);
}
.tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tab-bg);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  transform-origin: 50% 100%;
  transform: perspective(var(--tab-persp)) rotateX(var(--tab-tilt)) rotate(var(--tab-rot));
}
.tab:hover,
.tab:focus-visible { translate: 0 calc(var(--tab-pull) * -1); }
.tab:focus-visible { outline: var(--focus-w) solid var(--tab-bg); outline-offset: var(--space-4); }
.tab--lime    { --tab-bg: var(--color-lime);    --tab-rot: var(--tab-rot-lime); }
.tab--magenta { --tab-bg: var(--color-magenta); --tab-rot: var(--tab-rot-magenta); }
.tab--blue    { --tab-bg: var(--color-blue);    --tab-rot: var(--tab-rot-blue); }

.tab__icon {
  flex: none;
  width: var(--tab-icon);
  height: var(--tab-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Обведённое от руки слово: овал – декоративный SVG поверх подписи */
.tab__circled { position: relative; }
.tab__circled svg {
  position: absolute;
  inset: calc(var(--circle-pad-y) * -1) calc(var(--circle-pad-x) * -1);
  width: calc(100% + var(--circle-pad-x) * 2);
  max-width: none;
  height: calc(100% + var(--circle-pad-y) * 2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Дудл: маркерный рисунок, вырезанный из референса. Только декор – абсолютные координаты в правилах секции,
   ширина = натуральный размер файла × --doodle-px (на мобильных дудлы мельче) */
.doodle {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.doodle--asterisk      { width: calc(94 * var(--doodle-px)); }
.doodle--plus          { width: calc(38 * var(--doodle-px)); }
.doodle--ticks-white   { width: calc(80 * var(--doodle-px)); }
.doodle--star          { width: calc(64 * var(--doodle-px)); }
.doodle--sparkle       { width: calc(60 * var(--doodle-px)); }
.doodle--scribble      { width: calc(275 * var(--doodle-px)); }
.doodle--arrow         { width: calc(174 * var(--doodle-px)); }
.doodle--ticks-magenta { width: calc(72 * var(--doodle-px)); }
.doodle--ticks-lime    { width: calc(56 * var(--doodle-px)); }

/* Постер: бумажный лист проекта на скотче – скриншот сверху, подпись на поле. Наклон --tilt задаёт секция (наклон стикера),
   скотч – декоративный ::before поверх верхнего края. Модификатор цвета красит скотч и маркер типа */
.poster {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--poster-pad) var(--poster-pad) var(--space-24);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-paper);
  rotate: var(--tilt, 0deg);
}
.poster::before {
  content: '';
  position: absolute;
  top: calc(var(--tape-h) * -0.5);
  left: calc(50% - var(--tape-w) / 2);
  width: var(--tape-w);
  height: var(--tape-h);
  background: var(--tape-bg);
  opacity: var(--tape-alpha);
  rotate: var(--tape-tilt);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--tape-notch)) 50%, 100% 100%, 0 100%, var(--tape-notch) 50%);
}
.poster--lime    { --tape-bg: var(--color-lime);    --mark: var(--color-lime); }
.poster--magenta { --tape-bg: var(--color-magenta); --mark: var(--color-magenta); }
.poster--blue    { --tape-bg: var(--color-blue);    --mark: var(--color-blue); }

.poster__caption { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding-inline: var(--space-8); }
.poster__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-8) var(--space-16); align-self: stretch; }
/* Тип сайта – текстовыделителем в цвет скотча */
.poster__mark { padding-inline: var(--mark-pad); background: var(--mark); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Скриншот проекта – окно 16 : 10 */
.shot { display: grid; place-items: center; aspect-ratio: 16 / 10; }
/* Настоящий скриншот: картинка во всё окно 16 : 10, кадр прижат к левому верхнему углу (логотип и первый экран сайта) */
.shot--image { display: block; overflow: hidden; }
.shot--image img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* Внешняя ссылка: подчёркивание цветом --mark, на hover разливается в текстовыделитель (приём mark-link) */
.link-out {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: underline;
  text-decoration-color: var(--mark, currentColor);
  text-decoration-thickness: var(--underline-w);
  text-underline-offset: var(--underline-offset);
  text-decoration-skip-ink: none;
  transition: text-decoration-thickness var(--dur-300) var(--ease-out), text-underline-offset var(--dur-300) var(--ease-out);
}
.link-out:hover,
.link-out:focus-visible { text-decoration-thickness: var(--underline-w-hover); text-underline-offset: var(--underline-offset-hover); }
/* Длинный адрес (почта, поддомен) – две части-span: на десктопе одной строкой без зазора, на ≤ 500 вторая часть переносится;
   стрелка – внутри второй части, чтобы не переносилась одна */
.link-out--split { gap: 0; }
.link-out--split > span { white-space: nowrap; }
.link-out--split > span:nth-child(2) { display: flex; align-items: center; gap: var(--space-8); }
/* Сноска: звёздочка от руки цветом текста (currentColor) – на корешке чернилами, на листе цвет задаёт секция.
   В строке – маленькая и приподнята, как надстрочный знак */
.footnote-mark { display: inline-block; flex: none; width: var(--footnote-mark); height: var(--footnote-mark); margin-inline-start: var(--footnote-lift); vertical-align: top; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.link-out svg { flex: none; width: var(--link-icon); height: var(--link-icon); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Колажный стикер: наклейка с белой высечкой (assets/img/stickers). Только декор – координаты в правилах секции,
   ширина = токен стикера × --sticker-k (на мобильных мельче) */
.sticker {
  position: absolute;
  width: calc(var(--sticker-w) * var(--sticker-k));
  height: auto;
  pointer-events: none;
  user-select: none;
}
.sticker--globe  { --sticker-w: var(--sticker-globe); }
.sticker--bubble { --sticker-w: var(--sticker-bubble); }
.sticker--bang   { --sticker-w: var(--sticker-bang); }
.sticker--burst  { --sticker-w: var(--sticker-burst); }

/* Билет услуги: сверху бумага (что входит), снизу за перфорацией – корешок в цвет закладки (цена и кнопка).
   Полукруглые вырезы – маска из двух половин; наклон --tilt задаёт секция. На hover корешок надрывается (приём ticket-tear) */
.ticket { display: flex; flex-direction: column; color: var(--color-ink); rotate: var(--tilt, 0deg); filter: drop-shadow(var(--shadow-paper)); }
.ticket--lime    { --stub: var(--color-lime); }
.ticket--magenta { --stub: var(--color-magenta); }
.ticket--blue    { --stub: var(--color-blue); }
.ticket__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-24);
  background: var(--color-paper);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  mask:
    radial-gradient(circle at 0 100%, transparent var(--notch), black calc(var(--notch) + var(--mask-aa))) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--notch), black calc(var(--notch) + var(--mask-aa))) right / 51% 100% no-repeat;
}
.ticket__stub {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--stub);
  border-block-start: var(--perf-w) dashed var(--color-ink-soft);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  mask:
    radial-gradient(circle at 0 0, transparent var(--notch), black calc(var(--notch) + var(--mask-aa))) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--notch), black calc(var(--notch) + var(--mask-aa))) right / 51% 100% no-repeat;
  transform-origin: 0 0;
  transition: rotate var(--dur-300) var(--ease-out);
}
.ticket:hover .ticket__stub,
.ticket:focus-within .ticket__stub { rotate: var(--tear); }
.ticket__points { display: flex; flex-direction: column; gap: var(--space-4); padding-block-start: var(--space-8); }
.ticket__points li { display: flex; gap: var(--space-8); }
.ticket__points li::before { content: '+'; font-weight: var(--fw-text); }

/* Кнопка: чернильная плашка, подпись слева, стрелка справа; на hover стрелка сдвигается (приём arrow-nudge) */
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-s);
}
.btn svg { flex: none; width: var(--btn-icon); height: var(--btn-icon); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate var(--dur-300) var(--ease-out); }
.btn:hover svg,
.btn:focus-visible svg { translate: var(--space-8) 0; }
.btn:focus-visible { outline: var(--perf-w) solid var(--color-ink); outline-offset: var(--space-4); }
/* На тёмном листе чернильная плашка пропадает: там кнопка – лаймовая (главная) или контурная мелом (вторая) */
.btn--lime { background: var(--color-lime); color: var(--color-ink); }
.btn--ghost { background: transparent; color: var(--color-fg); box-shadow: inset 0 0 0 var(--btn-line) var(--color-fg); }
.btn--lime:focus-visible,
.btn--ghost:focus-visible { outline-color: var(--color-fg); }
/* Стрелка вниз – ведёт к секции ниже, сдвигается вниз */
.btn--down:hover svg,
.btn--down:focus-visible svg { translate: 0 var(--space-4); }

/* Наклейка инструмента: цветная плашка с логотипом, в углу – растровая точка, как у заглушек скриншотов в projects (центр под логотип чистый);
   белая высечка по контуру – четыре тени по альфе, плюс тень бумаги.
   Наклон --tilt задаёт секция. Логотипы Webflow, Framer, Squarespace – Simple Icons (CC0), см. assets/img/SOURCES.md */
.tool {
  display: grid;
  place-items: center;
  width: var(--tool-size);
  aspect-ratio: 1;
  border-radius: var(--tool-radius);
  background: url('../assets/img/stickers/halftone-tool.webp') center / cover no-repeat, var(--tool-bg);
  color: var(--color-ink);
  filter: drop-shadow(var(--sticker-cut) 0 0 var(--color-paper)) drop-shadow(calc(var(--sticker-cut) * -1) 0 0 var(--color-paper))
    drop-shadow(0 var(--sticker-cut) 0 var(--color-paper)) drop-shadow(0 calc(var(--sticker-cut) * -1) 0 var(--color-paper))
    drop-shadow(var(--shadow-paper));
  rotate: var(--tilt, 0deg);
}
.tool svg { width: var(--tool-icon); height: var(--tool-icon); fill: currentColor; }
/* Круглая наклейка: четыре тени по осям дают вокруг круга скруглённый квадрат – высечка здесь кольцом box-shadow, оно повторяет радиус */
.tool--round {
  border-radius: 50%;
  box-shadow: 0 0 0 var(--sticker-cut) var(--color-paper);
  filter: drop-shadow(var(--shadow-paper));
}
.tool--lime    { --tool-bg: var(--color-lime); }
.tool--magenta { --tool-bg: var(--color-magenta); }
.tool--blue    { --tool-bg: var(--color-blue); }
.tool--paper   { --tool-bg: var(--color-paper); }
.tool--code svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Глава: секция-страница блокнота за закладкой. Заголовок с той же колонки, что H1 в hero; высота экрана,
   чтобы переход по закладке ставил главу к верху окна, пока в ней нет контента */
.chapter { position: relative; min-height: var(--section-min-h); }
/* Заголовок главы на скотче: полоска шириной по тексту, края рваные. Сама полоска – ::before (прозрачность и раскатка
   не трогают текст), тень – drop-shadow по форме полоски. Цвет --tape задаёт секция (закладка или бумага), наклон – --tilt.
   Раскатка: --tape-p 0 → 1 (приём tape), без движения – 1 */
.chapter__title {
  grid-column: 2 / span 8;
  justify-self: start;
  position: relative;
  isolation: isolate;
  padding: var(--space-12) var(--space-48) var(--space-12) var(--space-32);
  color: var(--color-ink);
  filter: drop-shadow(var(--shadow-tape));
  rotate: var(--tilt, var(--title-tape-tilt-1));
}
.chapter__title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tape, var(--color-paper));
  opacity: var(--title-tape-alpha);
  clip-path: polygon(0 4%, 2% 18%, 0 33%, 1.6% 50%, 0 66%, 2% 82%, 0 96%, 100% 100%, 98% 84%, 100% 68%, 98.2% 50%, 100% 34%, 98% 18%, 100% 2%);
  transform-origin: 0 50%;
  scale: var(--tape-p, 1) 1;
}

@media (prefers-reduced-motion: reduce) {
  .tab, .link-out, .ticket__stub, .btn svg { transition: none; }
}

@media (max-width: 768px) {
  .chapter__title { grid-column: 1 / -1; padding-inline: var(--space-16) var(--space-32); }
}

@media (max-width: 500px) {
  .tab__icon--burst { display: none; }
  .link-out--split { flex-wrap: wrap; }
}