/* Внутренние страницы: белый лист, крупный текст. Ни карточек, ни плашек, ни рамок вокруг подписей.
   Все значения в tokens.css. Страницы прокручиваются честно: условие одного экрана снято 31.10. */

.page__title { margin-bottom: var(--space-6); }
.section, .services, .contacts { overflow-wrap: break-word; }

.text-link, .inline-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.text-link { display: inline-flex; align-items: center; min-width: var(--touch); min-height: var(--touch); }
/* Ссылка внутри строки: нажимается на 44 px, а отрицательный отступ оставляет шаг строк прежним */
.inline-link { display: inline-flex; align-items: center; min-height: var(--touch); margin-block: -10px; }
.text-link:hover, .inline-link:hover { text-decoration-thickness: 2px; }

/* Главное действие: большим текстом, номер рядом */
.call {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em;
  padding: var(--space-2) 0;
  min-height: var(--touch);
  font-family: var(--font-head);
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-lh);
  letter-spacing: var(--type-subtitle-track);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.call__number { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Подпись клиенту: обычным текстом */
.note { color: var(--ink-2); max-width: var(--col-narrow); }
.placeholder {
  font-family: var(--font-head);
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-lh);
  letter-spacing: var(--type-subtitle-track);
}
.plain-list li + li { margin-top: .25em; }

.page { position: relative; }
.page > :not(.pf) { position: relative; z-index: 1; }

/* Место под зелёную соту у секций страницы проекта. На контактах соты нет */
.work .work-about, .work .work-gallery, .work .work-end, .work .work-hero:not(.work-hero--seam) .work-hero__head { padding-right: calc(var(--gut) + var(--page-end)); }
@media (min-width: 768px) and (max-aspect-ratio: 9/10) {
  .work .story__flow, .work .work-hero__head { padding-right: calc(var(--gut) + var(--page-end)); }
}
.page.contacts { padding-right: var(--gut); }

/* ---------- Поле с главной за контентом ---------- */
.pf { position: fixed; inset: 0; z-index: 0; pointer-events: none; perspective: 1400px; overflow: hidden; }
.pf__layer { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.pf__hex {
  position: absolute; display: block;
  clip-path: var(--hex);
  animation: pf-in var(--dur-long) var(--ease-mid) both;
  animation-delay: var(--d, 0ms);
}
.pf__hex--t0 { background: var(--t0); }
.pf__hex--t1 { background: var(--t1); }
.pf__hex--t2 { background: var(--t2); }
@keyframes pf-in {
  from { opacity: 0; transform: rotate3d(var(--ax, 1), var(--ay, 0), 0, 180deg); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* ---------- Раздел: проекты сотами на решётке, подпись сбоку ---------- */
.section__head { display: grid; gap: var(--space-2) var(--space-7); align-items: end; }
.section .page__title { margin: 0; }
.section__what { color: var(--ink-2); max-width: var(--col-text); }
.section__note {
  margin-top: var(--space-1);
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  color: var(--pale);
  max-width: var(--col-text);
}
/* Конец раздела лежит на листе: текст не идёт по сотам поля */
.section__end {
  position: relative;
  display: grid; gap: var(--space-3); justify-items: start;
  margin: var(--space-7) calc(-1 * var(--gut) - var(--page-end)) calc(-1 * var(--space-8)) calc(-1 * var(--gut));
  padding: var(--space-5) calc(var(--gut) + var(--page-end)) var(--space-8) var(--gut);
  background: var(--paper);
}
.section__end::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--space-8);
  background: linear-gradient(to top, var(--paper), rgb(var(--paper-rgb) / 0));
  pointer-events: none;
}
.section__end-text {
  max-width: var(--col-text);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
}
.section__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-2); }

/* Волна при открытии проекта: соты складываются в кадр, потом кадр цельный и тает над новой страницей */
.cover-wave { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; perspective: 1400px; }
.cover-wave__cell { position: absolute; display: block; clip-path: var(--hex); background-repeat: no-repeat; opacity: 0; }
.cover-wave__whole { position: absolute; inset: 0; display: block; background-size: cover; background-position: center; opacity: 0; }

/* Дорожка без минимума по содержимому: длинное слово подписи при крупном тексте не раздвигает сетку за край окна */
.works { --hw: min(44vw, 240px); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.tile {
  display: flex; align-items: center; gap: var(--space-5);
  text-decoration: none; color: inherit;
  perspective: 900px;
}
.tile__hex { position: relative; flex: 0 1 auto; min-width: 28%; display: block; width: var(--hw); aspect-ratio: 1 / 1.1547; animation: tile-flip var(--dur-long) var(--ease-mid) both; }
.works li:nth-child(2) .tile__hex { animation-delay: calc(var(--dur-short) * .33); }
.works li:nth-child(3) .tile__hex { animation-delay: calc(var(--dur-short) * .66); }
.works li:nth-child(4) .tile__hex { animation-delay: var(--dur-short); }
.works li:nth-child(5) .tile__hex { animation-delay: calc(var(--dur-short) * 1.33); }
.works li:nth-child(6) .tile__hex { animation-delay: calc(var(--dur-short) * 1.66); }
@keyframes tile-flip {
  from { opacity: 0; transform: rotate3d(.5, .866, 0, -180deg) scale(.9); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.tile__lift { position: absolute; inset: 0; display: block; }
.tile__sheet {
  position: absolute; inset: 0; display: block; overflow: hidden;
  clip-path: var(--hex);
  background: var(--t1);
}
.tile__sheet img { width: 100%; height: 100%; object-fit: cover; user-select: none; transition: transform var(--dur-mid) var(--ease-mid); }
.tile:hover .tile__sheet img { transform: scale(1.07); }
.tile:focus-visible { outline: none; }
.tile:focus-visible .ring { opacity: 1; }
/* Слово подписи не рвём: при крупном тексте уступает сота */
.tile__caption { display: block; flex: 1 1 0; min-width: min-content; }
.tile__title {
  display: block;
  font-family: var(--font-head);
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-lh);
  letter-spacing: var(--type-subtitle-track);
}
.tile:hover .tile__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.tile__place { display: block; margin-top: .3em; color: var(--ink-2); font-size: var(--type-small-size); line-height: var(--type-small-lh); }

@media (min-width: 900px) {
  .section__head { grid-template-columns: auto minmax(0, 1fr); }
  .section__note { grid-column: 1 / -1; }
  /* По три в ряд. Средний столбец сдвинут вниз на полсоты, как ряды на главной: держит и шесть проектов, и девять */
  .works {
    --hw: clamp(120px, 11.5vw, 300px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--grid-gap);
    padding-bottom: calc(var(--hw) * .55);
  }
  .works li:nth-child(3n + 2) { transform: translateY(calc(var(--hw) * .55)); }
  .tile { gap: var(--space-4); }
}
@media (min-width: 600px) and (max-width: 899px) { .works { --hw: 24vw; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Услуги: разделы лежат на цельном белом листе, поле остаётся только у шапки страницы ---------- */
.services__top { display: grid; gap: var(--space-6); align-items: center; }
.services__intro {
  max-width: var(--col-text); margin-top: var(--space-4);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
}
.services__sheet {
  position: relative;
  margin: var(--space-7) calc(-1 * var(--gut) - var(--page-end)) calc(-1 * var(--space-8)) calc(-1 * var(--gut));
  padding: 0 calc(var(--gut) + var(--page-end)) var(--space-8) var(--gut);
  background: var(--paper);
}
/* Лист наплывает на поле мягко: соты тают к нему, а не обрезаются линией */
.services__sheet::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--space-8);
  background: linear-gradient(to top, var(--paper), rgb(var(--paper-rgb) / 0));
  pointer-events: none;
}
.scheme { display: block; width: 100%; max-width: min(72vw, 420px); height: auto; margin: 0 auto; overflow: visible; }
.scheme__cell { cursor: pointer; outline: none; text-decoration: none; }
.scheme__cell polygon { transition: fill var(--dur-short) var(--ease-short), transform var(--dur-short) var(--ease-short); transform-box: fill-box; transform-origin: center; }
.scheme__cell:hover polygon { fill: var(--ink); transform: scale(1.04); }
.scheme__cell text {
  font-family: var(--font-head);
  font-size: var(--type-scheme-size);
  font-weight: var(--weight-head);
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--ink);
  transition: fill var(--dur-short) var(--ease-short);
  pointer-events: none;
}
.scheme__cell:hover text { fill: var(--paper); }
.scheme__cell:focus-visible polygon { stroke: var(--ink); stroke-width: 3px; }

.direction { padding-top: var(--space-8); scroll-margin-top: var(--space-5); }
.direction h2:focus { outline: none; }
.direction__head { display: grid; gap: var(--space-3) var(--space-8); align-items: baseline; }
.direction__text { max-width: var(--col-text); }
.direction__lead {
  max-width: var(--col-text);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
}
.direction__wide { display: grid; gap: var(--space-4) var(--space-8); margin-top: var(--space-4); }
.direction > .placeholder { margin-top: var(--space-5); max-width: var(--col-text); }
.direction__other { display: grid; gap: var(--space-3) var(--space-8); margin-top: var(--space-6); align-items: baseline; }

.big-list { margin-top: var(--space-5); font-family: var(--font-head); font-size: var(--type-title-size); font-weight: var(--type-title-weight); line-height: var(--type-title-lh); letter-spacing: var(--type-title-track); }
.big-list li + li { margin-top: var(--space-3); }

.trades__title { margin-top: var(--space-6); }
.trades { margin-top: var(--space-5); columns: 1; column-gap: var(--space-7); }
.trade { break-inside: avoid; padding-bottom: var(--space-5); }
.trade__title {
  margin: 0;
  font-family: var(--font-text);
  font-size: inherit;
  font-weight: var(--weight-strong);
  letter-spacing: var(--type-body-track);
  line-height: inherit;
}
.trade p { color: var(--ink-2); }
@media (min-width: 700px) { .trades { columns: 2; } }

.calc { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.packs { display: flex; gap: var(--space-7); margin: 0; padding: 0; border: 0; min-width: 0; }
.pack { position: relative; cursor: pointer; min-width: 0; }
.pack input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pack__box { display: block; color: var(--pale); transition: color var(--dur-short) var(--ease-short); min-height: var(--touch); }
.pack:hover .pack__box { color: var(--ink-2); }
.pack input:checked + .pack__box { color: var(--ink); }
.pack input:focus-visible + .pack__box { outline: 2px solid var(--ink); outline-offset: 4px; }
.pack__name, .pack__unit { display: block; white-space: nowrap; font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.pack__price {
  display: block;
  font-family: var(--font-head);
  font-size: var(--type-price-size);
  font-weight: var(--type-price-weight);
  line-height: var(--type-price-lh);
  letter-spacing: var(--type-price-track);
  font-variant-numeric: tabular-nums;
}
.pack input:checked + .pack__box .pack__name { font-weight: var(--weight-strong); }
.calc__work .field { margin-top: var(--space-3); max-width: var(--col-narrow); }
.calc__out { display: block; margin-top: var(--space-2); min-height: 1.4em; color: var(--ink-2); }
.calc__out.is-total {
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-lh);
  font-variant-numeric: tabular-nums;
}
.calc__note { margin-top: var(--space-1); color: var(--ink-2); font-size: var(--type-small-size); line-height: var(--type-small-lh); }

.includes__title { margin-top: var(--space-7); }
.includes { display: grid; gap: var(--space-5) var(--space-7); margin-top: var(--space-4); }
.include__name { font-weight: var(--weight-strong); }
.include__text { color: var(--ink-2); font-size: var(--type-small-size); line-height: var(--type-small-lh); }

.price-table { width: 100%; margin-top: var(--space-6); border-collapse: collapse; font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.price-table th[scope="row"] { font-weight: var(--weight-text); text-align: left; padding: .3em var(--space-3) .3em 0; }
.price-table thead th {
  padding: 0 .55em .4em;
  color: var(--ink-2);
  font-weight: var(--weight-text);
  text-align: center;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-short);
}
.price-table td { text-align: center; }
@media (max-width: 599px) { .price-table thead th { padding-inline: .25em; white-space: normal; } }
@media (max-width: 599px) { .price-table th[scope="row"] { padding-right: var(--space-2); } }
/* Порог в em растёт вместе с текстом браузера: узкое окно или крупный текст. Названия пакетов стоят выше, в шапке хватает цифры, колонка подписей получает место */
@media (max-width: 22em) {
  .price-table__word { display: none; }
  .price-table thead th { padding-inline: var(--space-2); }
}
/* Входит: тёмная сота. Не входит: втрое меньше и бледная, различимо и без цвета */
.mark { display: inline-block; width: 15px; height: 17px; clip-path: var(--hex); background: var(--t2); vertical-align: middle; transform: scale(.45); }
.mark--on { background: var(--ink-2); transform: none; }
[data-sel="0"] tr > td:nth-child(2) .mark--on,
[data-sel="1"] tr > td:nth-child(3) .mark--on,
[data-sel="2"] tr > td:nth-child(4) .mark--on { background: var(--ink); }
[data-sel="0"] thead th:nth-child(2),
[data-sel="1"] thead th:nth-child(3),
[data-sel="2"] thead th:nth-child(4) { color: var(--ink); font-weight: var(--weight-strong); }

.services__ways { display: grid; gap: var(--space-7) var(--space-8); padding-top: var(--space-8); }
.way p, .way .plain-list { max-width: var(--col-text); margin-top: var(--space-3); }
.way .plain-list li + li { margin-top: var(--space-3); }
.services__next { padding-top: var(--space-8); }
.services__next-text {
  max-width: var(--col-text);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
}
.services__next .call { margin-top: var(--space-3); }
.services__contacts { display: flex; width: fit-content; }

@media (min-width: 900px) {
  .services__top { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .scheme { margin: 0 0 0 auto; }
  .direction__head, .direction__wide, .direction__other { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .direction--construction { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); }
  .direction--construction .direction__head { display: block; }
  .direction--construction .direction__text { margin-top: var(--space-3); }
  .direction--construction .big-list { margin-top: 0; }
  .calc { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-8); align-items: end; }
  .includes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Поля: только линия снизу ---------- */
.field { display: block; min-width: 0; }
.field__label { display: block; color: var(--ink-2); font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.field__required { color: var(--pale); }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: var(--touch);
  padding: 6px 0 8px;
  font: inherit; color: inherit;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--ink);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-width: 2px; padding-bottom: 7px; }
.field select {
  padding-right: 28px;
  background: var(--icon-select) no-repeat right 2px center / 16px 10px;
}
.field textarea { resize: vertical; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom: 2px solid var(--err); padding-bottom: 7px; }
.field__error { margin-top: var(--space-1); color: var(--err); font-size: var(--type-small-size); line-height: var(--type-small-lh); }

.form__title {
  font-family: var(--font-head);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  letter-spacing: var(--type-title-track);
}
.form__fields { display: grid; gap: var(--space-5) var(--space-6); margin-top: var(--space-5); }
.form__submit {
  margin-top: var(--space-5);
  min-height: var(--touch);
  font-family: var(--font-head);
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.form__hint { margin-top: var(--space-1); color: var(--ink-2); max-width: var(--col-narrow); font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.form__notice {
  margin-top: var(--space-3);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  font-weight: var(--weight-strong);
}
.form__notice a { display: inline-flex; align-items: center; min-height: var(--touch); margin-block: -10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
  .form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field[data-field="comment"] { grid-column: 1 / -1; }
}

/* ---------- Контакты: слева кто и как, справа заявка ---------- */
.contacts__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.contacts__side .page__title { margin-bottom: var(--space-4); }
.contacts__phone {
  font-family: var(--font-head);
  font-size: var(--type-phone-fit-size);
  font-weight: var(--type-phone-weight);
  line-height: var(--type-phone-lh);
  letter-spacing: var(--type-phone-track);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  min-height: var(--touch);
}
.contacts__phone { display: block; }
.contacts__phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; }
.contacts__free, .contacts__telegram { margin-top: .5em; }
.contacts__telegram { margin-top: .2em; }
.contacts__info { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.contacts__address { color: var(--ink-2); }
.contacts__h2 {
  font-family: var(--font-text);
  font-size: inherit;
  font-weight: var(--weight-strong);
  letter-spacing: var(--type-body-track);
  line-height: inherit;
}
@media (min-width: 1000px) {
  .contacts__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: start; }
}

/* ---------- Про студию: наверху поле, ниже цельный лист, как на услугах ---------- */
.about__top { max-width: calc(var(--col-text) + var(--space-9)); padding-top: var(--space-7); }
.about__who {
  max-width: var(--col-text); margin-top: var(--space-5);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
}
.about__source { max-width: var(--col-text); margin-top: var(--space-3); color: var(--ink-2); }
.about__sheet {
  position: relative;
  margin: var(--space-7) calc(-1 * var(--gut) - var(--page-end)) calc(-1 * var(--space-8)) calc(-1 * var(--gut));
  padding: 0 calc(var(--gut) + var(--page-end)) var(--space-8) var(--gut);
  background: var(--paper);
}
.about__sheet::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--space-8);
  background: linear-gradient(to top, var(--paper), rgb(var(--paper-rgb) / 0));
  pointer-events: none;
}
.about__part { padding-top: var(--space-8); }
.about__groups { display: grid; gap: var(--space-7) var(--space-8); margin-top: var(--space-6); }
/* Название группы тихое, крупно сами направления: их и ищут глазами */
.about__group h3 {
  padding-bottom: var(--space-1);
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: var(--type-lead-size);
  font-weight: var(--weight-text);
  line-height: var(--type-lead-lh);
  letter-spacing: var(--type-lead-track);
}
.terms { margin: 0; }
.terms__row { padding-top: var(--space-4); }
.terms dt {
  font-family: var(--font-head);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  letter-spacing: var(--type-title-track);
}
.terms dd { max-width: var(--col-text); margin: var(--space-1) 0 0; color: var(--ink-2); }
.about__how { max-width: var(--col-text); margin-top: var(--space-3); }
.about__tracks { display: grid; gap: var(--space-7) var(--space-8); margin-top: var(--space-6); }
/* Этапы идут цепочкой сот: порядок здесь правда важен, номера не нужны */
.track__steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.track__step { position: relative; padding: 0 0 var(--space-5) var(--space-6); }
.track__step::before {
  content: ""; position: absolute; left: 0; top: .22em;
  width: var(--space-4); aspect-ratio: 1 / 1.1547;
  clip-path: var(--hex);
  background: var(--t3);
}
.track__step:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--space-4) / 2); top: calc(.22em + var(--space-4) * 1.1547 + var(--space-1)); bottom: calc(var(--space-1) - .22em);
  border-left: 1px solid var(--t2);
}
.track__name { font-weight: var(--weight-strong); }
.track__text { max-width: var(--col-narrow); color: var(--ink-2); }
.about__part--where .big-list { margin-top: var(--space-4); }
.about__next {
  max-width: var(--col-text);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
}
.about__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.about__line { margin-top: var(--space-7); }
.about__tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .about__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__group:last-child { grid-column: 1 / -1; }
  .about__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Не найдено и запасная страница ---------- */
.notfound { min-height: calc(100svh - var(--bar-h)); padding-top: var(--space-8); }
.notfound__text {
  max-width: var(--col-text); margin-bottom: var(--space-5);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
}
.notfound__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-top: var(--space-4); }
.notfound__hole { display: block; width: min(52vw, 220px); height: auto; margin-bottom: var(--space-6); }
@media (min-width: 900px) {
  .page.notfound .notfound__hole { position: absolute; right: calc(var(--gut) + var(--page-end)); top: var(--space-8); width: 22vw; margin: 0; }
}
.plain-page { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.plain-page a { display: inline-flex; align-items: center; min-height: var(--touch); }

@media (prefers-reduced-motion: reduce) {
  .tile__hex, .pf__hex { animation: none; }
  .pack__box, .scheme__cell polygon, .scheme__cell text, .tile__sheet img, .price-table thead th { transition: none; }
}