/* ПОСЛЕ: правки по скилу impeccable 4.0.4 (реальный прогон для ролика ДИЗАЙН, 16.08).
   Что скил забраковал на странице /gaidy/ и что сделано:
   1) пилюля-кикер над заголовком - у скила это прямой запрет («the heading carries its own
      weight»), убрана;
   2) одинаковые карточки как структура страницы - «cards are the lazy container», сетка
      заменена на типографический индекс с разделителями;
   3) шкала типографики: заголовок вырос, названия гайдов стали дисплейными, шаги веса видны;
   4) мера строки 65-75ch на описаниях, воздуха над заголовками больше, чем под ними;
   5) кнопки-обводки заменены на строку-действие с наведением. */

body {
  max-width: 900px;
  font-size: 17px;
  padding: 40px 22px 96px;
}

h1 {
  font-size: clamp(2.1rem, 6.2vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0.15em 0 0.5em;
  max-width: 18ch;
  text-wrap: balance;
}

/* 1. кикер над заголовком - запрет скила */
body > p.pill { display: none; }

body > h1 + p {
  max-width: 68ch;
  font-size: 1.06em;
  color: #c2cad5;
}

/* 2. вместо сетки одинаковых карточек - индекс */
.gcards {
  display: block;
  margin: 56px 0 0;
  border-top: 1px solid var(--line);
}

.gcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "word go" "what what";
  align-items: baseline;
  gap: 6px 32px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 30px 2px 32px;
  transition: background 180ms cubic-bezier(.16,.84,.44,1);
}

.gcard:hover { background: rgba(233, 229, 221, .03); }

.gcard .word {
  grid-area: word;
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-transform: none;
}

/* метка «новый» - в строку с названием, без отдельного бейджа-этикетки */
.gcard .gnew {
  grid-area: word;
  justify-self: start;
  align-self: start;
  position: relative;
  top: -1.35em;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  background: none;
  border: 0;
  padding: 0;
}

.gcard .what {
  grid-area: what;
  max-width: 70ch;
  margin: 10px 0 0;
  color: #aab3bf;
  font-size: 0.99em;
  line-height: 1.62;
}

.gcard .go { grid-area: go; margin: 0; }

/* 5. кнопка-обводка -> строка-действие */
.gcard .btn-line {
  border: 0;
  background: none;
  padding: 0;
  font-family: 'Unbounded', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--amber);
  white-space: nowrap;
}

.gcard .btn-line::after {
  content: " →";
  display: inline-block;
  transition: transform 220ms cubic-bezier(.16,.84,.44,1);
}

.gcard:hover .btn-line::after { transform: translateX(4px); }

/* воздух: над заголовком секции больше, чем под ним */
h2 { margin-top: 3.4em; margin-bottom: 0.9em; }