/* alexv.ru — страница проекта «Береги честь смолоду» (серия толстовок).
   Общая основа (шапка, подвал, колонка текста, авторы, теги, система текстов) — в site.css и project.css.
   Размеры картинок и крупного набора заданы в долях страницы 1024, как на Readymag, но не крупнее рамки сайта 1920:
   одна доля --u = 1/1024 ширины окна (не больше 1920 пикселей). */

/* Начертания Roboto 100 и 900 нужны только этой странице (название серии и «Купить»), поэтому подключены здесь; 300 — общее, из fonts.css */
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/roboto-cyrillic-900-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/roboto-latin-900-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url('../fonts/roboto-cyrillic-100-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url('../fonts/roboto-latin-100-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.pk {
  --u: calc(min(100vw, 1920px) / 1024);
  --purple: #89007a;   /* поле серии (как на Readymag) */
  --violet: #a1007d;   /* вторая строка названия */
  --big: calc(85 * var(--u));   /* крупный набор первого экрана: 85 долей, как на Readymag */
  font-weight: 400;
  background: var(--purple);
}

/* ---------- 1. Первый экран: видео, название серии, «Купить» ---------- */
/* Видео — фон первого экрана: оно стоит на месте, а название и «Купить» уезжают по нему вверх (как на Readymag, где видео
   было фоном страницы). Первый экран — видео целиком, название серии начинается у его нижнего края. */
.pk-hero { position: relative; clip-path: inset(0); background: #0085de; }
.pk-video { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; object-fit: cover; }
.pk-hero-in {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  /* сверху — экран под шапкой минус две строки названия и шаг; снизу — три шага до фиолетового поля */
  padding: max(calc(3 * var(--p-s)), calc(100vh - var(--hh, 71px) - 2.1 * var(--big) - 2 * var(--p-s))) var(--fr) calc(3 * var(--p-s)) var(--fl);
}
@supports (height: 100svh) {
  .pk-video { height: 100lvh; }
  .pk-hero-in { padding-top: max(calc(3 * var(--p-s)), calc(100svh - var(--hh, 71px) - 2.1 * var(--big) - 2 * var(--p-s))); }
}
.pk-title, .pk-buy { font-size: var(--big); line-height: 1; }
.pk-title { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.pk-title span { display: block; }
.pk-l1 { color: #fff; }
.pk-l2 { color: var(--violet); }
.pk-star { display: inline-block; width: .82em; height: auto; margin-right: .1em; vertical-align: -.06em; }

/* «Купить» — три цвета толстовки; рядом тонко — какая она («тёплую», «самую тёплую»).
   На Readymag это слово появлялось при наведении; здесь видно всегда: на телефоне наведения нет. */
.pk-buy { margin: calc(.35 * var(--big)) 0 0; padding: 0; list-style: none; }
.pk-buy li + li { margin-top: .08em; }
/* строка — по базовой линии; если слово рядом с «Купить» не помещается, его вторая строка ровняется по первому слову
   («тёплую» под «самую»), а не по началу строки (решение владельца 13.10.2026) */
.pk-buy a { display: inline-flex; align-items: baseline; color: var(--c); text-decoration: none; transition: opacity .33s; }
.pk-buy .pk-star { flex: none; position: relative; top: .06em; }
.pk-buy b { flex: none; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.pk-buy span { min-width: 0; margin-left: .25em; font-weight: 100; font-size: calc(63em / 85); line-height: 1.05; }
/* «самую тёплую» — на два шага жирнее, чем «тёплую» (300 против 100): акцент на толщине ткани (решение владельца 13.10.2026) */
.pk-buy span.pk-thick { font-weight: 300; }
@media (hover: hover) { .pk-buy a:hover { opacity: .62; transition: none; } }
.pk-buy a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------- 2. Фиолетовое поле: бегущие звёзды, высказывание, фотографии, надписи ---------- */
.pk-field { position: relative; overflow: hidden; background: var(--purple); padding: calc(3 * var(--p-s)) 0; }
.pk-field > * { position: relative; }
/* Узор: ряды звёзд едут в разные стороны (на Readymag — 940 долей за минуту; здесь с той же скоростью, без остановки) */
.pk-pattern { position: absolute; inset: 0; pointer-events: none; }
.pk-pattern i {
  position: absolute;
  top: calc(-15 * var(--u));
  bottom: 0;
  left: calc(-134 * var(--u));
  right: calc(-134 * var(--u));
  background: url('../pushkin/pattern-4x.webp') 0 0 / calc(134 * var(--u)) calc(270 * var(--u)) repeat;
  animation: pk-right 8.55s linear infinite;
}
.pk-pattern i + i { top: calc(120 * var(--u)); animation-name: pk-left; }
@keyframes pk-right { from { transform: translateX(0); } to { transform: translateX(calc(134 * var(--u))); } }
@keyframes pk-left { from { transform: translateX(calc(134 * var(--u))); } to { transform: translateX(0); } }

.pk .pk-intro { padding-top: 0; }
.pk .pk-intro p.s-say { margin-bottom: calc(2 * var(--p-s)); }

/* Фотографии: две колонки, как на Readymag (468 и 545 долей), края колонок сходятся внизу */
.pk-collage {
  display: grid;
  grid-template-columns: 468fr 545fr;
  gap: calc(11 * var(--u));
  max-width: 1920px;
  margin: calc(3 * var(--p-s)) auto 0;
}
.pk-col { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.pk-pair { display: grid; grid-template-columns: 298fr 238fr; gap: calc(10 * var(--u)); }
.pk-ph { margin: 0; aspect-ratio: var(--ar); overflow: hidden; background: #6d0062; }
.pk-ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (max-width: 639.98px) {
  .pk-collage { grid-template-columns: minmax(0, 1fr); gap: calc(10 * var(--u)); }
}

.pk .pk-text { padding-top: calc(3 * var(--p-s)); }

/* ---------- 3. Спина толстовки на синем ---------- */
.pk-back { background: #0085de; padding-top: calc(9 * var(--u)); }
.pk-back img { display: block; width: calc(985 * var(--u)); max-width: none; height: auto; margin: 0 auto; }

/* ---------- 4. Ряд из трёх фотографий и надпись каллиграфа ---------- */
.pk-field-2 { padding: calc(10 * var(--u)) 0 calc(44 * var(--u)); }
.pk-row { display: grid; grid-template-columns: 240fr 529fr 241fr; gap: calc(7 * var(--u)); max-width: 1920px; margin: 0 auto; }
/* надпись: сверху 31 доля, как на Readymag; снизу в 1,4 раза больше (правило силы тяготения) */
.pk-lettering { margin: calc(31 * var(--u)) 0 0; }
.pk-lettering img { display: block; width: calc(807 * var(--u)); max-width: none; height: auto; margin: 0 auto; }

/* ---------- 5. Конец: снова «Купить», авторы, теги — на белом ---------- */
.pk-end { background: #fff; color: #1b1b1b; padding-top: calc(3 * var(--p-s)); }
.pk-end .pk-buy { max-width: 1920px; margin: 0 auto; padding: 0 var(--fr) 0 var(--fl); }
.pk .pk-credits { padding-top: calc(3 * var(--p-s)); }

@media (prefers-reduced-motion: reduce) {
  .pk-pattern i { animation: none; }
}

/* ---------- 6. О самих толстовках (со страницы магазина; 14.10.2026): спереди и сзади, ткань, размеры, уход ---------- */
.pk-info { padding-bottom: calc(3 * var(--p-s)); }
.pk-info .s-h2 { margin-bottom: calc(1.5 * var(--p-s)); }
/* спереди и сзади: на широком экране — три цвета в ряд, перед сверху, спина снизу; на телефоне — пара «перед, спина» в строке */
.pk-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column;
  gap: clamp(12px, 2vw, 32px) clamp(8px, 1.5vw, 24px); max-width: 1920px; margin: 0 auto; padding: 0 var(--fr) 0 var(--fl); }
@media (max-width: 639.98px) { .pk-views { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; } }
.pk-view { margin: 0; }
.pk-view img { display: block; width: 100%; height: auto; }
.pk-view figcaption { margin-top: 4px; font-size: var(--t-small); line-height: var(--l-small); opacity: .6; text-align: center; }
.pk-thick { max-width: 1920px; margin: 0 auto var(--p-s); }
.pk-thick img { display: block; width: 100%; height: auto; }
/* таблицы: строки отбиты тонкими линейками, числа — в столбик */
.pk-tab { width: 100%; border-collapse: collapse; font-size: var(--t-text); line-height: var(--s); font-variant-numeric: tabular-nums; }
.pk-tab th, .pk-tab td { padding: .45em .6em .45em 0; border-bottom: 1px solid rgba(27, 27, 27, .15); text-align: left; vertical-align: baseline; font-weight: 300; }
.pk-tab thead th { font-size: var(--t-small); line-height: var(--l-small); opacity: .6; }
.pk-tab tbody th { font-weight: 500; white-space: nowrap; }
.pk-tab .pk-star { width: .9em; margin-right: .35em; vertical-align: -.08em; }
.pk-size td, .pk-size thead th:not(:first-child) { text-align: right; padding-right: 0; padding-left: .6em; }
.pk-sizes { position: relative; max-width: 560px; margin: calc(1.5 * var(--p-s)) auto 0; }
.pk-sizes img { display: block; width: 100%; height: auto; }
.pk-sizes svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pk-sizes line { stroke: #1b1b1b; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }   /* тонкие, пунктиром (владелец 14.10.2026) */
.pk-sizes text { fill: #1b1b1b; font: 700 15px 'Roboto', sans-serif; }   /* без обводки (замечание владельца 14.10.2026); чёрный читается и на синем, и на белом */
.pk-legend { margin-top: var(--p-s) !important; font-size: var(--t-text); line-height: var(--s); }
.pk .pk-legend li { padding-left: 1.4em; }
.pk .pk-legend li::before { content: none; }
.pk-legend b { position: absolute; left: 0; font-weight: 700; }
.pk .pk-info p.pk-note { margin: .6em 0 0; font-size: var(--t-small); line-height: var(--l-small); font-weight: 300; opacity: .6; }   /* как заголовки столбцов S, M, L, XL (владелец 14.10.2026) */
.pk-tab .pk-nw { white-space: nowrap; }
/* узкий телефон: таблицы мельче, чтобы рост «165—175» и плотность помещались без прокрутки вбок */
@media (max-width: 419.98px) {
  .pk-tab { font-size: var(--t-small); line-height: var(--l-small); }
  .pk-tab th, .pk-tab td { padding-right: .4em; }
  .pk-size td, .pk-size thead th:not(:first-child) { padding-left: .3em; }
}