/* Самовар: фарфор, кобальт и фрагменты росписи. Общий слой для всех страниц.
 * Орнамент занимает собственное место; текст и область будущей 3D-сцены свободны. */

html { scrollbar-color: var(--color-accent-ink) var(--color-paper); }
body { caret-color: var(--color-accent-ink); }
.wordmark::before { background-image: url("../assets/brand/samovar-mark-small.svg?v=1"); }
.faq summary h3 { font-weight: 400; font-size: var(--text-base); line-height: 1.5; }
.offer__terms { margin-bottom: var(--space-lg); color: var(--color-ink); max-width: 40em; }
::selection { background: var(--color-accent-ink); color: var(--color-paper); }

.nav-pill {
  background: var(--color-paper);
  border-color: var(--color-rule-strong);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-pill__links a, .btn--nav { font-size: var(--text-ui); }
.btn { border-radius: var(--radius-control); }
.btn--nav { border-radius: var(--radius-chip); }
.link-arrow::after { content: none; }

/* Короткий фрагмент используется один раз: стык изображения не является бесшовным. */
.brand-flourish, .head-hang::before, .page-head::after, .foot::before {
  display: block;
  background: url("../assets/brand/gzhel-frieze.webp") center 52% / 18rem auto no-repeat;
  pointer-events: none;
}
.hero-rule {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: var(--space-xl);
  padding-inline: var(--page-gutter);
  background: none;
}
.hero-rule::before, .hero-rule::after {
  content: "";
  flex: 1;
  height: var(--rule-hair);
  background: var(--color-accent-ink);
}
.brand-flourish { width: 10rem; height: 2rem; flex: none; }

.head-hang::before {
  content: "";
  width: 8rem;
  height: var(--space-lg);
  margin-block-end: var(--space-md);
}
.head-hang h2, .offer__display, .page-head h1, .prose h2 {
  font-family: var(--font-wordmark);
  font-weight: 400;
  color: var(--color-accent-ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}
.hero__display { text-wrap: balance; }
.page-head h1 { max-width: 28ch; }
.page-head::after {
  content: "";
  width: 12rem;
  height: 2rem;
  margin-block-start: var(--space-xl);
}
.crumbs, .page-meta { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }

.status-strip li { font-size: var(--text-ui); }
.status-strip li { line-height: 1.3; }
.data-route li { background: var(--color-paper-2); border-radius: var(--radius-panel); }
.data-route li:not(:last-child)::after { color: var(--color-accent-ink); }
.graphic-details summary, .faq summary { align-items: center; }
.faq summary::after, .graphic-details summary::after { color: var(--color-accent-ink); }
.prose blockquote { border-inline-start-width: var(--rule-hair); }
.related__list .r-title { color: var(--color-accent-ink); }

/* Цветок завершает приглашение. Собственная колонка исключает перекрытие текста. */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(8rem, 17vw, 16rem);
  column-gap: var(--space-xl);
  background: var(--color-paper-2);
  border-color: var(--color-rule-strong);
}
.offer > * { grid-column: 1; }
.offer .btn { justify-self: start; }
.offer::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  width: 100%;
  aspect-ratio: 1103 / 1426;
  background: url("../assets/brand/gzhel-branch.webp") center / contain no-repeat;
  pointer-events: none;
}
.foot::before {
  content: "";
  width: 8rem;
  height: var(--space-lg);
  margin-block-end: var(--space-lg);
}
.foot__line { font-size: var(--text-ui); }

@media (hover: hover) and (pointer: fine) {
  .related__list a:hover .r-title { color: var(--color-accent-hover); }
  .btn--primary:hover { transform: none; }
}
@media (max-width: 48rem) {
  .nav-pill__links { display: none; }
}
@media (max-width: 40rem) {
  .brand-flourish { width: 7rem; }
  .hero-rule { gap: var(--space-md); }
  .head-hang h2 { font-size: var(--text-xl); }
  .head-hang::before { width: 6rem; }
  .page-head::after { margin-block-start: var(--space-lg); width: 9rem; }
  .offer { grid-template-columns: minmax(0, 1fr); }
  .offer::after {
    grid-column: 1;
    grid-row: auto;
    width: 6rem;
    justify-self: end;
    margin-block-start: var(--space-lg);
  }
  .offer .btn { width: 100%; }
}