/* Секции: по одному блоку на секцию, в порядке карты из docs/design-system.md. Блок начинается с комментария «NN id».
   Мобильные правила – в конце блока секции: @media (max-width: 768px) и (max-width: 500px). */

/* 00 шапка и лист: полоса закладок на чёрном столе, под ней лист блокнота в клетку со спиралью слева.
   Лист идёт до правого края экрана; закладки уходят под его верхний край (лист выше по z) */
.tabs-bar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--space-8);
  height: var(--tabs-h);
  padding-inline: var(--space-24);
}
.tabs { display: flex; align-items: flex-end; gap: var(--space-8); }
.tabs-bar__tick { align-self: center; width: calc(54 * var(--doodle-px)); }

.sheet {
  position: relative;
  z-index: var(--z-content);
  flex: 1;
  padding-inline-start: var(--binding-w);
  background:
    url('../assets/img/spiral.webp') 0 0 / var(--binding-w) auto repeat-y,
    url('../assets/img/paper.webp') var(--binding-w) 0 / var(--paper-size) repeat,
    var(--color-bg-sheet);
}

@media (max-width: 768px) {
  .tabs-bar { padding-inline: var(--space-16); }
}
@media (max-width: 500px) {
  .tabs-bar { justify-content: center; padding-inline: var(--space-8); }
  .tabs { gap: var(--space-4); }
  .tabs-bar__tick { display: none; }
}

/* Главная: вход на страницы по аудиториям. Пока черновик – имя и ссылки на том же листе, по центру экрана; дизайн позже */
.home { min-height: 100dvh; display: flex; align-items: center; }
.home__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); }
.home__links { display: flex; flex-wrap: wrap; gap: var(--space-16); }

/* 01 hero: один громкий момент – строка печатается, «crime» зачёркивается маркером, допечатывается «development».
   Дудлы – по координатам референса в процентах листа; стрелка справа указывает на строку */
.hero {
  position: relative;
  min-height: var(--hero-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}
.hero__title { grid-column: 2 / span 10; }
/* Под заголовком: слева подзаголовок и две кнопки, справа – наклейки инструментов вразнобой, всегда два ряда по две (правый столбец ниже) */
.hero__body { grid-column: 2 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); margin-block-start: var(--space-48); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.hero__tools { grid-column: 8 / span 4; align-self: center; display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-items: start; gap: var(--space-16) var(--space-32); margin-block-start: var(--space-24); }
.hero__tools .tool:nth-child(1) { --tilt: var(--tilt-tool-1); }
.hero__tools .tool:nth-child(2) { --tilt: var(--tilt-tool-2); margin-block-start: var(--space-32); }
.hero__tools .tool:nth-child(3) { --tilt: var(--tilt-tool-3); }
.hero__tools .tool:nth-child(4) { --tilt: var(--tilt-tool-4); margin-block-start: var(--space-32); }
.hero__title del,
.hero__title ins { text-decoration: none; }
.hero__title del { position: relative; display: inline-block; }
.hero__title ins { color: var(--color-lime); }
.hero__strike {
  position: absolute;
  inset-inline: calc(var(--strike-over) * -1);
  top: 55%;
  width: calc(100% + var(--strike-over) * 2);
  max-width: none;
  height: var(--strike-h);
  translate: 0 -50%;
  overflow: visible;
  fill: none;
  stroke: var(--color-magenta);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero .doodle--asterisk      { top: 4%;  left: 0; }
.hero .doodle--plus          { top: 3%;  left: 12%; }
.hero .doodle--ticks-white   { top: 18%; left: 14%; }
.hero .doodle--star          { top: 50%; left: 3%; }
.hero .doodle--sparkle       { top: 76%; left: 0; }
.hero .doodle--scribble      { bottom: 0; left: 0; }
.hero .doodle--arrow         { top: 21%; right: 0; }
.hero .doodle--ticks-magenta { top: 42%; right: 1%; }
.hero .doodle--ticks-lime    { top: 86%; left: 82%; }

@media (max-width: 768px) {
  .hero__title { grid-column: 1 / -1; }
  .hero__body { grid-column: 1 / -1; margin-block-start: var(--space-32); }
  .hero__tools { grid-column: 1 / -1; justify-content: start; }
  .hero .doodle--ticks-magenta { top: 8%; right: 26%; }
  .hero .doodle--star { top: 68%; left: 72%; }
  .hero .doodle--sparkle { top: 80%; left: 66%; }
}
@media (max-width: 500px) {
  .hero .doodle--plus          { left: 30%; }
  .hero .doodle--ticks-white   { display: none; }
  .hero .doodle--arrow         { top: 1%; }
  .hero .doodle--ticks-magenta { top: 2%; right: 34%; }
  .hero .doodle--ticks-lime    { top: 95%; left: 72%; }
}

/* 02 projects: стена из постеров на скотче (концепт B). Две колонки, правая сдвинута вниз – листы висят вразнобой.
   Порядок в разметке = порядок проектов: левая колонка – первая половина, правая – вторая. На каждом постере один колажный стикер */
.projects__wall {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-48);
  margin-block-start: var(--space-64);
}
.projects__col { display: flex; flex-direction: column; gap: var(--space-96); }
.projects__col + .projects__col { padding-block-start: var(--poster-col-offset); }
.projects__col:first-child .poster:nth-child(odd)  { --tilt: var(--tilt-poster-1); }
.projects__col:first-child .poster:nth-child(even) { --tilt: var(--tilt-poster-3); }
.projects__col:last-child .poster:nth-child(odd)   { --tilt: var(--tilt-poster-2); }
.projects__col:last-child .poster:nth-child(even)  { --tilt: var(--tilt-poster-4); }

.projects .sticker--globe  { top: calc(var(--sticker-out) * -1.4); left: calc(var(--sticker-out) * -1.2); }
.projects .sticker--burst  { top: calc(var(--sticker-out) * -1.6); right: calc(var(--sticker-out) * -1.4); }
.projects .sticker--bubble { top: calc(var(--sticker-out) * -1.6); left: calc(var(--sticker-out) * -1.4); rotate: var(--tilt-poster-1); }
.projects .sticker--bang   { top: 38%; right: calc(var(--sticker-out) * -1); rotate: var(--tilt-poster-2); }

@media (max-width: 768px) {
  .projects__wall { grid-template-columns: 1fr; row-gap: var(--space-64); margin-block-start: var(--space-48); }
  .projects__col { gap: var(--space-64); }
  .projects__col + .projects__col { padding-block-start: 0; }
  .projects .sticker--globe { left: calc(var(--sticker-out) * -0.3); }
  .projects .sticker--burst { right: calc(var(--sticker-out) * -0.3); }
  .projects .sticker--bang  { right: var(--space-8); }
}

/* 03 benefits: чек-лист с пометками (концепт D). Пункт – квадрат от руки с лаймовой галочкой, крупная строка display-m,
   одно ключевое слово помечено маркером в цвет закладок (обведено, подчёркнуто волной, линии движения, выделено), справа – наклейка-предмет.
   Пометки и наклейки – декор (абсолютные позиции и наклоны). Движение – приём checklist (docs/motion.md) */
.benefits__list { grid-column: 2 / span 10; display: flex; flex-direction: column; gap: var(--space-64); margin-block-start: var(--space-64); }
.benefits__item { display: grid; grid-template-columns: var(--check-size) minmax(0, 1fr) var(--benefit-sticker-col); column-gap: var(--space-24); align-items: start; }
.benefits__body { display: flex; flex-direction: column; gap: var(--space-12); }
.benefits__body p { max-width: var(--benefit-measure); }
.benefits__sticker { justify-self: center; width: calc(var(--sticker-w) * var(--benefit-sticker-k)); height: auto; rotate: var(--tilt); }
.benefits__item:nth-child(1) { --sticker-w: var(--benefit-ruler); --tilt: var(--tilt-benefit-1); }
.benefits__item:nth-child(2) { --sticker-w: var(--benefit-cursor); --tilt: var(--tilt-benefit-2); }
.benefits__item:nth-child(3) { --sticker-w: var(--benefit-bubble); --tilt: var(--tilt-benefit-3); }
.benefits__item:nth-child(4) { --sticker-w: var(--benefit-bolt);   --tilt: var(--tilt-benefit-4); }

.checkbox { flex: none; width: var(--check-size); height: var(--check-size); overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.checkbox__box { stroke: var(--color-fg); stroke-width: var(--check-line); }
.checkbox__tick { stroke: var(--color-lime); stroke-width: var(--tick-line); }

.ann { position: relative; white-space: nowrap; }
.ann svg { position: absolute; max-width: none; overflow: visible; fill: none; stroke-width: var(--mark-line); stroke-linecap: round; stroke-linejoin: round; }
.ann--circle svg {
  inset: calc(var(--ann-circle-y) * -1) calc(var(--ann-circle-x) * -1);
  width: calc(100% + var(--ann-circle-x) * 2);
  height: calc(100% + var(--ann-circle-y) * 2);
  stroke: var(--color-lime);
}
.ann--wave svg { left: 0; bottom: calc(var(--ann-wave-y) * -1); width: 100%; height: var(--ann-wave-h); stroke: var(--color-magenta); }
.ann--speed { margin-inline-end: var(--ann-speed-room); }
.ann--speed svg { left: calc(100% + var(--ann-speed-gap)); top: var(--ann-speed-gap); width: var(--ann-speed-w); height: var(--ann-speed-h); stroke: var(--color-blue); }
/* Выделенное слово – чернилами по лайму: мела на акценте не бывает */
.ann--mark { padding-inline: var(--mark-pad); background: linear-gradient(var(--color-lime), var(--color-lime)) left / 100% 100% no-repeat; color: var(--color-ink); }

@media (max-width: 768px) {
  .benefits__list { grid-column: 1 / -1; gap: var(--space-48); margin-block-start: var(--space-48); }
  .benefits__item { grid-template-columns: var(--check-size) minmax(0, 1fr); column-gap: var(--space-12); row-gap: var(--space-12); }
  .benefits__body { grid-column: 2; grid-row: 1; }
  /* Наклейка – под текстом справа (не подтягивается к последней строке: длина строки разная, задевала бы текст) */
  .benefits__sticker { grid-column: 2; grid-row: 2; justify-self: end; margin-inline-end: var(--space-8); }
}

/* 04 about: оборот почтовой открытки (концепт G, идея клиента). Слева картинка – портрет на лаймовой растровой точке;
   справа через черту – марки клиента внахлёст (подписи в alt), текст на пунктирных строках, подпись «Cheers, Daria».
   Строки: пунктир над первой строкой и под каждой, интерлиньяж = шаг пунктира – текст по центру строки.
   Марки не шире трети оборота, чтобы ряд влезал на любой ширине */
.postcard {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--space-48);
  padding: var(--pc-pad);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-paper);
  rotate: var(--pc-tilt);
}
.postcard__picture {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-inline-end: var(--pc-pad);
  background: url('../assets/img/stickers/shot-lime.webp') center / cover;
  overflow: hidden;
}
.postcard__picture img { width: var(--pc-photo-w); height: auto; margin-block-end: calc(var(--space-12) * -1); }
.postcard__back {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-inline-start: var(--pc-pad);
  border-inline-start: 1px solid var(--color-pc-divider);
}
.postcard__stamps { align-self: stretch; display: flex; justify-content: flex-end; }
.postcard__stamp {
  flex: none;
  width: min(var(--pc-stamp-w), calc((100% + var(--pc-stamp-overlap) * 2) / 3));
  rotate: var(--tilt);
  filter: drop-shadow(var(--shadow-stamp));
}
.postcard__stamp + .postcard__stamp { margin-inline-start: calc(var(--pc-stamp-overlap) * -1); }
.postcard__stamp img { width: 100%; height: auto; }
.postcard__stamp:nth-child(1) { --tilt: var(--tilt-pc-stamp-1); }
.postcard__stamp:nth-child(2) { --tilt: var(--tilt-pc-stamp-2); }
.postcard__stamp:nth-child(3) { --tilt: var(--tilt-pc-stamp-3); }
/* Бейдж «Coding since 2018»: звезда-маджента с белым кантом внутри, текст – HTML поверх SVG.
   Наклеен на правый нижний угол портрета: та же ячейка сетки, что у картинки, прижат к углу и чуть выходит за него (декор) */
.postcard__badge {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  width: var(--pc-badge-w);
  margin-inline-end: calc(var(--pc-pad) - var(--pc-badge-w) * 0.15);
  margin-block-end: calc(var(--pc-badge-w) * -0.15);
  filter: drop-shadow(var(--shadow-stamp));
}
.burst { display: grid; place-items: center; aspect-ratio: 1; color: var(--color-ink); rotate: var(--tilt-pc-badge); }
.burst > * { grid-area: 1 / 1; }
.burst__shape { width: 100%; height: 100%; }
.burst__fill { fill: var(--color-magenta); }
.burst__ring { fill: none; stroke: var(--color-paper); stroke-width: 3; stroke-linejoin: round; }
.burst__body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: var(--fw-text); line-height: 1.05; }
.burst__icon { width: var(--burst-icon); height: auto; fill: var(--color-ink); overflow: visible; }
.burst__icon .burst__code { fill: none; stroke: var(--color-magenta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.burst__year { line-height: 1.1; }
.postcard__message {
  display: flex;
  flex-direction: column;
  padding-block-start: 1px;
  background: radial-gradient(circle, var(--color-pc-dot) var(--pc-dot-r), transparent var(--pc-dot-fade)) 0 0 / var(--pc-dot-step) var(--pc-dot-row) repeat-x;
}
.postcard__message p {
  line-height: var(--pc-rule);
  background: radial-gradient(circle at 50% calc(100% - 1px), var(--color-pc-dot) var(--pc-dot-r), transparent var(--pc-dot-fade)) 0 0 / var(--pc-dot-step) var(--pc-rule) repeat;
}
.postcard__sign { align-self: flex-end; rotate: var(--tilt-pc-sign); }
/* Акцентного текста на светлом нет – имя чернилами, маджента только росчерком */
.postcard__sign span { text-decoration: underline wavy var(--color-magenta); text-decoration-thickness: var(--pc-sign-line); text-underline-offset: var(--pc-sign-offset); }

@media (max-width: 768px) {
  .postcard { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-24); }
  .postcard__picture { aspect-ratio: 4 / 3; margin-inline-end: 0; }
  /* Оборот стекается: текст во всю ширину, внизу подпись и марка рядом – марка в правом нижнем углу */
  .postcard__back { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-12); padding-inline-start: 0; border-inline-start: 0; }
  .postcard__message { grid-column: 1 / -1; grid-row: 1; }
  .postcard__sign { grid-column: 1; grid-row: 2; justify-self: start; }
  .postcard__stamps { grid-column: 2; grid-row: 2; justify-content: flex-end; }
  .postcard__stamps .postcard__stamp { width: var(--pc-stamp-w); }
  .postcard__badge { margin-inline-end: calc(var(--space-8) * -1); }
}

/* 05 help: три билета услуг в ряд – услуги три, колонка на каждую; наклоны разные, как билеты, брошенные на лист */
.help__tickets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-32);
  margin-block-start: var(--space-64);
}
.help__tickets .ticket:nth-child(1) { --tilt: var(--tilt-ticket-1); }
.help__tickets .ticket:nth-child(2) { --tilt: var(--tilt-ticket-2); }
.help__tickets .ticket:nth-child(3) { --tilt: var(--tilt-ticket-3); }
/* В ряд – тело и корешок билета строками общей сетки (subgrid): перфорация на одной высоте у всех трёх, кнопка прижата к низу корешка;
   длинные подписи кнопок переносятся ровно, без одного слова в строке */
.help__tickets { grid-template-rows: auto auto; }
.help__tickets .ticket { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
.help__tickets .btn { margin-block-start: auto; text-wrap: balance; }
/* Цена одной строкой: звёздочка-сноска не отрывается от суммы */
.help__tickets .ticket__stub > p { white-space: nowrap; }
/* Примечание под билетами: как считается цена – на 8 колонок, с начала ряда билетов */
.help__note { grid-column: 1 / span 8; display: flex; align-items: flex-start; gap: var(--space-12); margin-block-start: var(--space-48); text-wrap: pretty; }
/* Звёздочка примечания – лаймом слева, верх у верха строки: чуть выше середины первой строки */
.help__note .footnote-mark { width: var(--footnote-mark-note); height: var(--footnote-mark-note); margin-inline-start: 0; color: var(--color-lime); }

@media (max-width: 768px) {
  .help__tickets { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--space-48); margin-block-start: var(--space-48); }
  .help__tickets .ticket { display: flex; grid-row: auto; }
  .help__note { grid-column: 1 / -1; margin-block-start: var(--space-32); }
}

/* Скотч заголовков: у секций с закладкой – её цвет, у остальных – бумага; наклон чередуется по порядку глав */
.projects .chapter__title { --tape: var(--color-lime); }
.help .chapter__title     { --tape: var(--color-magenta); }
.contacts .chapter__title { --tape: var(--color-blue); }
.benefits .chapter__title,
.help .chapter__title     { --tilt: var(--title-tape-tilt-2); }

/* Дудлы глав (projects, benefits, about, help, contacts): на полях листа за пределами контейнера – на 1440 поля около 200 px, контент не задевают;
   у заголовка – рядом, как пометка. Рисунки те же, что в hero, но повёрнуты и расставлены иначе.
   ≤ 768 полей нет – остаётся по одному дудлу у заголовка (doodle--m) */
.projects .doodle--asterisk      { top: 5%;  left: 3%;  rotate: var(--doodle-turn-1); }
.projects .doodle--plus          { top: 4%;  left: 46%; }
.projects .doodle--ticks-magenta { top: 24%; right: 4%; rotate: var(--doodle-turn-2); }
.projects .doodle--star          { top: 54%; left: 4%;  rotate: var(--doodle-turn-2); }
.projects .doodle--sparkle       { top: 82%; right: 6%; }
.benefits .doodle--asterisk      { top: 6%;  right: 6%; rotate: var(--doodle-turn-2); }
.benefits .doodle--sparkle       { bottom: 12%; left: 4%; }
.about .doodle--asterisk         { top: 6%;  right: 4%; rotate: var(--doodle-turn-2); }
.about .doodle--sparkle          { bottom: 8%; left: 4%; }
.help .doodle--ticks-lime        { top: 9%;  left: 56%; rotate: var(--doodle-turn-4); }
.help .doodle--ticks-white       { top: 30%; left: 5%;  rotate: var(--doodle-turn-3); }
.help .doodle--star              { top: 50%; right: 5%; rotate: var(--doodle-turn-1); }
.help .doodle--sparkle           { top: 78%; left: 4%; }
.contacts .doodle--asterisk      { top: 8%;  right: 6%; rotate: var(--doodle-turn-2); }
.contacts .doodle--ticks-magenta { top: 9%;  left: 70%; scale: -1 1; }
.contacts .doodle--sparkle       { bottom: 16%; left: 4%; }
.contacts .doodle--scribble      { bottom: 0; right: 0; scale: -1 1; }

@media (max-width: 768px) {
  .chapter .doodle:not(.doodle--m) { display: none; }
  .chapter .doodle--m { top: var(--space-48); left: auto; right: 8%; }
  .help .doodle--m { top: auto; bottom: 0; }
}
@media (max-width: 500px) {
  /* В benefits заголовок в две строки почти во всю ширину – дудл над правым концом скотча, в верхнем поле секции */
  .benefits .doodle--m { top: 0; right: 4%; }
  /* В about – над левым концом скотча: справа от заголовка звёздочка стояла рядом со звёздочкой benefits и дублировала её */
  .about .doodle--m { top: 0; right: auto; left: 12%; }
  .contacts .doodle--m { top: calc(var(--space-12) * -1); right: 4%; }
}

/* 06 contacts: письмо (концепт A). Слева почта и соцсети крупно – написать можно и без формы, лаймовая стрелка ведёт к листу.
   Справа линованный лист поверх голубого конверта (конверт с закладки Contacts): подписи полей – на полях за маджентовой линией,
   ввод – по линейкам, отправить – почтовая марка. Конверт – декоративный ::before, марка – перфорация маской */
.contacts__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  margin-block-start: var(--space-64);
}
.contacts__reach { grid-column: 1 / span 4; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); padding-block-start: var(--space-48); }
/* Адрес шире колонки 4/12 (на десктопе выходит за неё в пустое поле) – .link-out--split, части до и после «@» */
.contacts__mail { --mark: var(--color-lime); font-weight: var(--fw-text); }
.contacts__lead { max-width: var(--benefit-measure); text-wrap: pretty; }
/* Соцсети – значки в ряд цветом текста листа; на hover и фокусе – лаймом (смена цвета – дефолт, не приём) */
.contacts__socials { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-inline-start: calc((var(--social-hit) - var(--social-icon)) / -2); }
.social { display: grid; place-items: center; width: var(--social-hit); height: var(--social-hit); color: var(--color-fg); transition: color var(--dur-300) var(--ease-out); }
.social svg { width: var(--social-icon); height: var(--social-icon); fill: currentColor; }
.social:hover, .social:focus-visible { color: var(--color-lime); }
.contacts .doodle--arrow { right: calc(var(--space-24) * -1); bottom: calc(var(--space-64) * -1.4); scale: -1 1; rotate: var(--contacts-arrow-tilt); }

.contacts__letter { grid-column: 6 / span 7; position: relative; isolation: isolate; rotate: var(--letter-tilt); }
.contacts__letter::before {
  content: '';
  position: absolute;
  inset: calc(var(--env-shift) * 2) calc(var(--env-shift) * -1) calc(var(--env-shift) * -1.2) var(--env-shift);
  z-index: -1;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--color-env-seam) 50%, transparent calc(50% + 1px)) left bottom / 50% 55% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--color-env-seam) 50%, transparent calc(50% + 1px)) right bottom / 50% 55% no-repeat,
    var(--color-blue);
  box-shadow: var(--shadow-paper);
  rotate: var(--env-tilt);
}
.letter {
  display: flex;
  flex-direction: column;
  padding: var(--letter-rule) var(--letter-pad-x) var(--letter-rule) 0;
  color: var(--color-ink);
  background:
    linear-gradient(var(--color-magenta), var(--color-magenta)) var(--letter-margin) 0 / var(--letter-margin-line) 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--letter-rule) - 1px), var(--color-rule) calc(var(--letter-rule) - 1px) var(--letter-rule)),
    var(--color-paper);
  box-shadow: var(--shadow-paper);
}
.letter__row { display: grid; grid-template-columns: var(--letter-margin) 1fr; align-items: center; min-height: var(--letter-rule); }
.letter__row label { padding-inline: var(--space-16) var(--space-12); font-weight: var(--fw-text); }
.letter__row--msg { align-items: start; }
.letter__row--msg label { line-height: var(--letter-rule); }
.letter__field {
  width: 100%;
  height: var(--letter-rule);
  padding: 0 var(--space-16);
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  outline: none;
}
.letter__field::placeholder { color: var(--color-placeholder); opacity: 1; }
.letter__field:focus-visible { background: var(--color-field-focus); }
/* Значение, выбранное из подсказок браузера: без голубой заливки и системного шрифта – поле остаётся строкой на бумаге.
   Фон браузера задаёт с !important – его не перебить, только отложить переходом; фокус такого поля – внутренней тенью */
.letter__field:-webkit-autofill,
.letter__field:autofill {
  -webkit-text-fill-color: var(--color-ink);
  caret-color: var(--color-ink);
  transition: background-color 0s var(--autofill-hold), color 0s var(--autofill-hold);
}
.letter__field:-webkit-autofill::first-line { font: inherit; }
.letter__field:-webkit-autofill:focus-visible,
.letter__field:autofill:focus-visible { box-shadow: inset 0 0 0 100vmax var(--color-field-focus); }
textarea.letter__field { height: calc(var(--letter-rule) * 5); line-height: var(--letter-rule); resize: none; }

/* Марка: сетка дырочек, объединённая с внутренним прямоугольником, оставляет перфорацию только по краю; рамка – outline внутрь */
.stamp {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-block-start: var(--letter-rule);
  margin-inline-end: var(--space-8);
  padding: var(--stamp-pad-y) var(--stamp-pad-x);
  background: var(--color-lime);
  color: var(--color-ink);
  outline: var(--stamp-frame) solid var(--color-ink);
  outline-offset: calc(var(--stamp-frame-gap) * -1);
  mask:
    linear-gradient(black 0 0) center / calc(100% - var(--stamp-perf) * 2) calc(100% - var(--stamp-perf) * 2) no-repeat,
    radial-gradient(circle, transparent calc(var(--stamp-perf) * 0.5), black calc(var(--stamp-perf) * 0.5 + var(--mask-aa))) 50% 50% / calc(var(--stamp-perf) * 2) calc(var(--stamp-perf) * 2) round;
  rotate: var(--stamp-tilt);
  transition: rotate var(--dur-300) var(--ease-overshoot), scale var(--dur-150) var(--ease-out);
}
.stamp svg { width: var(--btn-icon); height: var(--btn-icon); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stamp:hover, .stamp:focus-visible { rotate: 0deg; }
.stamp:active { scale: 0.96; }
.stamp:disabled { cursor: progress; }
/* Ответ формы: строка на линейке под маркой, пустая – без высоты */
.letter__status { align-self: flex-end; padding-inline: var(--space-16) var(--space-8); text-align: end; line-height: var(--letter-rule); text-wrap: balance; }
.letter__status:not(:empty) { margin-block-start: var(--letter-rule); }

@media (prefers-reduced-motion: reduce) {
  .stamp { transition: none; }
}
@media (max-width: 768px) {
  .contacts__reach { grid-column: 1 / -1; padding-block-start: 0; }
  .contacts .doodle--arrow { display: none; }
  .contacts__letter { grid-column: 1 / -1; margin-block-start: var(--space-48); margin-inline-end: var(--env-shift); }
  .letter {
    padding-inline-start: var(--letter-pad-x);
    background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--letter-rule) - 1px), var(--color-rule) calc(var(--letter-rule) - 1px) var(--letter-rule)), var(--color-paper);
  }
  .letter__row { grid-template-columns: 1fr; }
  .letter__row label { padding-inline: 0; line-height: var(--letter-rule); }
  .letter__field { padding-inline: 0; }
}