/* Главная e-shalyapin.ru, направление B, 12.10.2026. Подключается только на главной; style.css на главной не грузится. */
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-cyrillic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-cyrillic-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20BD,U+2212}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-latin-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20BD,U+2212}

:root{
  /* бренд: без изменений */
  --bg:#0b141b;--text:#e2ecf0;--muted:#9ab0bc;--accent:#a5e1e8;--gold:#e3c695;
  /* новое: лестница поверхностей и тихие линии вместо рамок 1px бирюзой */
  --surface-1:#0f1c25;--surface-2:#132430;--line:#1b2b36;--line-2:#27404f;
  /* шкала размеров канона, плюс подводка 20 px */
  --type-hero:clamp(38px,5.2vw,64px);--type-section:clamp(28px,3.3vw,40px);--type-card:20px;--type-body:16px;--type-small:14px;
  /* ритм: 96 вместо 120, после заголовка 32 вместо 70 */
  --section:96px;--after-head:32px;--gutter:24px;--max:1200px;
  --radius:14px;--radius-btn:10px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:767px){:root{--section:64px;--gutter:16px;--after-head:24px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--type-body)/1.5 Manrope, system-ui, sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;line-height:1.15;letter-spacing:0;text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:50;background:var(--accent);color:var(--bg);padding:8px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.muted{color:var(--muted)}
.small{font-size:var(--type-small)}
.lead{font-size:var(--type-card);line-height:1.5;color:var(--muted)}

/* шапка */
.top{position:sticky;top:0;z-index:20;background:rgb(11 20 27 / .92);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:32px;height:68px}
.top{padding:0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:30px;height:auto}
.brand b{font-weight:600;display:block;line-height:1.2}
.brand span{display:block;font-size:var(--type-small);color:var(--muted);line-height:1.3}
.nav{display:flex;gap:28px}
.mobile-nav{position:relative;display:none}
.mobile-nav summary{list-style:none;cursor:pointer}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav[open] .mobile-nav-list{display:grid}
.mobile-nav-list{display:none;position:fixed;left:var(--gutter);right:var(--gutter);top:76px;z-index:30;gap:2px;padding:12px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:0 24px 60px rgb(0 0 0 / .5)}
.mobile-nav-list a{padding:12px 10px;border-radius:8px;text-decoration:none}
.mobile-nav-list a:hover{background:var(--surface-1)}
.nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--text)}
@media (max-width:900px){.nav,.top .btn-write{display:none}.mobile-nav{display:block}.brand-t>span{display:none}}

/* кнопки: одна основная залитая, одна тихая */
.btn,.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:var(--radius-btn);font:600 var(--type-body)/1.5 Manrope, system-ui, sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background-color .2s,border-color .2s}
.btn-main,.button{background:var(--accent);color:var(--bg)}
.btn-main:hover,.button:hover{background:#c3eef2}
.btn-quiet{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-quiet:hover{border-color:var(--muted)}
.btn:active,.button:active{transform:scale(.98)}
.btn-sm{min-height:40px;padding:8px 16px}
.link{color:var(--accent);text-decoration:underline;text-decoration-color:rgb(165 225 232 / .35);text-underline-offset:4px;transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--accent)}

/* секции */
.sec{padding:var(--section) 0}
.sec-head{max-width:720px;margin-bottom:calc(var(--after-head) + 8px)}
.sec-head h2{font-size:var(--type-section)}
.sec-head p{margin-top:12px;color:var(--muted)}

/* под заказ: строки, не карточки */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .25s}
.row h3{font-size:var(--type-card)}
.row p{color:var(--muted)}
.row .go{color:var(--accent);font-weight:600;white-space:nowrap}
.row:hover{background:linear-gradient(90deg,transparent,var(--surface-1) 20%,var(--surface-1) 80%,transparent)}
@media (max-width:767px){.row{grid-template-columns:1fr;gap:8px;padding:22px 0}}

/* обо мне */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;margin:0}
.facts div{border-top:1px solid var(--line);padding-top:16px}
.facts dt{font-size:var(--type-card);font-weight:600;color:var(--text)}
.facts dd{margin:6px 0 0;color:var(--muted)}

/* книга */
.book{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:center;background:var(--surface-1);border-radius:var(--radius);padding:40px}
.book img{border-radius:6px;box-shadow:0 24px 60px rgb(0 0 0 / .45)}
.book h2{font-size:var(--type-section)}
.book p{margin-top:12px;color:var(--muted);max-width:60ch}
.book .acts{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px;align-items:center}
@media (max-width:767px){.book{grid-template-columns:1fr;padding:24px;gap:24px}.book img{width:150px}}

/* движение: только улучшает видимое по умолчанию */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s var(--ease) both;animation-delay:var(--d,0ms)}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* пример ответа бота цитатой */
.quote{margin-top:28px;border-radius:var(--radius);background:var(--bg);padding:22px 24px;max-width:620px}
.quote .ask{display:inline-block;background:var(--surface-2);border-radius:12px 12px 12px 4px;padding:8px 14px}
.quote .src{margin-top:16px;font-size:var(--type-small);color:var(--muted)}
.quote blockquote{margin:6px 0 0;color:var(--text)}
/* принципы */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.rules div{border-top:1px solid var(--line);padding-top:16px}
.rules h3{font-size:var(--type-body)}
.rules p{margin-top:6px;color:var(--muted)}
@media (max-width:767px){.rules{grid-template-columns:1fr;gap:20px}}

/* Направление B: продуктовое, первый экран сразу показывает три продукта с ценой и действием */
.hero{padding:48px 0 var(--section)}
.hero-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 32px;margin-bottom:32px;flex-wrap:wrap}
.hero h1{font-size:var(--type-hero);flex:1 1 560px;text-wrap:wrap}
.hero .lead{flex:0 1 300px;font-size:var(--type-body)}
.hero .lead b{color:var(--text);font-weight:600}

.cards{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.card{display:flex;flex-direction:column;background:var(--surface-1);border-radius:var(--radius);overflow:hidden;transition:background-color .3s}
.card:hover{background:var(--surface-2)}
.card .pic{aspect-ratio:3/2;overflow:hidden;background:var(--surface-2)}
.card .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .pic img{transform:scale(1.03)}
.card .body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.card .for{font-size:var(--type-small);color:var(--muted)}
.card h2{font-size:var(--type-card)}
.card p{color:var(--muted)}
.card .buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.card .price{font-weight:600;font-size:var(--type-card);line-height:1.3}
.card .price small{display:block;font-size:var(--type-small);font-weight:400;color:var(--muted)}
.card.main{background:var(--surface-2)}
.card.main:hover{background:#172b38}
@media (max-width:1100px){.cards{grid-template-columns:1fr 1fr}.card.main{grid-column:1/-1}}
@media (max-width:767px){.hero{padding-top:28px}.hero-head{margin-bottom:24px}.cards{grid-template-columns:1fr}}

/* ролики: лента */
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.reel{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:center;padding:12px;background:var(--surface-1);border-radius:var(--radius);text-decoration:none;transition:background-color .3s}
.reel:hover{background:var(--surface-2)}
.reel img{border-radius:8px;aspect-ratio:9/16;object-fit:cover;width:112px}
.reel b{display:block;font-weight:600}
.reel span{display:block;color:var(--muted);font-size:var(--type-small);margin-top:4px}
.reel em{display:inline-block;margin-top:12px;font-style:normal;color:var(--accent);font-weight:600}
@media (max-width:1000px){.reels{grid-template-columns:1fr;gap:12px}.reel{grid-template-columns:88px minmax(0,1fr)}.reel img{width:88px}}

/* обо мне с портретом */
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:center}
.about .photo{display:flex;justify-content:center;padding:24px 0 0;background:radial-gradient(55% 45% at 50% 40%,#16323d,transparent 72%)}
.about .photo img{width:auto;height:auto;max-width:100%;max-height:560px;object-fit:contain}
.about h2{font-size:var(--type-section)}
.about p{margin-top:16px;color:var(--muted);max-width:56ch}
.about .facts{margin-top:36px}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:28px}.about .photo img{max-height:380px}}
@media (max-width:767px){.facts{grid-template-columns:1fr}}

/* книга с аватаром */
.book-av{grid-template-columns:260px minmax(0,1fr);background:radial-gradient(40% 60% at 12% 50%,#14303b,transparent 70%),var(--surface-1)}
.book-av img{box-shadow:none;border-radius:0;width:100%;max-height:440px;object-fit:contain}
@media (max-width:767px){.book-av{grid-template-columns:1fr}.book-av picture{justify-self:center}.book-av img{width:auto;max-height:300px}}

/* форма вопроса: общий блок /shared/question-form.html в ритме главной */
.home .question-section{padding:var(--section) var(--gutter);border-top:1px solid var(--line)}
.home .question-wrap{max-width:720px;margin:0 auto 0 max(0px,calc((100% - var(--max)) / 2))}
.home .question-heading>p:last-child{margin-bottom:32px}
.home .question-form input:not([type=checkbox]),.home .question-form textarea{background:var(--surface-1);border-color:var(--line-2);border-radius:var(--radius-btn)}
.home .question-section .question-purpose.question-wrap{display:none}
/* общий подвал /shared/project-links.html */
.home .es-projects{margin-top:0;border-top:1px solid var(--line)}
.home .footer-lockup{display:block;width:300px;max-width:100%;height:auto;margin:0 0 20px}

/* мягче: поля формы и общий подвал без тяжёлых рамок */
.home .question-form input:not([type=checkbox]),.home .question-form textarea{border-color:transparent;background:var(--surface-1)}
.home .question-form input:not([type=checkbox]):focus,.home .question-form textarea:focus{border-color:var(--accent)}
.home .es-projects .es-projects__grid a{border-color:transparent;background:var(--surface-1);box-shadow:none}
.home .es-projects .es-projects__grid a:hover{background:var(--surface-2)}
.home .es-projects .es-projects__icon,.home .es-projects .es-projects__grid nav .es-projects__icon{background:transparent}
.book-av picture{display:flex;justify-content:center}
@media (min-width:768px) and (max-width:1100px){.card.main{flex-direction:row}.card.main .pic{flex:0 0 55%}}

/* обо мне без портрета: заголовок слева, принципы справа */
.about.about-text{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.about-text .rules{margin-top:0!important}

/* первый экран: заголовок и сразу карточки */
.hero-head{display:block;margin-bottom:40px}
.hero h1{max-width:none}
/* шапка главной как локап подвала: печать, имя и лозунг цветом знака */
.top .wrap{height:76px}
.top .brand{gap:14px}
.top .brand img{width:44px;flex:none}
.top .brand-t b{display:block;font-size:var(--type-card);line-height:1.15;color:var(--gold)}
.top .brand-t>span{display:block;font-size:var(--type-body);line-height:1.15;color:var(--gold);opacity:.85;margin-top:4px}
.mobile-nav-list{top:84px}
@media (max-width:900px){.top .brand-t>span{display:block}}
@media (max-width:480px){
  .top .wrap{height:68px;gap:10px}
  .top .brand{gap:10px;min-width:0}
  .top .brand img{width:38px}
  .top .brand-t{min-width:0}
  .top .brand-t b{font-size:var(--type-body)}
  .top .brand-t>span{font-size:var(--type-small);margin-top:2px}
  .mobile-nav summary{padding:8px 12px}
  .mobile-nav-list{top:76px}
}
/* лозунг в шапке одной строкой и на телефоне */
@media (max-width:480px){.top .brand-t>span{white-space:nowrap}}
/* глава доверия: мягкая поверхность на всю ширину, правила крупно */
.trust{background:var(--surface-1);padding:var(--section) 0;margin-bottom:var(--section)}
.trust-head{max-width:760px}
.trust-head h2{font-size:var(--type-section)}
.trust-head p{margin-top:16px;color:var(--muted);font-size:var(--type-card);line-height:1.5}
.trust-rules{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 40px}
.trust-rules li{padding-top:24px;border-top:1px solid var(--line-2)}
.rule-ic{display:block;width:28px;height:28px;color:var(--accent);margin-bottom:20px}
.trust-rules h3{font-size:var(--type-card);line-height:1.15}
.trust-rules p{margin-top:12px;color:var(--muted)}
@media (max-width:1100px){.trust-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}}
@media (max-width:767px){.trust-rules{grid-template-columns:1fr;gap:32px;margin-top:40px}.trust-head p{font-size:var(--type-body)}}