/* saltykov.tech: только то, что есть на самих страницах сайта. Тема и компоненты — /design/ (design/README.md). */

/* главная: имя на всю ширину, справа табличка прибора */
.hero.name { display: grid; grid-template-columns: minmax(0, 1fr) 240px; padding: 0; margin: 0 calc(-1 * var(--pad)); }
.hero.name > div:first-child { padding: 40px var(--pad) 32px; }
.hero.name h1 { font-size: clamp(56px, 10.5vw, 132px); font-weight: 750; line-height: .84; letter-spacing: -.055em; text-transform: uppercase; }
.plate { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: var(--pad); border-left: 1px solid var(--line); font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.plate .sq { width: 56px; height: 56px; background: var(--accent); margin-bottom: auto; }
.plate .dim { color: var(--muted); }

/* контакты: крупные строки, при наведении заливка акцентом */
.contact { list-style: none; }
.contact a {
  display: flex; justify-content: space-between; align-items: baseline; padding: 18px var(--pad);
  font-size: clamp(22px, 3.4vw, 36px); font-weight: 650; letter-spacing: -.03em; text-decoration: none;
}
.contact li + li a { border-top: 1px solid var(--border); }
.contact a span { font: 500 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.contact a:hover { background: var(--accent); color: var(--on-accent); }
.contact a:hover span { color: var(--on-accent); }

/* «нанять вдвоём»: строка-лид и по два контакта на человека */
.duo-lead { padding: 20px var(--pad); border-bottom: 1px solid var(--border); font-size: clamp(22px, 3.4vw, 36px); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }
.duo .links { display: flex; gap: 20px; margin-top: 10px; font: 500 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.duo .links a { text-decoration: none; }
.duo .links a:hover, .duo a.title:hover { color: var(--accent); }

@media (max-width: 760px) {
  .hero.name { grid-template-columns: 1fr; }
  .plate { border-left: 0; border-top: 1px solid var(--line); flex-direction: row; align-items: center; justify-content: space-between; }
  .plate .sq { width: 28px; height: 28px; margin: 0; }
}