/* ---------- Полоса-заголовок: дворец над серым туманом ----------
   Арт горизонтальный (2000x1125), поэтому кадрируется мягко и выдерживает и телефон, и монитор 21:9.
   Градиент доведён до --ink-950: полоса растворяется в тексте страницы, а не обрывается линией. */
.about-top{position:relative;overflow:clip;isolation:isolate;display:grid;align-content:end;min-height:clamp(300px,44svh,440px);padding:calc(var(--header-h) + 44px) 0 clamp(30px,5vw,52px)}
.about-top__art{position:absolute;inset:0;z-index:-1;background:url(../../img/palace.webp) 50% 42%/cover no-repeat;animation:rise 1.2s var(--spring) both;--from:36px}
.about-top__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,13,.92) 0,rgba(7,6,13,.66) 34%,rgba(7,6,13,.88) 74%,var(--ink-950) 100%)}
.about-top__copy{display:grid;justify-items:start;gap:16px}
.about-top__title{font-size:var(--fs-h2);text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,0,.7)}
.about-top__title em{font-style:normal;color:var(--fog-300)}
.about-top__lead{max-width:56ch;color:#e4dccd;text-shadow:0 1px 14px rgba(0,0,0,.75)}
.about-facts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8125rem;color:var(--fog-300)}
.about-facts span{display:inline-flex;align-items:center;gap:12px}
.about-facts span:not(:last-child)::after{content:"·";color:var(--gold-400)}

/* ---------- Раскладка длинного чтения ---------- */
.about-wrap{padding-block:clamp(36px,5vw,64px) clamp(56px,9vw,120px)}
/* Колонка задана явно, и у обоих элементов сетки снят автоматический минимум по содержимому.
   Без этого неявная auto-колонка растягивалась под min-content оглавления (четыре пилюли в строку,
   white-space:nowrap — 358 px), страница на телефоне ездила вбок, а на 320 px шапка вылезала за экран
   вместе с кнопкой меню — попасть из «О проекте» в каталог было нельзя. */
.about-grid{display:grid;gap:8px;align-items:start;grid-template-columns:minmax(0,1fr)}
.about-body{min-width:0}
@media(min-width:1024px){.about-grid{grid-template-columns:210px minmax(0,1fr);gap:60px}}

/* Оглавление: на телефоне — строка пилюль в начале текста, на широком экране — липкий столбик слева,
   как закреплённые панели на главной. Прокрутка внутри строки, а не у страницы: горизонтали на сайте нет. */
.about-nav{position:relative;min-width:0;margin-bottom:8px}
/* Полоса пилюль прокручивается от края до края экрана: отрицательные поля выводят её за колонку текста,
   внутренние возвращают первой пилюле отступ. Прокрутка внутри полосы, у страницы горизонтали нет. */
.about-nav ul{display:flex;gap:8px;margin:0 calc(var(--gutter)*-1);padding:2px var(--gutter) 10px;list-style:none;overflow-x:auto;scrollbar-width:none}
.about-nav ul::-webkit-scrollbar{display:none}
.about-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);font-size:.875rem;color:var(--fog-300);white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.about-nav a:hover{color:var(--text);border-color:var(--gold-400)}
@media(pointer:coarse){.about-nav a{min-height:44px}}   /* пальцем по оглавлению: ТЗ, п. 7 */
.about-nav a.is-on{color:#1a1407;background:linear-gradient(180deg,var(--gold-200),var(--gold-400));border-color:transparent;font-weight:600}
.about-nav__title{display:none}
@media(min-width:1024px){
  .about-nav{position:sticky;top:calc(var(--header-h) + 28px)}
  .about-nav__title{display:block;margin-bottom:14px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-600)}
  .about-nav ul{flex-direction:column;gap:6px;margin:0;padding:0;overflow:visible}
  .about-nav a{justify-content:flex-start;width:100%;border:0;border-left:1px solid var(--line);background:none;border-radius:0 999px 999px 0}
  /* Подсветка гаснет до правого края колонки: иначе на стыке с текстом видна вертикальная кромка */
  .about-nav a.is-on{background:linear-gradient(90deg,rgba(212,175,106,.16),transparent 78%);color:var(--gold-200);border-left-color:var(--gold-400);font-weight:600}
}

/* Разделы: якорь не должен уезжать под закреплённую шапку, отсюда scroll-margin-top */
.about-sec{padding-block:clamp(40px,6vw,68px);scroll-margin-top:calc(var(--header-h) + 20px)}
.about-sec+.about-sec{border-top:1px solid rgba(255,255,255,.07)}
/* Заголовок раздела занимает всю ширину: подзаголовка справа здесь нет, и колонка 1.4fr/1fr из base.css
   оставила бы половину строки пустой, а сам заголовок ломался бы на три строки. */
.about-sec .section__head{grid-template-columns:none;margin-bottom:clamp(22px,3.5vw,34px)}
/* Одна правая кромка на весь раздел. Ограничение стояло только на прозе, и списки «что собирается»,
   ключи браузера, авторы и панель памяти уходили на 300 px правее абзацев — раздел выглядел как два
   разных документа. Заголовок раздела крупный и живёт по своим правилам, поэтому он исключён. */
.about-sec>*:not(.section__head){max-width:68ch}
.about-text{display:grid;gap:16px;color:var(--fog-300)}
.about-text b{color:var(--text);font-weight:600}
.about-text a{color:var(--gold-200);text-decoration:underline}
.about-h3{margin:clamp(30px,4.5vw,44px) 0 14px;font-size:var(--fs-h3)}

/* Цифры проекта: четыре карточки, выделяются по очереди, пока ряд проходит центр экрана */
.facts{display:grid;gap:12px;margin-top:clamp(24px,4vw,34px);grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.fact{display:grid;gap:4px;padding:18px}
.fact b{font:600 1.75rem/1 var(--font-display);color:var(--gold-200)}
.fact span{font-size:.8125rem;color:var(--fog-300)}

/* Список «что собирается»: на телефоне подпись над значением, на широком экране — двумя колонками */
.dl{display:grid;gap:0;margin:0;padding:0;list-style:none}
.dl li{display:grid;gap:4px;padding-block:16px;border-top:1px solid rgba(255,255,255,.07)}
.dl li:last-child{border-bottom:1px solid rgba(255,255,255,.07)}
.dl b{font-weight:600;color:var(--text)}
.dl span{font-size:.9375rem;color:var(--fog-300)}
@media(min-width:720px){.dl li{grid-template-columns:.7fr 1.3fr;gap:24px;align-items:baseline}}

/* Ключи браузера: моноширинный шрифт системный, чтобы не тянуть ещё один файл со шрифтом */
.keys{display:grid;gap:0;margin:0;padding:0;list-style:none;font-size:.875rem}
.keys li{display:grid;gap:4px;padding-block:14px;border-top:1px solid rgba(255,255,255,.07)}
.keys li:last-child{border-bottom:1px solid rgba(255,255,255,.07)}
.keys code{font:.8125rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--gold-200);overflow-wrap:anywhere}
.keys span{color:var(--fog-300)}
@media(min-width:720px){.keys li{grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:baseline}}

/* Память браузера: живая сводка и кнопка, которая действительно стирает состояние лавки */
.memory{display:grid;gap:16px;margin-top:clamp(26px,4vw,36px);padding:clamp(20px,3vw,28px);background:linear-gradient(120deg,color-mix(in srgb,var(--indigo-700) 45%,var(--ink-900)),var(--ink-900))}
.memory h3{font-size:1.5rem}
.memory__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.memory__list li{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font-size:.8125rem;color:var(--fog-300)}
.memory__list b{color:var(--gold-200);font-weight:600}
.memory__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* Авторы артов: каждая строка — работа и её автор */
.credits{display:grid;gap:16px;margin:clamp(22px,3vw,30px) 0 0;padding:0;list-style:none}
.credits li{display:grid;gap:3px;padding-left:16px;border-left:1px solid var(--line)}
.credits b{font:600 1.125rem/1.3 var(--font-display);color:var(--text)}
.credits span{font-size:.875rem;color:var(--fog-300)}

.about-form{display:grid;gap:18px;max-width:640px;padding:clamp(22px,4vw,36px)}