/* Страница генератора. Палитра брендбука astashko.ru. Шрифты только локальные (fonts/). */

@font-face { font-family: "Inter"; src: url("../fonts/Inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-cyrillic.woff2") format("woff2");
  font-weight: 100 900; 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-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat-cyrillic.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --u: 8px;

  --beige:   #F5F1E8;
  --wall:    #EFE9DC;          /* фон страницы: стена, на которой висит лист */
  --paper:   #FFFDF9;          /* бумага — тёплый белый */
  --panel:   #FFFFFF;
  --ink:     #1C2333;
  --gray:    #5F5E5A;
  --emerald: #0F6E56;
  --emerald-dark: #0B5844;
  --ochre:   #8A5711;
  --line:    #E3DDD0;
  --rule:    #D6CFBE;          /* разделители на бежевом: --line на нём не виден */
  --shade:   #A9CDBF;          /* тень кнопок и рамки: светлый изумруд */

  --bubble-in:  #FFFFFF;
  --bubble-out: #D9EDE4;

  --ease: cubic-bezier(.2,.7,.3,1);
  --r:    3px;                 /* единый радиус всей страницы */
  --pad:  48px;                /* боковой отступ */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--wall);
  color: var(--ink);
  font: 400 16px/1.6 "Inter", -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;            /* clip, не hidden: hidden убил бы залипание листа */
}

.h-block   { font: 800 32px/1.25 "Montserrat", sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.h-product { font: 800 44px/1 "Montserrat", sans-serif; letter-spacing: -.03em; }
.prose     { max-width: 62ch; }
.prose p + p { margin-top: calc(var(--u) * 3); }
.prose aside + p { margin-top: 0; }

/* ══ АРХИТЕКТУРА ══
   Один фон на всю страницу. Слева на нём висит лист, справа идёт текст.
   На узком экране колонки схлопываются: сначала лист, потом всё остальное. */
.shell {
  /* Высота листа считается из ширины (A4) — ею центрируется залипание,
     чтобы верх листа встал вровень с заголовком, а низ подписи — с фотографией. */
  --rail-col:    clamp(300px, 32vw, 420px);
  --sheet-share: 1;            /* доля колонки под крупный лист; при сплите меньше */
  --sheet-w: min(calc(var(--rail-col) * var(--sheet-share)), calc((100vh - var(--u) * 22) * 0.7071));
  --rail-h:  calc(var(--sheet-w) * 1.4143 + 52px);

  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  gap: clamp(40px, 6vw, 88px);
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--pad);
  align-items: start;
}

.rail {
  position: sticky;
  top: max(calc(var(--u) * 2), calc((100vh - var(--rail-h)) / 2));
  height: auto;
  display: flex; flex-direction: column;
  margin-bottom: 2px;          /* на толщину рамки блока: фото кончается внутри неё */
}

/* Лист. Пропорция A4 неприкосновенна: ограничиваем ШИРИНУ, выводя её из свободной
   высоты окна — max-height обрезал бы лист и расплющил его в квадрат. */
.sheet {
  width: 100%;
  background: var(--paper);
  aspect-ratio: 210 / 297;
  max-width: var(--sheet-w);
  margin-inline: auto;
  box-shadow: 0 1px 2px rgba(28,35,51,.10), 0 8px 24px rgba(28,35,51,.08),
              0 24px 48px rgba(28,35,51,.05);
}
.sheet svg { width: 100%; height: 100%; display: block; }

/* Сплит: при введённой дате рядом с демо-листом встаёт личный */
.sheet-row { display: grid; grid-template-columns: 1fr; gap: var(--u); }
.sheet-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sheet-lbl {
  font: 600 11px/1 "Inter", sans-serif; color: var(--gray);
  letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; height: 0; overflow: hidden;
  transition: opacity 200ms linear;
}
.sheet-col-personal { display: none; }
/* Сплит: колонка расширяется за счёт текста, чужой лист — 30% от своего (3fr к 10fr) */
.shell:has(.sheet-area.is-split) {
  --rail-col: clamp(420px, 46vw, 640px);
  --sheet-share: .769;         /* 10 / 13 — доля крупного листа в ряду */
}
.sheet-area.is-split .sheet-row { grid-template-columns: 3fr 10fr; align-items: end; }
.sheet-area.is-split .sheet-col-personal { display: flex; }
.sheet-area.is-split .sheet-lbl { opacity: 1; height: auto; }
.sheet-area.is-split .sheet { max-width: none; }

.rail-cap { max-width: var(--sheet-w); margin-inline: auto; width: 100%; }
.rail:has(.is-split) .rail-cap { max-width: none; }
/* подпись одной строкой: «31 год — цитата», возраст обычным, цитата курсивом */
.rail-strip {
  margin-top: calc(var(--u) * 2);
  padding-top: calc(var(--u) * 1.5);
  border-top: 1px solid var(--rule);
  font: 400 13px/1.5 "Inter", sans-serif; color: var(--gray);
}
.rail-age { font-weight: 500; font-variant-numeric: tabular-nums; }
/* разделитель в стилях, а не в разметке: скрипт заполняет спаны порознь,
   и при пустой цитате тире не должно повисать */
.rail-q   { font-style: italic; }
.rail-q:not(:empty)::before { content: " — "; font-style: normal; }

/* min-width:0 — иначе элементы сетки не сжимаются уже своего содержимого
   и на узком экране дают горизонтальную прокрутку */
.content { padding-block: max(calc(var(--u) * 2), calc((100vh - var(--rail-h)) / 2)) 0; min-width: 0; }
.flow    { display: flex; flex-direction: column; gap: calc(var(--u) * 14); max-width: 680px; min-width: 0; }
.flow > section { min-width: 0; }
.rail { min-width: 0; }
.bot-cols > * { min-width: 0; }

/* ══ ПЕРВЫЙ ЭКРАН ══ */
.intro { display: flex; flex-direction: column; }
.panel-inner { width: 100%; }
.product-sub  { margin-top: var(--u); color: var(--gray); }
/* подчёркивание под шапкой — рифмуется с линией под листом слева */
.product-head { padding-bottom: calc(var(--u) * 3); border-bottom: 1px solid var(--rule); }
.form-heading { margin-top: calc(var(--u) * 5); margin-bottom: calc(var(--u) * 2); color: var(--gray); }

/* форма — белая бумага с рамкой: единственная плашка на первом экране */
.form-block {
  display: flex; flex-direction: column; gap: calc(var(--u) * 2);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: calc(var(--u) * 4);
}
.field input[type=date], .field input[type=number] {
  font: inherit; color: var(--ink); background: var(--wall);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 0 calc(var(--u) * 2); height: calc(var(--u) * 7); width: 100%;
}
.field input:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

.years-row { display: flex; align-items: center; gap: calc(var(--u) * 2); }
/* зона захвата 44px по нормативу, сам трек остаётся тонким */
.years-row input[type=range] {
  flex: 1; accent-color: var(--emerald);
  height: 44px; background: transparent; cursor: pointer;
}
.years-row input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--line);
}
.years-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--emerald); margin-top: -8px;
}
.years-row input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.years-row input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--emerald); }
.years-row input[type=range]:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.years-row input[type=number] { width: calc(var(--u) * 10); text-align: center; flex: none; }
.unit { color: var(--gray); }

.hint { font-size: 13px; line-height: 1.5; color: var(--gray); margin-top: 6px; }
.hint.warn { color: var(--ochre); }
.err  { font-size: 13px; line-height: 1.5; color: var(--ochre); margin-top: 6px; }
.status { font-size: 13px; line-height: 1.5; color: var(--gray); min-height: 1.5em; }
.facts-wrap { font-size: 13px; line-height: 1.6; color: var(--gray); margin-top: calc(var(--u) * 2); }

/* выбор стиля листа — та же система, что у кнопок */
.styles-field  { border: 0; }
.styles-legend { font-size: 13px; color: var(--gray); margin-bottom: var(--u); padding: 0; }
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u); }
.style {
  display: flex; flex-direction: column; gap: 6px;
  padding: calc(var(--u) * 1.5);
  border-radius: var(--r); background: var(--wall);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: pointer; transition: box-shadow 160ms var(--ease);
}
.style input { position: absolute; opacity: 0; pointer-events: none; }
.style .swatch { height: calc(var(--u) * 5); border-radius: 2px; }
.style .nm { font: 600 13px/1.2 "Inter", sans-serif; }
.style .ds { font-size: 12px; line-height: 1.4; color: var(--gray); }
.style:hover { box-shadow: inset 0 0 0 1.5px var(--gray); }
.style:has(input:checked) { box-shadow: inset 0 0 0 2px var(--emerald); background: var(--paper); }
.style:has(input:focus-visible) { outline: 2px solid var(--ochre); outline-offset: 2px; }

.form-note { margin-top: calc(var(--u) * 3); font-size: 13px; line-height: 1.6; color: var(--gray); }

/* ══ КНОПКИ: жёсткая тень со сдвигом ══ */
.btn {
  --fill: var(--emerald); --label: var(--paper); --edge: var(--emerald);
  --sx: 4px; --sy: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  position: relative; isolation: isolate;
  min-height: calc(var(--u) * 6.5); padding: 0 calc(var(--u) * 3);
  border: 0; border-radius: var(--r);
  background-color: var(--fill); color: var(--label);
  font: 600 16px/1 "Inter", sans-serif; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; appearance: none;
  /* рамка внутренней тенью: утолщение не меняет габарит */
  box-shadow: inset 0 0 0 1.5px var(--edge), var(--sx) var(--sy) 0 0 var(--shade);
  transition: translate 120ms var(--ease), box-shadow 120ms var(--ease),
              background-color 160ms linear, color 160ms linear;
}
.btn--wide { width: 100%; height: calc(var(--u) * 7); }
/* закрашивание слева направо — метафора продукта: клетки закрашиваются */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--emerald-dark); border-radius: inherit;
  clip-path: inset(0 100% 0 0); transition: clip-path 320ms var(--ease);
}
@media (hover: hover) {
  .btn:hover {
    translate: -1px -1px;
    box-shadow: inset 0 0 0 1.5px var(--edge),
                calc(var(--sx) + 1px) calc(var(--sy) + 1px) 0 0 var(--shade);
  }
  .btn:hover::before { clip-path: inset(0 0 0 0); }
  .btn:hover .ico svg:nth-child(1) { translate: 0 115%; }
  .btn:hover .ico svg:nth-child(2) { translate: 0 0; }
}
.btn:active {
  translate: var(--sx) var(--sy);
  box-shadow: inset 0 0 0 1.5px var(--edge), 0 0 0 0 var(--shade);
  transition-duration: 60ms;
}
.btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
.btn:focus:not(:focus-visible) { outline: none; }
.btn[disabled] { opacity: .6; cursor: default; }
@supports (text-box: trim-both cap alphabetic) { .btn { text-box: trim-both cap alphabetic; } }

/* стрелка: уезжает вниз, дублёр въезжает сверху — габарит не меняется */
.ico { flex: none; position: relative; width: 1em; height: 1em; overflow: hidden; }
.ico svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square;
  transition: translate 220ms var(--ease);
}
.ico svg:nth-child(2) { translate: 0 -115%; }

.btn-row { display: flex; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 4); flex-wrap: wrap; }
.btn-row .btn { min-width: 13em; }

/* буллет — закрашенная клетка листа */
.list { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.li { display: grid; grid-template-columns: calc(var(--u) * 3) 1fr; gap: calc(var(--u) * 2); align-items: start; }
.li-mark { width: 10px; height: 10px; background: var(--emerald); margin-top: 8px; }

/* ══ ТЕКСТ АВТОРА ══ */
.prose::after { content: ""; display: block; clear: both; }
/* текст автора в тонкой рамке — на тон легче, чем рамка подписи */
.prose--framed {
  max-width: none;
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border: 1px solid var(--shade); border-radius: var(--r);
}

/* Цитата-флажок: уходит вправо, текст обтекает её слева.
   Выравнивание по правому краю — левый край остаётся рваным. */
.inset--quote {
  float: right;
  width: min(44%, 272px);
  /* правый отступ отрицательный ровно на padding рамки — врезка упирается в стенку */
  margin: 0 calc(var(--u) * -5) calc(var(--u) * 2) calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  background: var(--panel);
  text-align: right;
  /* без вертикальной линии: у стенки она ложилась поверх рамки блока */
  border: 0; border-radius: var(--r) 0 0 var(--r);
}
.inset-q { font: 800 20px/1.4 "Montserrat", sans-serif; letter-spacing: -.01em; text-wrap: balance; }
/* специфичность выше, чем у .prose p + p — иначе отступ абзацев перебивает */
.inset .inset-a { margin-top: var(--u); font-size: 14px; line-height: 1.3; color: var(--gray); font-style: italic; }

/* ══ ФОТО В ТЕКСТЕ: ровно по ширине колонки ══ */
.in-text { margin: calc(var(--u) * 4) 0; clear: both; }
.in-text img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }

/* ══ БОТ ══ */
.bot-lead { margin-top: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 5); color: var(--gray); }
.bot-cols { display: grid; grid-template-columns: minmax(300px, 1fr) 1fr; gap: calc(var(--u) * 5); align-items: start; }
.chatwin {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(28,35,51,.06), 0 12px 32px rgba(28,35,51,.07);
}
.chat-head {
  display: flex; align-items: center; gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.ava { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; flex: none; overflow: hidden; display: block; }
.ava svg { width: 100%; height: 100%; display: block; }
.head-name { font: 600 15px/1.3 "Inter", sans-serif; }
.head-sub  { font-size: 13px; color: var(--gray); }
.head-tail { margin-left: auto; display: flex; gap: calc(var(--u) * 1.5); color: var(--line); }
.head-tail svg { width: 18px; height: 18px; display: block; }

.chat { padding: calc(var(--u) * 2); display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); background: var(--wall); }
.row { display: flex; }
.row.out { justify-content: flex-end; }
/* подряд идущие реплики одного отправителя стоят плотнее — как в мессенджере */
.row + .row.same { margin-top: calc(var(--u) * -.75); }

.msg {
  position: relative; max-width: 86%; padding: 10px 12px 8px;
  font-size: 14px; line-height: 1.45; border-radius: 12px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end;
  column-gap: 8px;
}
.msg .t { flex: 1 1 auto; min-width: 0; }
.msg.in  { background: var(--bubble-in);  border-bottom-left-radius: 4px; }
.msg.out { background: var(--bubble-out); border-bottom-right-radius: 4px; }
/* у сплошной серии хвостик только у последнего пузыря */
.row.same .msg.in { border-bottom-left-radius: 12px; }
.row.same .msg.in::after { display: none; }
.row.same.last .msg.in { border-bottom-left-radius: 4px; }
.row.same.last .msg.in::after { display: block; }
/* хвостик — деталь, по которой глаз мгновенно узнаёт мессенджер */
.msg.in::after, .msg.out::after { content: ""; position: absolute; bottom: 0; width: 8px; height: 12px; }
.msg.in::after  { left: -6px;  background: var(--bubble-in);  clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.msg.out::after { right: -6px; background: var(--bubble-out); clip-path: polygon(0 0, 100% 100%, 0 100%); }

.meta { flex: 0 0 auto; align-self: flex-end; font-size: 11px; line-height: 1.4; color: var(--gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta .tick { color: var(--emerald); letter-spacing: -2px; margin-left: 3px; }

/* клавиатура выбора дня — под пузырём, как настоящая inline-клавиатура */
.keyb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; max-width: 86%; }
.keyb span {
  background: #E4EFE9; color: var(--emerald);
  font: 600 13px/1 "Inter", sans-serif; padding: 10px 0; text-align: center; border-radius: 4px;
}
.daysep {
  align-self: center; font-size: 11px; color: var(--gray);
  background: rgba(28,35,51,.06); padding: 3px 10px; border-radius: 10px; margin: calc(var(--u) * .5) 0;
}
/* строка ввода — закрывает окно снизу, делает его законченным */
.chat-foot {
  display: flex; align-items: center; gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-top: 1px solid var(--line); background: var(--panel);
  font-size: 14px; color: var(--gray);
}
.chat-foot .ph { flex: 1; }
.chat-foot svg { width: 18px; height: 18px; color: var(--line); display: block; }

/* ══ ОБ АВТОРЕ ══
   stretch вместо start: фото тянется на всю высоту блока, а не висит сверху. */
.author {
  display: grid; grid-template-columns: 200px 1fr; gap: calc(var(--u) * 4);
  align-items: stretch;
  border: 2px solid var(--shade); border-radius: var(--r);
  overflow: hidden;            /* фото обрезается по скруглению рамки */
}
.author img { width: 100%; height: 100%; display: block; object-fit: cover; }
.author .tel { font-weight: 600; color: var(--ink); white-space: nowrap; }
.author .prose { align-self: center; padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) 0; }

/* ══ ФУТЕР ══ */
.footer { margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 7) var(--pad); border-top: 1px solid var(--rule); text-align: right; }
/* подчёркивание текстовое: при 44px тач-зоне фоновая линия отрывалась от слова */
.footer a {
  color: var(--emerald); font-weight: 400; font-size: 14px;
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.footer a:hover { text-decoration-thickness: 2px; }

/* ══ ОКОШКО ФАКТОВ ГОДА (ждёт базу; разметка законсервирована в index.html) ══ */
.row-date { display: flex; gap: var(--u); align-items: stretch; }
.row-date .f-date { flex: 0 0 auto; width: calc(var(--u) * 23); }
.row-date .f-pick { flex: 1 1 auto; min-width: 0; }
.event {
  display: flex; align-items: center;
  min-height: calc(var(--u) * 7); height: 100%;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2);
  border: 1px dashed var(--rule); border-radius: var(--r);
  font-size: 13px; line-height: 1.45; color: var(--gray);
}
.event-line { display: block; width: 100%; transition: opacity 300ms linear; }
.event-line.is-leaving { opacity: 0; }
.event-line:empty::before { content: "Выберите дату рождения"; opacity: .7; }
/* Слова лежат в DOM целиком с самого начала — поэтому переносы и высота
   посчитаны один раз и строка не прыгает. Анимируется только видимость. */
.event-line .w {
  display: inline-block; opacity: 0; translate: 0 .3em;
  transition: opacity 300ms linear, translate 300ms var(--ease);
}
.event-line .w.is-on { opacity: 1; translate: 0 0; }
.event-line .sep { width: 7px; height: 7px; background: var(--emerald); vertical-align: baseline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .btn:hover, .btn:active { translate: none; }
  .event-line .w { opacity: 1; translate: 0 0; }
}
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; forced-color-adjust: none; }
}

/* ══ УЗКИЙ ЭКРАН: всё последовательно ══ */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; gap: 0; padding: 0 calc(var(--u) * 3); }
  .rail { position: static; height: auto; padding-block: calc(var(--u) * 6); align-items: center; }
  .sheet { max-width: min(340px, 78vw); align-self: center; }
  .sheet-area { width: 100%; }
  /* на узком экране два листа в ряд нечитаемы: ставим друг под другом,
     свой сверху, чужой под ним — те же 30% */
  .sheet-area.is-split .sheet-row {
    grid-template-columns: 1fr; gap: calc(var(--u) * 3);
    justify-items: center;
  }
  .sheet-area.is-split .sheet-col { width: min(340px, 78vw); }
  .sheet-area.is-split .sheet-col-personal { order: -1; }
  .sheet-area.is-split .sheet-col:not(.sheet-col-personal) { width: min(102px, 23.4vw); }
  .sheet-area.is-split .sheet { max-width: 100%; }
  .rail-cap { max-width: min(340px, 78vw); width: 100%; align-self: center; }
  .content { padding-block: calc(var(--u) * 2) 0; }
  .intro { padding-bottom: calc(var(--u) * 4); }
  .flow { gap: calc(var(--u) * 10); max-width: none; }
  .h-product { font-size: 36px; }
  .h-block { font-size: 26px; }
  .bot-cols, .author { grid-template-columns: 1fr; }
  .form-block { padding: calc(var(--u) * 3); }
  /* три колонки на 390px зажимают описания стилей до нечитаемого */
  .styles { grid-template-columns: 1fr; }
  /* образец слева, название и описание столбиком справа */
  .style {
    display: grid; grid-template-columns: calc(var(--u) * 9) 1fr;
    column-gap: calc(var(--u) * 2); row-gap: 2px; align-items: center;
  }
  .style .swatch { grid-row: span 2; height: calc(var(--u) * 6); }
  .style .nm { align-self: end; }
  .style .ds { align-self: start; }
  .prose--framed { padding: calc(var(--u) * 3); }
  /* на узкой колонке обтекание не читается: врезка становится обычным блоком */
  .inset--quote {
    float: none; width: 100%; margin: calc(var(--u) * 3) 0;
    text-align: left; border-left: 2px solid var(--emerald);
    border-radius: 0 var(--r) var(--r) 0;
  }
  .btn-row .btn { min-width: 0; flex: 1 1 100%; }
  .author .prose { padding: calc(var(--u) * 3); }
  .footer { padding: calc(var(--u) * 5) calc(var(--u) * 3); }
}