/* ═══════════════════════════════════════════════════════════════════
   Лендинг Софико Цицкарава
   Каскадные слои задают приоритет раз и навсегда: правила ниже по
   списку всегда перекрывают верхние, поэтому специфичность селекторов
   больше ни на что не влияет и ничего не «перебивает» случайно.
   ═══════════════════════════════════════════════════════════════════ */
@layer fonts, tokens, base, layout, blocks, motion, adapt;

/* ─────────────────── СЛОЙ: шрифты ─────────────────── */
@layer fonts {
  /* Вариативные: один файл покрывает все начертания от 400 до 600 */
  @font-face{
    font-family:'Piazzolla';
    src:url('fonts/piazzolla-var.woff2') format('woff2');
    font-weight:400 600; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Piazzolla';
    src:url('fonts/piazzolla-italic-var.woff2') format('woff2');
    font-weight:400; font-style:italic; font-display:swap;
  }
  @font-face{
    font-family:'Golos Text';
    src:url('fonts/golos-var.woff2') format('woff2');
    font-weight:400 600; font-style:normal; font-display:swap;
  }

  /* Системные запасные, подогнанные по метрикам: пока грузится основной
     шрифт, текст занимает ровно столько же места — вёрстка не прыгает. */
  @font-face{
    font-family:'Piazzolla Fallback';
    src:local('Georgia'), local('Times New Roman'), local('Times');
    size-adjust:99.2%; ascent-override:111%; descent-override:31%; line-gap-override:0%;
  }
  @font-face{
    font-family:'Golos Fallback';
    src:local('Helvetica Neue'), local('Arial'), local('Segoe UI');
    size-adjust:102.1%; ascent-override:98%; descent-override:22%; line-gap-override:0%;
  }
}

/* ─────────────────── СЛОЙ: токены ─────────────────── */
@layer tokens {
  :root{
    color-scheme: light;

    /* Цвета в OKLCH: равномерное пространство, поэтому светлота и
       насыщенность меняются предсказуемо, а оттенок не «плывёт».
       light-dark() сам выбирает значение по теме системы. */
    --paper:       light-dark(oklch(98.8% 0.003 106), oklch(17.5% 0.009 165));
    --surface:     light-dark(oklch(100%  0     0),   oklch(21.5% 0.010 165));
    --ink:         light-dark(oklch(23.0% 0.014 163), oklch(93.5% 0.006 150));
    --ink-2:       light-dark(oklch(43.8% 0.017 162), oklch(77.5% 0.013 158));
    --ink-3:       light-dark(oklch(54.3% 0.018 166), oklch(64.5% 0.015 162));
    --hairline:    light-dark(oklch(92.1% 0.007 146), oklch(27.5% 0.011 164));
    --hair-2:      light-dark(oklch(85.1% 0.010 155), oklch(34.5% 0.013 163));
    --accent:      light-dark(oklch(39.3% 0.072 170), oklch(78.0% 0.105 165));
    --accent-soft: light-dark(oklch(95.0% 0.008 165), oklch(26.0% 0.023 168));
    /* текст на плашке акцентного цвета — контрастен в обеих темах */
    --on-accent:   light-dark(oklch(98.8% 0.003 106), oklch(17.5% 0.009 165));

    --serif:'Piazzolla','Piazzolla Fallback',Georgia,serif;
    --sans:'Golos Text','Golos Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

    /* Шаг сетки отступов, кратно 4 */
    --sp-3xs:4px; --sp-2xs:8px; --sp-xs:12px; --sp-s:16px; --sp-m:24px;
    --sp-l:32px; --sp-xl:44px; --sp-2xl:64px; --sp-3xl:88px;

    --w:1200px;
    --pad:clamp(20px,4vw,48px);
    --ease:cubic-bezier(.22,1,.36,1);
  }
}

/* ─────────────────── СЛОЙ: база ─────────────────── */
@layer base {
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

  html{
    scroll-behavior:smooth;
    /* полоса прокрутки не дёргает вёрстку при переходе между экранами */
    scrollbar-gutter:stable;
  }

  body{
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
    font-size:16.5px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  a{color:inherit}
  ::selection{background:var(--accent);color:var(--on-accent)}

  p{
    /* убирает висячие строки из одного слова в конце абзаца */
    text-wrap:pretty;
  }

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:500;
    text-wrap:balance;
    overflow-wrap:break-word;
  }

  :is(a,button,summary):focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:2px;
  }

  /* Кириллица без переносов ломает узкие экраны — разрешаем перенос */
  h1{hyphens:auto}

  .vh{
    position:absolute;inline-size:1px;block-size:1px;margin:-1px;
    padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
}

/* ─────────────────── СЛОЙ: раскладка ─────────────────── */
@layer layout {
  .wrap{
    max-inline-size:var(--w);
    margin-inline:auto;
    padding-inline:var(--pad);
  }

  section.row{padding-block:clamp(64px,9vh,110px) 0}

  /* Первая секция внутренней страницы не нуждается в большом отступе
     сверху — над ней уже шапка и хлебные крошки, а не другая секция */
  main > section.row:first-child{padding-block-start:var(--sp-l)}

  .row-grid{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:clamp(28px,4vw,64px);
    border-block-start:1px solid var(--hairline);
    padding-block-start:var(--sp-l);
  }

  /* Секции ниже первого экрана браузер не отрисовывает, пока до них
     не дошли: страница появляется быстрее. Заданная высота-заглушка
     не даёт полосе прокрутки скакать. */
  section.row:not(#help){
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
}

/* ─────────────────── СЛОЙ: блоки ─────────────────── */
@layer blocks {

  /* ── микротипографика ── */
  .label{
    font-size:11px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-3);
  }
  .num{font-variant-numeric:tabular-nums}

  /* ── шапка ── */
  header{
    position:sticky;inset-block-start:0;z-index:50;
    background:color-mix(in oklab, var(--paper) 92%, transparent);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-block-end:1px solid var(--hairline);
  }

  .top{
    display:flex;align-items:center;gap:var(--sp-s);block-size:64px;

    & .btn{
      margin-inline-start:var(--sp-s);
      position:relative;

      &::before{
        content:"";position:absolute;
        inset-inline-start:calc(-1 * var(--sp-s));
        inset-block-start:50%;translate:0 -50%;
        inline-size:1px;block-size:26px;background:var(--hairline);
      }
    }
  }

  .wordmark{
    display:flex;align-items:center;align-self:stretch;
    text-decoration:none;font-family:var(--serif);font-weight:600;
    font-size:17px;letter-spacing:.01em;white-space:nowrap;

    /* гранат с короной — знак из орнамента героя */
    & .mark{
      block-size:26px;inline-size:auto;flex:none;
      margin-inline-end:9px;
      fill:none;stroke:var(--accent);
      stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    }

    & span{
      color:var(--ink-3);font-family:var(--sans);font-weight:400;
      font-size:12px;margin-inline-start:10px;letter-spacing:.08em;
    }
  }

  nav.main{
    display:flex;gap:26px;margin-inline-start:auto;

    /* переключатель языка — продолжение меню, отделён линейкой */
    & .lang{
      display:flex;gap:11px;align-items:center;
      margin-inline-start:2px;padding-inline-start:20px;
      border-inline-start:1px solid var(--hairline);

      & a{font-size:12px;letter-spacing:.08em}
      & a[aria-current]{color:var(--ink);font-weight:600;border-block-end-color:transparent}
    }

    & a{
      text-decoration:none;font-size:14px;color:var(--ink-2);
      padding-block:4px;
      border-block-end:1px solid transparent;
      transition:color .2s, border-color .2s;

      &:hover{color:var(--ink);border-block-end-color:var(--ink)}
      &:active{opacity:.7}
    }
  }

  .btn{
    display:inline-block;
    background:var(--accent);color:var(--on-accent);
    font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.01em;
    text-decoration:none;
    padding:12px 24px;
    border:1px solid var(--accent);
    cursor:pointer;
    transition:background .2s, border-color .2s, color .2s;

    &:hover{
      background:color-mix(in oklab, var(--accent) 78%, black);
      border-color:color-mix(in oklab, var(--accent) 78%, black);
    }
    &:active{translate:0 1px}
    &.big{padding:16px 34px;font-size:15.5px}
  }

  /* ── первый экран ── */
  .hero{padding-block:clamp(44px,6vh,76px) clamp(72px,11vh,116px)}

  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(32px,5vw,72px);
    align-items:center;
  }

  .eyebrow{
    margin-block-end:var(--sp-m);
    & .label{color:var(--accent)}
  }

  /* Виноградная лоза — рисованный акцент над заголовком. Тот же почерк,
     что у анатомической схемы: линия одной толщины, ничего лишнего. */
  .vine{
    display:block;
    inline-size:208px;block-size:auto;
    margin-block-end:var(--sp-m);
    fill:none;
    stroke:var(--accent);
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .vine-leaf{stroke-width:1.3}
  .vine-fl{stroke-width:1.2}
  .vine-seed{fill:var(--accent);stroke:none}

  h1{
    font-size:clamp(38px,6.4vw,86px);
    line-height:1.02;
    letter-spacing:-.022em;

    & em{font-style:italic;font-weight:400}
  }
  .h1-line{display:block;overflow:hidden}

  .lede{
    margin-block-start:30px;
    max-inline-size:52ch;
    font-size:17.5px;line-height:1.75;color:var(--ink-2);

    & b{color:var(--ink);font-weight:500}
  }

  .cta-row{
    display:flex;align-items:center;gap:28px;
    margin-block-start:38px;flex-wrap:wrap;
  }

  .textlink{
    display:inline-block;font-size:15px;text-decoration:none;color:var(--ink);
    border-block-end:1px solid var(--ink-3);
    padding-block:20px 2px;margin-block-start:-20px;
    transition:border-color .2s, color .2s;

    &:hover{color:var(--accent);border-block-end-color:var(--accent)}
    &:active{opacity:.7}
  }

  /* ── анатомическая схема ── */
  .anat{
    position:relative;

    & svg{inline-size:100%;block-size:auto;display:block}

    & .draw{
      fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;

      &.thin{stroke-width:1.4;stroke:var(--ink-2)}
    }

    & .c-term{font-size:13px;font-weight:600;fill:var(--ink)}
    & .c-sub{font-size:11px;fill:var(--ink-3)}
    & .c-line{stroke:var(--hair-2);stroke-width:1}
    & .c-dot{fill:var(--accent)}
    & text{font-family:var(--sans)}

    & figcaption{
      margin-block-start:14px;
      display:flex;gap:10px;align-items:baseline;
      font-size:12.5px;color:var(--ink-3);

      & b{
        font-weight:600;color:var(--ink-2);font-size:11px;
        letter-spacing:.14em;text-transform:uppercase;
      }
    }
  }

  /* ── строка фактов ── */
  .facts{
    border-block:1px solid var(--hairline);
    /* контейнерный запрос: ячейки подстраиваются под ширину самой
       строки фактов, а не под ширину всего экрана */
    container:facts / inline-size;
  }

  .facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}

  .fact{
    padding-block:26px;
    padding-inline:0 28px;

    & + .fact{
      border-inline-start:1px solid var(--hairline);
      padding-inline-start:28px;
    }

    & b{
      font-family:var(--serif);font-weight:500;font-size:30px;
      line-height:1;display:block;margin-block-end:var(--sp-2xs);
    }

    & span{
      font-size:13px;color:var(--ink-2);line-height:1.45;
      display:block;max-inline-size:22ch;
    }
  }

  /* ── боковая рубрика секции ── */
  .rubric{
    position:sticky;inset-block-start:96px;align-self:start;

    & .label{color:var(--ink)}

    & p{
      font-size:13px;color:var(--ink-3);
      margin-block-start:10px;line-height:1.6;max-inline-size:24ch;
    }
  }

  h2{
    font-size:clamp(26px,3.4vw,44px);
    line-height:1.12;letter-spacing:-.015em;
    margin-block-end:var(--sp-s);
  }

  .kicker{max-inline-size:58ch;color:var(--ink-2);font-size:16.5px}

  /* Заголовок внутренней страницы: по смыслу h1, по виду — как h2,
     потому что крупный «геройский» кегль нужен только на главной */
  h1.page-title{
    font-size:clamp(26px,3.4vw,44px);
    line-height:1.12;letter-spacing:-.015em;
    margin-block-end:var(--sp-s);
  }

  /* ── с чем помогаю ── */
  .help-list{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(28px,4vw,64px);
    margin-block-start:38px;
  }

  .help-item{
    border-block-start:1px solid var(--hairline);
    padding-block:20px 22px;

    & h3{font-size:17px;font-weight:600;margin-block-end:5px;font-family:var(--sans)}
    & p{font-size:14.5px;color:var(--ink-2);line-height:1.6;max-inline-size:44ch}
  }

  /* На телефоне список жалоб — самый длинный блок страницы. Плотная
     сетка в две колонки укорачивает его вдвое, не выкидывая ни одного
     пункта: заголовки остаются, описания прячутся под тап. */
  @media (width <= 640px){
    .help-list{
      grid-template-columns:repeat(2,minmax(0,1fr));
      column-gap:var(--sp-s);
    }

    .help-item{
      padding-block:14px 16px;

      & h3{font-size:15.5px;line-height:1.3}
      & p{font-size:13.5px;line-height:1.5;margin-block-start:4px}
    }
  }


  /* ── компактный список состояний на главной ── */
  .help-compact{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 clamp(20px,3vw,48px);
    margin-block-start:var(--sp-m);

    & li{border-block-start:1px solid var(--hairline)}

    & a{
      display:block;
      padding-block:13px;
      font-size:15.5px;font-weight:500;
      color:var(--ink);text-decoration:none;
      transition:color .2s;

      &::after{content:" →";color:var(--ink-3);font-weight:400}
      &:hover{color:var(--accent)}
      &:hover::after{color:var(--accent)}
      &:active{opacity:.7}
    }
  }

  .help-foot{
    margin-block-start:26px;font-size:14.5px;color:var(--ink-2);max-inline-size:60ch;
    & b{font-weight:600;color:var(--ink)}
  }

  /* ── приём и цены ── */
  .menu{margin-block-start:var(--sp-l)}

  .menu-row{
    border-block-start:1px solid var(--hairline);
    padding-block:var(--sp-m);

    &:last-child{border-block-end:1px solid var(--hairline)}

    & p{
      margin-block-start:var(--sp-2xs);
      font-size:14.5px;color:var(--ink-2);max-inline-size:64ch;
    }
  }

  .menu-line{
    display:flex;align-items:baseline;gap:14px;

    & h3{font-size:18px;font-weight:600;white-space:nowrap;font-family:var(--sans)}

    & .fill{
      flex:1;border-block-end:1px dotted var(--ink-3);
      translate:0 -5px;min-inline-size:40px;
    }

    & .price{
      font-family:var(--serif);font-size:20px;font-weight:500;white-space:nowrap;

      & small{
        font-family:var(--sans);font-size:12.5px;
        color:var(--ink-3);font-weight:400;margin-inline-start:6px;
      }
    }
  }

  .menu-note{
    margin-block-start:18px;font-size:12.5px;color:var(--ink-3);
    & em{font-style:normal;border-block-end:1px dotted var(--ink-3)}
  }

  /* ── подход ── */
  .principles p{
    max-inline-size:60ch;margin-block-end:18px;color:var(--ink-2);
    & b{color:var(--ink);font-weight:600}
  }

  .plate-fig{
    margin-block-start:46px;
    display:grid;
    grid-template-columns:minmax(240px,340px) minmax(0,1fr);
    gap:clamp(24px,4vw,56px);
    align-items:center;
    border-block-start:1px solid var(--hairline);
    padding-block-start:38px;

    & svg{inline-size:100%;block-size:auto;display:block}

    & .pf-caption{
      & b{
        display:block;font-family:var(--serif);font-size:20px;
        font-weight:500;margin-block-end:var(--sp-2xs);
      }
      & p{font-size:14.5px;color:var(--ink-2);max-inline-size:46ch}
    }
  }

  .plate-legend{
    margin-block-start:var(--sp-s);display:flex;flex-direction:column;gap:6px;

    & span{font-size:13.5px;color:var(--ink-2);display:flex;align-items:baseline;gap:10px}

    & i{
      font-style:normal;font-family:var(--serif);font-size:15px;
      color:var(--ink);min-inline-size:44px;font-weight:500;
    }
  }

  /* ── обо мне ── */
  .bio-grid{
    display:grid;
    grid-template-columns:minmax(220px,320px) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);
    container:bio / inline-size;
  }

  .photo{
    aspect-ratio:4/5;
    border:1px solid var(--hairline);
    background:var(--accent-soft);
    display:flex;align-items:flex-end;
    padding:14px;
    overflow:hidden;

    & .label{color:var(--ink-2)}

    /* настоящее фото заполняет рамку целиком */
    &:has(img){padding:0;border:none}
    & img{
      inline-size:100%;block-size:100%;
      object-fit:cover;display:block;
    }
  }

  /* Арочный портрет — единственная скруглённая форма на сайте,
     осознанный акцент: человек среди строгих линеек */
  .photo--arch{border-radius:999px 999px 6px 6px}

  /* портрет в герое: видно сразу при входе на страницу */
  .hero-photo{inline-size:100%;max-inline-size:380px;justify-self:end;margin:0}

  /* орнамент-дубль: живёт только в мобильной раскладке, у самой шапки */
  .vine--m{display:none}

  /* анатомическая схема в потоке страницы «С чем помогаю» */
  .anat--page{max-inline-size:520px;margin-block-start:var(--sp-l)}

  .bio p{
    max-inline-size:60ch;color:var(--ink-2);margin-block-end:var(--sp-s);
    & b{color:var(--ink);font-weight:600}
  }

  .cv{
    margin-block-start:28px;
    border-block-start:1px solid var(--hairline);
  }

  .cv-row{
    display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;
    border-block-end:1px solid var(--hairline);
    padding-block:14px;

    & dt{
      font-size:11px;font-weight:600;letter-spacing:.14em;
      text-transform:uppercase;color:var(--ink-3);padding-block-start:4px;
    }
    & dd{font-size:14.5px;color:var(--ink-2);max-inline-size:56ch}
  }

  .aside-quote{
    margin-block-start:30px;
    border-inline-start:2px solid var(--accent);
    padding:4px 0 4px 22px;
    /* кавычка выносится в поле — оптически ровный край текста (Safari) */
    hanging-punctuation:first;

    & p{
      font-family:var(--serif);font-style:italic;font-size:19px;
      line-height:1.5;color:var(--ink);max-inline-size:44ch;
    }
    & span{display:block;margin-block-start:8px;font-size:12.5px;color:var(--ink-3)}
  }

  /* ── отзывы ── */
  .quote-main{
    max-inline-size:30ch;font-family:var(--serif);font-weight:500;
    font-size:clamp(24px,3vw,36px);line-height:1.3;letter-spacing:-.01em;

    & .attr{
      display:block;margin-block-start:18px;font-family:var(--sans);
      font-weight:400;font-size:13.5px;color:var(--ink-3);
    }
  }

  .quote-sub{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(28px,4vw,64px);margin-block-start:var(--sp-xl);

    & blockquote{border-block-start:1px solid var(--hairline);padding-block-start:18px}
    & p{font-size:15px;color:var(--ink-2);max-inline-size:44ch}
    & span{display:block;margin-block-start:10px;font-size:13px;color:var(--ink-3)}
  }

  .stub-note{
    display:inline-block;margin-block-start:var(--sp-l);
    font-size:12px;color:var(--ink-3);
    border:1px dashed var(--hairline);padding:8px 14px;
  }

  /* ── вопросы ── */
  .faq{margin-block-start:var(--sp-xs)}

  details{
    border-block-start:1px solid var(--hairline);

    &:last-child{border-block-end:1px solid var(--hairline)}

    & summary{
      list-style:none;cursor:pointer;
      padding-block:22px;
      display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-m);
      font-size:17px;font-weight:500;
      transition:color .2s;

      &::-webkit-details-marker{display:none}
      &:hover{color:var(--accent)}
    }

    & .mark{
      font-family:var(--serif);font-size:22px;line-height:1;
      color:var(--ink-3);flex-shrink:0;
      transition:rotate .25s var(--ease);
    }

    &[open] .mark{rotate:45deg}
  }

  .faq-body{
    padding-block:0 var(--sp-m);
    font-size:15px;color:var(--ink-2);max-inline-size:62ch;
  }

  /* ── запись ── */
  .closing{padding-block:clamp(80px,12vh,140px)}

  .closing-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(32px,5vw,80px);
    border-block-start:1px solid var(--hairline);
    padding-block-start:var(--sp-xl);
  }

  .closing h2{font-size:clamp(34px,4.4vw,58px);margin-block-end:22px}
  .closing .kicker{margin-block-end:var(--sp-l)}

  .how{
    list-style:none;counter-reset:st;
    margin-block:0 var(--sp-l);
    border-block-start:1px solid var(--hairline);

    & li{
      counter-increment:st;
      position:relative;
      border-block-end:1px solid var(--hairline);
      padding-block:13px;
      padding-inline-start:44px;
      font-size:14.5px;color:var(--ink-2);

      /* номер выносим в поле абсолютом: текст пункта остаётся
         единым потоком и переносится по словам, а не по элементам */
      &::before{
        content:"0" counter(st);
        position:absolute;
        inset-inline-start:0;
        inset-block-start:13px;
        font-family:var(--serif);font-size:19px;line-height:1.4;
        color:var(--accent);
        font-variant-numeric:tabular-nums;
      }

      & b{color:var(--ink);font-weight:600}
    }
  }

  /* Два способа записи: карточки-ссылки вместо одной кнопки */
  .ways{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-s);
    margin-block-end:var(--sp-l);
  }

  .way{
    display:block;
    padding:18px 20px;
    text-decoration:none;
    border:1px solid var(--accent);
    background:var(--paper);
    transition:background .2s, color .2s, border-color .2s;

    &:hover{background:var(--accent);color:var(--on-accent)}
    &:hover .way__hint{color:var(--on-accent);opacity:.8}
    &:active{translate:0 1px}
  }

  .way__name{
    display:block;
    font-family:var(--serif);font-size:19px;font-weight:500;
    margin-block-end:2px;
  }

  .way__hint{
    display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2);
    transition:color .2s, opacity .2s;
  }

  .contact-list{border-block-start:1px solid var(--hairline)}

  .contact-row{
    display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--sp-s);
    border-block-end:1px solid var(--hairline);
    padding-block:15px;font-size:14.5px;

    & b{font-weight:600;font-size:14.5px}
    & span{color:var(--ink-2)}

    & a{
      display:inline-block;color:var(--ink);text-decoration:none;
      border-block-end:1px solid var(--ink-3);
      padding-block:16px 1px;margin-block-start:-16px;

      &:hover{color:var(--accent);border-block-end-color:var(--accent)}
      &:active{opacity:.7}
    }
  }

  /* Строки с живой ссылкой подсвечиваем меткой, строки-заглушки — нет.
     :has() позволяет стилизовать родителя по содержимому. */
  .contact-row:has(a) b{color:var(--ink)}
  .contact-row:not(:has(a)) b{color:var(--ink-3)}


  /* ── карточка «кто принимает» на главной ── */
  .teaser{
    display:grid;
    grid-template-columns:minmax(0,180px) minmax(0,1fr);
    gap:clamp(20px,3vw,40px);
    align-items:start;

    & h2{font-size:clamp(24px,2.6vw,32px);margin-block-end:var(--sp-xs)}
  }

  .teaser__photo{aspect-ratio:4/5}

  .teaser.teaser--text{grid-template-columns:1fr}

  .teaser__links{
    display:flex;flex-wrap:wrap;gap:var(--sp-m) var(--sp-l);
    margin-block-start:var(--sp-m);
  }

  /* ── хлебные крошки на внутренних страницах ── */
  .crumbs{
    max-inline-size:var(--w);margin-inline:auto;
    padding-inline:var(--pad);padding-block:var(--sp-s) 0;
    font-size:13px;color:var(--ink-3);
    display:flex;gap:var(--sp-2xs);align-items:center;

    & a{
      /* область нажатия расширена вертикально: на телефоне в ссылку
         нужно попадать пальцем, а не курсором */
      display:inline-flex;align-items:center;min-block-size:44px;
      color:var(--ink-2);text-decoration:none;
      border-block-end:1px solid transparent;

      &:hover{color:var(--accent);border-block-end-color:var(--accent)}
      &:active{opacity:.7}
    }

    & span[aria-hidden]{color:var(--hair-2)}
  }

  /* текущая страница в меню — подчёркнута */
  nav.main a[aria-current="page"]{
    color:var(--ink);
    border-block-end-color:var(--accent);
  }

  /* ── подвал ── */
  footer{
    border-block-start:1px solid var(--hairline);
    padding-block:30px 96px;
  }

  .foot{
    display:flex;justify-content:space-between;gap:var(--sp-m);
    flex-wrap:wrap;align-items:baseline;

    & small{font-size:12.5px;color:var(--ink-3);max-inline-size:60ch;line-height:1.6}
  }

  .foot-year{white-space:nowrap}

  .draft{
    position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:60;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
    background:var(--paper);border:1px solid var(--hairline);padding:7px 12px;
  }
}

/* ─────────────────── СЛОЙ: движение ─────────────────── */
@layer motion {
  @media (prefers-reduced-motion: no-preference){

    /* Появление первого экрана: срабатывает один раз при загрузке */
    .h1-line > span{
      display:block;
      animation:rise .9s var(--ease) backwards;
    }
    .h1-line:nth-child(2) > span{animation-delay:.08s}

    .lede{animation:fade .8s ease .45s backwards}
    .cta-row{animation:fade .8s ease .6s backwards}

    /* Отрисовка схемы желудка штрихом */
    .anat .draw{
      stroke-dasharray:1200;
      animation:draw 1.6s ease .2s backwards;
    }
    .anat .draw.thin{animation-delay:.7s}
    .anat .callout{animation:fade .6s ease backwards}
    .anat .callout:nth-of-type(1){animation-delay:1s}
    .anat .callout:nth-of-type(2){animation-delay:1.15s}
    .anat .callout:nth-of-type(3){animation-delay:1.3s}
    .anat .callout:nth-of-type(4){animation-delay:1.45s}

    /* Проявление блоков при прокрутке — привязано к положению элемента
       в окне, а не к таймеру. Считается в потоке компоновки браузера,
       поэтому не грузит основной поток и не требует ни строчки скрипта. */
    @supports (animation-timeline: view()){
      .row-grid, .plate-fig, .facts-grid, .closing-grid{
        animation:reveal linear both;
        animation-timeline:view();
        animation-range:entry 8% cover 26%;
      }
    }

    /* Плавное раскрытие вопроса: анимация к высоте auto стала возможна
       благодаря interpolate-size */
    @supports (interpolate-size: allow-keywords){
      :root{interpolate-size:allow-keywords}

      details::details-content{
        block-size:0;overflow:hidden;
        transition:block-size .3s var(--ease), content-visibility .3s allow-discrete;
      }
      details[open]::details-content{block-size:auto}
    }

    /* Переход между страницами: браузер сам сглаживает смену документа —
       сайт перестаёт «моргать» белым при каждом клике. */
    @supports (view-transition-name: none){
      header{view-transition-name:site-header}
      footer{view-transition-name:site-footer}

      ::view-transition-old(root){animation:fade .18s ease reverse}
      ::view-transition-new(root){animation:fade .26s ease}
    }
  }

  /* Правило верхнего уровня: включает переходы между страницами.
     Внутрь @media его вкладывать нельзя, поэтому уважение к
     prefers-reduced-motion задано анимациями выше. */
  @supports (view-transition-name: none){
    @view-transition{ navigation: auto }
  }

  @keyframes rise{from{translate:0 110%}}
  @keyframes fade{from{opacity:0}}
  @keyframes draw{from{stroke-dashoffset:1200}}
  @keyframes reveal{from{opacity:0;translate:0 18px}}
}

/* ─────────────────── СЛОЙ: адаптация ─────────────────── */
@layer adapt {

  /* Контейнерные запросы: элементы смотрят на свой контейнер */
  @container facts (inline-size < 640px){
    .fact b{font-size:24px}
    .fact{padding-block:18px;padding-inline:0 14px}
    .fact + .fact{padding-inline-start:14px}
  }

  @container bio (inline-size < 620px){
    .photo{max-inline-size:320px}
  }

  @media (width <= 1020px){
    .hero-grid{grid-template-columns:1fr;gap:56px}
    .anat{max-inline-size:520px}
    .hero-photo{order:-1;max-inline-size:300px;justify-self:start}
    .vine--m{display:block;order:-2;margin-block:0 -24px}
    .hero-copy .vine{display:none}

    .row-grid{grid-template-columns:1fr;gap:20px;padding-block-start:28px}
    .rubric{position:static}
    .rubric p{max-inline-size:none}

    .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fact:nth-child(3){grid-column:1/-1;border-inline-start:none;padding-inline-start:0}
    .fact:nth-child(-n+2){border-block-end:1px solid var(--hairline)}

    .closing-grid{grid-template-columns:1fr;gap:var(--sp-xl)}

    .top{flex-wrap:wrap;block-size:auto;padding-block-start:var(--sp-2xs);row-gap:0}
    .wordmark{align-self:auto;min-block-size:44px}

    nav.main{
      order:3;inline-size:100%;margin-inline-start:0;
      overflow-x:auto;gap:22px;padding-block-end:6px;
      -webkit-overflow-scrolling:touch;

      & a{white-space:nowrap;padding-block:10px 12px;flex-shrink:0}
    }

    .top .btn{
      margin-inline-start:auto;
      &::before{display:none}
    }
  }

  @media (width <= 640px){
    body{font-size:16px}

    /* Секции на телефоне стоят плотнее: экран и так узкий,
       большой воздух между блоками превращается в лишнюю прокрутку */
    section.row{padding-block:var(--sp-l) 0}
    .row-grid{padding-block-start:var(--sp-s)}
    h2{font-size:clamp(22px,5.5vw,28px);margin-block-end:var(--sp-2xs)}
    .hero{padding-block:var(--sp-s) var(--sp-xl)}
    .lede{margin-block-start:var(--sp-m);font-size:16px;line-height:1.6}
    .cta-row{margin-block-start:var(--sp-m);gap:var(--sp-s)}
    .closing{padding-block:var(--sp-2xl)}

    /* Список состояний — в две колонки: восемь пунктов укладываются
       в четыре строки вместо восьми */
    .help-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-s)}
    .help-compact a{padding-block:9px;font-size:14px;line-height:1.3}
    .help-compact a::after{content:""}

    /* Пояснение под рубрикой — редакторская подпись, а не содержание:
       на телефоне оно только удлиняет прокрутку */
    .rubric p{display:none}
    .rubric{margin-block-end:calc(-1 * var(--sp-2xs))}

    /* Строка цифр: два ряда по два, плотнее */
    .fact{padding-block:11px}
    .fact b{font-size:22px;margin-block-end:2px}
    .fact span{font-size:12.5px;line-height:1.35}

    /* Карточка врача: портрет рядом с текстом, а не над ним */
    .teaser{grid-template-columns:96px minmax(0,1fr);gap:var(--sp-s);align-items:start}
    .teaser__photo{max-inline-size:96px}
    .teaser.teaser--text{grid-template-columns:1fr}
    .teaser h2{font-size:21px}
    .teaser .kicker{font-size:14.5px;line-height:1.5}
    .teaser__links{gap:var(--sp-2xs) var(--sp-m);margin-block-start:var(--sp-xs)}

    /* Блок записи и подвал плотнее */
    .contact-row{grid-template-columns:88px minmax(0,1fr);gap:var(--sp-2xs);padding-block:8px;font-size:13.5px}
    .contact-row b{font-size:13.5px}
    .closing h2{font-size:clamp(26px,7vw,34px);margin-block-end:var(--sp-s)}
    .closing .kicker{margin-block-end:var(--sp-m)}
    footer{padding-block:var(--sp-s) var(--sp-xl)}
    .foot{gap:var(--sp-2xs)}
    .foot small{font-size:11.5px;line-height:1.45}
    .warn{margin-block-start:var(--sp-xs);font-size:11px;letter-spacing:.1em}
    .menu{margin-block-start:var(--sp-s)}

    /* Схема желудка на телефоне компактнее — она иллюстрация, не главный герой */
    /* Схема — иллюстрация, а не главный герой: на телефоне ей хватает
       трети экрана вместо половины */
    .anat{max-inline-size:264px;margin-inline:auto}
    .hero-photo{max-inline-size:260px}
    .anat figcaption{margin-block-start:var(--sp-2xs);font-size:11.5px}

    /* Цены: название и сумма в одну строку, пояснение — мелкой строкой */
    .menu-row{padding-block:var(--sp-xs)}
    .menu-row p{font-size:13.5px;line-height:1.45;margin-block-start:2px}
    .menu-line h3{font-size:16px;white-space:normal}
    .menu-line .price{font-size:18px}
    .menu-line .price small{display:block;margin-inline-start:0;font-size:11.5px}
    .menu-note{margin-block-start:var(--sp-xs);font-size:11.5px}
    .help-foot{margin-block-start:var(--sp-s);font-size:14px}
    .help-list,.quote-sub{grid-template-columns:1fr}
    .bio-grid{grid-template-columns:1fr}
    .plate-fig{grid-template-columns:1fr}
    .plate-fig svg{max-inline-size:300px}
    .ways{grid-template-columns:1fr;gap:var(--sp-2xs)}
    .way{padding:14px 16px}
    .way__name{font-size:17px}
    .menu-line{flex-wrap:wrap;gap:var(--sp-2xs)}
    .menu-line .fill{display:none}
    .cv-row{grid-template-columns:1fr;gap:4px}
    .wordmark span{display:none}
    .btn{padding:11px 18px;font-size:14px}
    .draft{display:none}
    .top{min-block-size:58px;block-size:auto}
  }

  @media (width <= 400px){
    .wordmark{font-size:15px}
    .top .btn{padding:10px 14px;font-size:13.5px}
  }

  /* Точная подрезка полей строки по капители — убирает лишний воздух
     над крупными заголовками. Пока поддерживают не все браузеры. */
  @supports (text-box: trim-both cap alphabetic){
    h1,h2{text-box:trim-both cap alphabetic}
  }
}

/* Грузинская версия: у Piazzolla и Golos нет мхедрули, поэтому для ka
   отдаём системные шрифты — на всех платформах грузинский в них есть. */
@layer adapt{
  :lang(ka){
    --serif:system-ui,-apple-system,'Segoe UI',Roboto,'Sylfaen',serif;
    --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Sylfaen',sans-serif;
  }
}