/* derma-index — общий стиль главной и новых калькуляторов.
   Идея: бумага операционной (зеленовато-серая), одна тёмная краска как в гравюрах медицинских атласов,
   у каждого индекса — свой цвет из его клиники: VASI — свет лампы Вуда, SCORAD — эритема.
   Узор папиллярных линий (дерматоглифика) — единственный декоративный элемент. */
:root {
  --paper: #e6ece8;
  --paper-2: #f3f6f4;
  --sheet: #fbfcfb;
  --ink: #0f2e2b;
  --ink-2: #3b5551;
  --ink-3: #647a76;
  --rule: #c3d0cb;
  --rule-strong: #9fb2ac;
  --ridge: #a9bdb6;
  --vasi: #4b3bc4;
  --scorad: #b3263d;
  --scorad-soft: #f3dade;
  --dlqi: #1d5f8a;
  --mild: #4f7d4a;
  --moderate: #b26a12;
  --severe: #b3263d;
  --off: #8d9c98;

  --display: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.3125rem;
  --fs-4: 1.75rem;
  --gut: clamp(1rem, 4vw, 3.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: var(--fs-1); line-height: 1.55;
  font-feature-settings: 'tnum' 1;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 0.5rem; z-index: 20; background: var(--sheet); padding: 0.5rem 0.75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Первый экран: компактная полоса, список индексов виден сразу ---------- */
.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(11rem, 0.75fr);
  gap: 1.5rem 2.5rem; align-items: end;
  padding: 1.75rem var(--gut) 1.6rem;
}
.hero h1 {
  font-family: var(--display); font-weight: 800; text-wrap: balance;
  font-size: clamp(2.6rem, 4.6vw, 4.3rem); line-height: 0.88; letter-spacing: -0.005em;
}
.hero .lead { font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2); max-width: 30rem; }
.hero .count { margin-top: 0.8rem; color: var(--ink-3); font-size: var(--fs-0); display: flex; align-items: center; gap: 0.6rem; }
.hero .count::before { content: ''; width: 1.75rem; height: 1px; background: var(--ink-3); }
.ridges {
  align-self: stretch; min-height: 10.5rem; margin: -1.75rem 0 -1.6rem; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.ridges { position: relative; }
.ridges svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ridges path { fill: none; stroke: var(--ridge); stroke-width: 2.4; stroke-linecap: round; }

/* ---------- Список индексов ---------- */
.register { padding: 0 var(--gut) 4rem; }
.register { padding-top: 0.25rem; }
.register h2 {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-4); line-height: 1;
  padding-bottom: 0.9rem; border-bottom: 2px solid var(--ink);
}
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--rule); }
.row > a, .row > div {
  display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr) 6.5rem 6.5rem;
  gap: 1.5rem; align-items: center; padding: 0.7rem 0; text-decoration: none; color: inherit; position: relative;
}
.acr {
  font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 0.85;
  letter-spacing: -0.01em; transition: color 0.35s var(--ease-out), translate 0.45s var(--ease-out);
}
.about > span { display: block; }
.about .tag { display: inline-block; }
.about .disease { font-weight: 600; font-size: var(--fs-2); }
.about .what { color: var(--ink-2); max-width: 46ch; margin-top: 0.2rem; }
.range { font-size: var(--fs-0); color: var(--ink-3); }
.range b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--ink-2); }
.plate { width: 6.5rem; aspect-ratio: 1; justify-self: end; position: relative; }
.plate img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block; transition: transform 0.6s var(--ease-out), filter 0.4s; }
.plate.flip img { scale: -1 1; }
.go {
  position: absolute; right: 0; bottom: 0.9rem; font-size: var(--fs-0); font-weight: 600;
  background: var(--ink); color: var(--paper-2); padding: 0.3rem 0.75rem; border-radius: 2rem;
  opacity: 0; translate: 0 0.4rem; transition: opacity 0.25s, translate 0.35s var(--ease-out);
}
.row.ready > a:hover .acr, .row.ready > a:focus-visible .acr { color: var(--c); translate: 0.35rem 0; }
.row.ready > a:hover .plate img, .row.ready > a:focus-visible .plate img { transform: scale(1.06); }
.row.ready > a:hover .go, .row.ready > a:focus-visible .go { opacity: 1; translate: 0 0; }
.row.ready > a:focus-visible { outline-offset: -2px; }

.row.soon .acr { color: #bccac5; }
.row.soon .about, .row.soon .range { opacity: 0.55; }
.row.soon .plate img { filter: grayscale(1); opacity: 0.35; }
.tag {
  display: inline-block; margin-top: 0.45rem; font-size: var(--fs-0); font-weight: 600; color: var(--ink-3);
  border: 1px dashed var(--rule-strong); border-radius: 2rem; padding: 0.1rem 0.6rem;
}

.foot { padding: 1.5rem var(--gut) 2.5rem; color: var(--ink-3); font-size: var(--fs-0); max-width: 80ch; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) 6rem; gap: 0.9rem 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .hero .lead-box { grid-column: 1 / -1; }
  .ridges { grid-column: 2; grid-row: 1; min-height: 6rem; margin: -0.5rem 0; }
  .row > a, .row > div { grid-template-columns: minmax(0, 1fr) 6rem; gap: 0.4rem 1rem; }
  .acr { grid-column: 1; }
  .about { grid-column: 1; }
  .range { grid-column: 1; }
  .plate { grid-column: 2; grid-row: 1 / span 3; width: 6rem; align-self: start; }
  .go { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}