.page-head {
  padding-block: var(--sp-7);
  background: var(--c-brand-deep);
  color: var(--c-paper);
}

.page-head__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-family: var(--f-label); font-size: var(--fs-eyebrow); color: rgba(255, 255, 255, 0.5); }
.page-head__crumbs a:hover { color: var(--c-paper); }

.page-head__title {
  margin: var(--sp-4) 0 0;
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.page-head__note { margin: var(--sp-4) 0 0; max-width: 62ch; color: rgba(255, 255, 255, 0.72); }

.prose { max-width: 68ch; }
.prose > p:only-child { font-size: var(--fs-lead); color: var(--c-ink-soft); }
.prose h2 { margin: 0 0 var(--sp-4); font-family: var(--f-display); font-size: var(--fs-h2); font-weight: var(--fw-heading); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.prose p { margin: 0 0 var(--sp-4); color: var(--c-ink-soft); }
.prose p:last-child { margin-bottom: 0; }

.prose--doc h2 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-h3); }
.prose--doc h2:first-child { margin-top: 0; }

.split { display: grid; gap: var(--sp-6); }

@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; } }

.figure-grid { display: grid; gap: var(--sp-4); }

@media (min-width: 720px) { .figure-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.figure {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-paper);
}

.figure__slot {
  display: grid;
  place-items: center;
  height: 170px;
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-brand) 10%, transparent), color-mix(in srgb, var(--c-accent) 10%, transparent)),
    repeating-linear-gradient(45deg, var(--c-bone) 0 14px, var(--c-line-soft) 14px 15px);
  font-family: var(--f-label);
  font-size: var(--fs-eyebrow);
  color: var(--c-ink-muted);
}

.figure figcaption, .figure h3 { margin: 0; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); }
.figure p { margin: 0; font-size: 0.9375rem; color: var(--c-ink-soft); }

.fact-list { display: grid; gap: var(--sp-4); margin: 0; }
.fact-list div { display: grid; gap: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.fact-list dt { font-family: var(--f-label); font-size: var(--fs-eyebrow); color: var(--c-ink-muted); }
.fact-list dd { margin: 0; font-weight: var(--fw-strong); }

.map { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.map iframe { display: block; width: 100%; height: 420px; border: 0; }

.page-head__crumbs a { padding-block: 3px; }

.map__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

.map__address { margin: 0 0 var(--sp-4); color: var(--c-ink-soft); }

.page-head--image { position: relative; isolation: isolate; overflow: hidden; }
.page-head--image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--c-brand-deep) 30%, color-mix(in srgb, var(--c-brand-deep) 55%, transparent) 55%, transparent 80%),
    var(--page-head-image) right center / cover no-repeat;
}
.page-head--catalog { --page-head-image: url('../img/head-oil.jpg'); }
.page-head--about { --page-head-image: url('../img/head-tara.jpg'); }
.page-head--contacts { --page-head-image: url('../img/head-road.jpg'); }

@media (max-width: 719px) {
  .page-head--image::before {
    background:
      linear-gradient(90deg, var(--c-brand-deep) 45%, color-mix(in srgb, var(--c-brand-deep) 70%, transparent) 100%),
      var(--page-head-image) 75% center / cover no-repeat;
  }
}