/* /razrabotchik — персональная страница разработчика. Всё заскоуплено под #rz,
   чтобы не задевать общие стили портала (article.css грузится первым).
   Палитра проекта: paper #F4F3EE, ink #15181C, lime #C8F048.
   Лайм на странице: 4 применения — линия у надзаголовка, кнопка в hero,
   последний шаг цикла, кнопка в контактах. */

#rz{
  --rz-paper:#F4F3EE; --rz-ink:#15181C; --rz-lime:#C8F048; --rz-lime-ink:#161a08;
  --rz-surface:#fff; --rz-line:#E2E0D7; --rz-muted:#5F666D;
  --rz-ink-line:rgba(244,243,238,.16); --rz-ink-muted:rgba(244,243,238,.62);
  --rz-wrap:1180px; --rz-pad:clamp(20px,5vw,48px);
  --rz-band-y:clamp(56px,7vw,104px);
  font-family:'Inter Tight',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--rz-ink);
}
#rz *{box-sizing:border-box;min-width:0}

/* full-bleed банды + одна контентная сетка внутри */
#rz .rz-band{padding:var(--rz-band-y) 0;background:var(--rz-paper)}
#rz .rz-band-alt{background:#EFEEE7}
#rz .rz-band-ink{background:var(--rz-ink);color:var(--rz-paper)}
#rz .rz-wrap{max-width:var(--rz-wrap);margin-inline:auto;padding-inline:var(--rz-pad);width:100%}

/* типографика */
#rz .rz-h1{font-size:clamp(32px,4.6vw,60px);line-height:1.04;letter-spacing:-.025em;font-weight:800;
  margin:0 0 20px;text-wrap:balance;hyphens:manual;max-width:16ch}
#rz .rz-h2{font-size:clamp(24px,2.7vw,36px);line-height:1.12;letter-spacing:-.02em;font-weight:800;
  margin:0 0 28px;text-wrap:balance;hyphens:manual}
#rz .rz-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#3A4048;margin:0 0 18px;
  max-width:52ch;text-wrap:pretty}
#rz .rz-p{font-size:clamp(16px,1.25vw,18px);line-height:1.65;margin:0 0 16px;max-width:68ch;text-wrap:pretty}
#rz .rz-eyebrow{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rz-muted);margin:0 0 20px;
  display:flex;align-items:center;gap:12px}
#rz .rz-eyebrow::before{content:"";width:40px;height:3px;background:var(--rz-lime);border-radius:2px}
#rz .rz-meta{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:13.5px;
  color:var(--rz-muted);margin:0 0 28px}

/* кнопки */
#rz .rz-cta{display:flex;flex-wrap:wrap;gap:12px}
#rz .rz-btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:12px;
  font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid var(--rz-ink);
  color:var(--rz-ink);background:transparent;transition:background .16s,color .16s,transform .16s}
#rz .rz-btn:hover{transform:translateY(-1px)}
#rz .rz-btn-lime{background:var(--rz-lime);border-color:var(--rz-lime);color:var(--rz-lime-ink)}
#rz .rz-btn-ghost:hover{background:var(--rz-ink);color:var(--rz-paper)}
#rz .rz-band-ink .rz-btn-lime:hover{filter:brightness(1.06)}

/* ── HERO: 2 колонки на десктопе ── */
#rz .rz-hero{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
#rz .rz-hero-aside{border:1.5px solid var(--rz-line);border-radius:18px;background:var(--rz-surface);
  padding:clamp(20px,2.4vw,30px)}
#rz .rz-aside-h{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rz-muted);margin:0 0 18px}
#rz .rz-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#rz .rz-step{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--rz-line)}
#rz .rz-step:last-child{border-bottom:0;padding-bottom:0}
#rz .rz-step-n{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12.5px;
  color:var(--rz-muted);flex:none}
#rz .rz-step-t{font-size:17px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
#rz .rz-step.is-last .rz-step-t{box-shadow:inset 0 -.55em 0 var(--rz-lime)}

/* ── МЕТРИКИ: 4 колонки на десктопе ── */
#rz .rz-metrics{display:grid;grid-template-columns:1fr;gap:0}
#rz .rz-metric{padding:22px 0;border-top:1px solid var(--rz-ink-line)}
#rz .rz-metric-n{font-size:clamp(28px,3vw,40px);line-height:1.06;letter-spacing:-.03em;font-weight:800;
  margin-bottom:10px;text-wrap:balance}
#rz .rz-metric-d{font-size:15.5px;line-height:1.45;color:var(--rz-ink-muted);max-width:30ch;text-wrap:pretty}

/* ── две колонки «ярлык + текст» (подход, контакты) ── */
#rz .rz-two{display:grid;grid-template-columns:1fr;gap:28px}
#rz .rz-two-label .rz-h2{margin-bottom:16px}

/* ── СТЕК: 2 колонки групп на десктопе ── */
#rz .rz-stack{display:grid;grid-template-columns:1fr;gap:26px 44px}
#rz .rz-stack-h{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rz-muted);margin:0 0 12px}
#rz .rz-badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
#rz .rz-badge{border:1.5px solid var(--rz-line);background:var(--rz-surface);border-radius:999px;
  padding:7px 14px;font-size:14.5px;font-weight:500;line-height:1.2;overflow-wrap:anywhere}
#rz .rz-badges-sm .rz-badge{font-size:13px;padding:5px 11px;border-color:var(--rz-line)}

/* ── ПРОЕКТЫ: 2 колонки на десктопе ── */
#rz .rz-projects{display:grid;grid-template-columns:1fr;gap:20px}
#rz .rz-proj{border:1.5px solid var(--rz-line);border-radius:18px;background:var(--rz-surface);
  padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:16px;
  transition:border-color .16s,box-shadow .16s}
#rz .rz-proj:hover{border-color:var(--rz-ink);box-shadow:0 12px 30px rgba(20,24,28,.07)}
#rz .rz-proj-n{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12.5px;
  color:var(--rz-muted);margin:0}
#rz .rz-proj-t{font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.02em;font-weight:700;
  margin:0;text-wrap:balance}
#rz .rz-proj-sub{display:block;font-size:15.5px;font-weight:500;color:var(--rz-muted);
  letter-spacing:0;margin-top:6px;text-wrap:pretty}
/* Близость: ярлык прижат к своему тексту (3px), между парами — 16px.
   Иначе dt читается как оторванный от dd. */
#rz .rz-proj-dl{margin:0}
#rz .rz-proj-dl dt{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rz-muted);margin:0 0 3px}
#rz .rz-proj-dl dd{margin:0 0 16px;font-size:16px;line-height:1.6;max-width:64ch;text-wrap:pretty}
#rz .rz-proj-dl dd:last-child{margin-bottom:0}
#rz .rz-proj-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:4px}
#rz .rz-link{font-weight:600;font-size:15.5px;color:var(--rz-ink);text-decoration:none;
  border-bottom:2px solid var(--rz-line);padding-bottom:2px;overflow-wrap:anywhere}
#rz .rz-link:hover{border-bottom-color:var(--rz-ink)}

/* ── КОНТАКТЫ ── */
#rz .rz-band-contacts .rz-h2{margin-bottom:12px}
#rz .rz-contacts-note{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:13px;
  color:var(--rz-ink-muted);margin:0 0 24px}
#rz .rz-contacts{display:grid;gap:0}
#rz .rz-contact{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;padding:18px 0;
  border-top:1px solid var(--rz-ink-line);text-decoration:none;color:var(--rz-paper)}
#rz .rz-contact:last-child{border-bottom:1px solid var(--rz-ink-line)}
#rz .rz-contact-k{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rz-ink-muted);flex:none;min-width:96px}
#rz .rz-contact-v{font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
#rz .rz-contact:hover .rz-contact-v{text-decoration:underline;text-underline-offset:4px}

/* Единообразие: на узком экране длинное значение переносилось под ярлык только
   в одной строке контактов — ставим ярлык над значением во ВСЕХ строках. */
@media (max-width:559px){
  #rz .rz-contact{flex-direction:column;gap:5px}
  #rz .rz-contact-k{min-width:0}
}

/* ── планшет ── */
@media (min-width:700px){
  #rz .rz-metrics{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  #rz .rz-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  #rz .rz-projects{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── ДЕСКТОП: собственная композиция, не растянутая мобила ── */
@media (min-width:1024px){
  #rz .rz-hero{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(48px,5vw,80px);align-items:center}
  #rz .rz-metrics{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(28px,3vw,48px)}
  #rz .rz-two{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(40px,5vw,80px)}
  #rz .rz-two-label{position:sticky;top:96px;align-self:start}
  #rz .rz-two-contacts .rz-two-label{position:static}
  #rz .rz-projects{gap:24px}
  #rz .rz-stack{gap:34px clamp(40px,5vw,72px)}
}
@media (min-width:1280px){
  #rz .rz-h1{max-width:15ch}
}

@media (prefers-reduced-motion:reduce){
  #rz .rz-btn,#rz .rz-proj{transition:none}
  #rz .rz-btn:hover{transform:none}
}

/* Подвал сайта на странице выключен (его дублировала секция «Контакты») —
   последний банд получает чуть больше воздуха снизу, чтобы страница
   не обрывалась сразу под последней строкой. */
#rz .rz-band-contacts{padding-bottom:calc(var(--rz-band-y) * 1.25)}

/* На 1280 три CTA (Telegram + hh.ru + Кейсы) не влезали в строку на 16px и
   ломались 2+1 рваным блоком — поджимаем горизонтальные поля только на десктопе,
   тап-цели мобилы не трогаем. */
@media (min-width:1024px){
  #rz .rz-cta .rz-btn{padding-inline:18px}
}

/* ── Портрет из админки (Контент → Особые блоки) ──────────────────────────
   Есть фото → оно занимает правую колонку hero, а «Полный цикл» уходит
   горизонтальной полосой под hero. Пусто → фото просто нет. */
#rz .rz-hero-photo{margin:0;border-radius:18px;overflow:hidden;border:1.5px solid var(--rz-line);
  background:#EFEEE7;line-height:0}
#rz .rz-hero-photo img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}

#rz .rz-flow{margin-top:clamp(40px,4.5vw,64px);border-top:1.5px solid var(--rz-line);padding-top:22px}
#rz .rz-flow-h{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rz-muted);margin:0 0 18px}
#rz .rz-flow-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
#rz .rz-flow-item{display:flex;align-items:baseline;gap:12px}
#rz .rz-flow-n{font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12.5px;
  color:var(--rz-muted);flex:none}
#rz .rz-flow-t{font-size:17px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
#rz .rz-flow-item.is-last .rz-flow-t{box-shadow:inset 0 -.55em 0 var(--rz-lime)}

@media (min-width:700px){
  #rz .rz-flow-list{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
  #rz .rz-flow-item{flex-direction:column;gap:8px;align-items:flex-start}
}
@media (min-width:1024px){
  /* Колонки НЕ переопределяем: при 1.3fr текстовая колонка сужалась, H1 разъезжался
     на 5 строк, а три CTA снова ломались 2+1. Оставляем 1.42fr — портрет ~420px. */
  #rz .rz-hero:has(.rz-hero-photo){align-items:start}
}