/* Проба 2, сайт Дмитрия Моисеева. Шрифты: Forum (заголовки, буквы), Commissioner (текст). */
@font-face{font-family:'Forum';font-weight:400;font-display:swap;src:url(../fonts/forum-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Forum';font-weight:400;font-display:swap;src:url(../fonts/forum-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+20A0-20AB,U+20AD-20C4}
@font-face{font-family:'Forum';font-weight:400;font-display:swap;src:url(../fonts/forum-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:'Caveat';font-weight:400 700;font-display:swap;src:url(../fonts/caveat-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';font-weight:400 700;font-display:swap;src:url(../fonts/caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:'Commissioner';font-weight:300 500;font-display:swap;src:url(../fonts/commissioner-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Commissioner';font-weight:300 500;font-display:swap;src:url(../fonts/commissioner-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+20A0-20AB,U+20AD-20C4}
@font-face{font-family:'Commissioner';font-weight:300 500;font-display:swap;src:url(../fonts/commissioner-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2212}

:root{
  --ink:#f2efe9; --soft:#d6d2c9; --muted:#a8a39a; --dim:#7d786f;
  --gold:#cfa962; --gold-hi:#e2c487; --red:#c4161c; --paper:#efece4;
  --head:'Forum',Georgia,serif; --text:'Commissioner',Arial,sans-serif;
  --pad:clamp(24px,10.6vw,200px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{background:#0b0b0c}
body{color:var(--ink);font-family:var(--text);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none}
.wrap{max-width:1700px;margin:0 auto;padding:0 var(--pad)}

/* ---------- живой фон (закреплён) и холст букв-спутника ---------- */
.bg{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;
  background:linear-gradient(118deg,rgba(38,56,74,0) 6%,rgba(38,56,74,1) 38%,rgba(38,56,74,0) 74%),linear-gradient(180deg,#0b1118,#131c27)}
.bg::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sat{position:fixed;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none;display:none}
.js .sat{display:block}
.form{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

/* ---------- первый экран (закреплён макетом 13.11) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;background:#000;overflow:hidden;display:flex;align-items:center}
.hero__photo{position:absolute;top:0;right:0;height:100%;width:56%;background:url(../img/dima-hero.jpg) center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 14%,transparent 38%)}
.hero__fx{position:absolute;left:0;top:0;width:100%;height:min(100%,660px);pointer-events:none;z-index:3}
.hero__in{position:relative;z-index:2;width:100%;padding-top:34px;padding-bottom:90px}
.logo{display:inline-block;margin-bottom:64px;text-decoration:none}
.logo img{height:118px;width:auto}
.js .logo img{opacity:0}
.mission{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.55vw,37px);line-height:1.12;max-width:17.5em;margin-bottom:22px;color:#fff}
.hero__sub{font-size:18px;color:var(--soft);max-width:520px;margin-bottom:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:72px;min-width:400px;padding:0 56px;border-radius:999px;background:#fff;color:#000;text-decoration:none;font-weight:500;font-size:15px;letter-spacing:.2em;text-transform:uppercase;text-align:center;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.hero__note{font-size:14.5px;color:var(--muted);margin-top:8px}
.btn + .hero__note{margin-top:26px}
.hero__cap{position:absolute;right:8%;bottom:14%;z-index:3;text-align:right;max-width:320px}
.hero__name{font-size:19px;font-weight:400;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.hero__name i{display:inline-flex;width:20px;height:20px;border-radius:50%;background:#d9b47a;color:#000;font-style:normal;font-size:12px;align-items:center;justify-content:center}
.hero__cap p{font-size:13.5px;color:var(--soft);line-height:1.45;margin-top:8px}

/* ---------- главы: один матовый графитовый лист, без коробок и линий ---------- */
main{position:relative}
main::before{content:"";position:absolute;left:0;right:0;top:0;height:340px;background:linear-gradient(180deg,#000 0,rgba(0,0,0,.72) 34%,rgba(0,0,0,0) 100%);pointer-events:none}
.ch{padding:clamp(96px,15vh,170px) 0 clamp(60px,9vh,110px);position:relative}
.ch--help .hd{padding-bottom:22px}
.hd{font-family:var(--head);font-weight:400;font-size:clamp(34px,4.7vw,70px);line-height:1.04;letter-spacing:-.012em;max-width:13.5em;color:var(--ink)}
.lead{font-size:clamp(18px,1.5vw,21px);color:var(--soft);max-width:24em}
.txt{color:var(--muted);max-width:27em;margin-top:1.1em}

/* Причина */
.sh__w{display:inline-block;white-space:nowrap}
.sh__l{display:inline-block;will-change:transform}
.why{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:0 9%;margin-top:clamp(48px,8vh,90px);align-items:start}
.why__word{font-family:var(--head);font-size:clamp(46px,5.2vw,78px);line-height:1.05;margin:.08em 0 .14em;color:var(--ink)}
.why__text .txt:first-of-type{margin-top:2.2em}
.glass{position:absolute;inset:-64px -46px -92px -50px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(114deg,rgba(255,255,255,0) 15%,rgba(255,255,255,.06) 21%,rgba(255,255,255,.018) 29%,rgba(255,255,255,0) 35%,rgba(255,255,255,0) 71%,rgba(255,255,255,.03) 75%,rgba(255,255,255,0) 80%),linear-gradient(98deg,rgba(214,228,242,.2) 0%,rgba(206,220,236,.115) 42%,rgba(198,212,228,.028) 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(0,0,0,.4),3px 4px 0 -1px rgba(160,180,200,.1),26px 34px 46px -26px rgba(0,0,0,.62)}
.glass::before{content:"";position:absolute;inset:0;border:9px solid transparent;
  background:linear-gradient(135deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 24%,rgba(0,0,0,.24) 58%,rgba(255,255,255,.26) 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass::after{content:"";position:absolute;inset:9px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.34),inset -1px -1px 0 rgba(255,255,255,.16)}
.phr__back{position:absolute;overflow:hidden;pointer-events:none}
.phr__blur{position:absolute;width:100%;height:100%}
.phr__row{position:relative}
.phr{position:relative;font-family:var(--head);font-size:clamp(29px,3.4vw,50px);line-height:1.12;color:var(--gold)}
.phr__row{display:grid;margin-bottom:.95em}
.phr__row:nth-child(2){margin-left:13%}
.phr__row:nth-child(3){margin-left:5%}
.phr__a,.phr__b{grid-area:1/1;max-width:13em;text-wrap:balance}
.phr__a{display:none}
.phr__was{grid-row:2;font-family:var(--text);font-size:15.5px;line-height:1.4;color:var(--muted);margin-top:.7em}
.phr__w{display:inline-block;white-space:nowrap}
.js .phr__b,.phr.is-live .phr__a{color:transparent}
.phr.is-live .phr__a{display:block}
.js .phr__was{opacity:0}
.phr__fly{position:absolute;inset:0;pointer-events:none}
.phr__was{position:relative}
.phr__actor{position:absolute;left:0;top:0;white-space:pre;transform-origin:50% 55%;will-change:transform,opacity}

/* С чем я могу помочь: буквицы в один столбец читаются сверху вниз словом КОУЧ */
.ch--help .hd{margin-left:auto;width:min(100%,58.4%);max-width:none;position:relative}
.help{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vh,48px);margin-top:clamp(56px,9vh,96px);margin-left:41.6%;--cap:clamp(72px,6.4vw,96px)}
.help li{position:relative;font-size:clamp(17px,1.5vw,21px);color:var(--soft);max-width:27em}
.help:not(.is-live) li::first-letter{font-family:var(--head);font-size:3.5em;line-height:.8;float:left;padding:.07em .1em 0 0;color:var(--gold-hi)}
.help.is-live li{display:grid;grid-template-columns:calc(var(--cap)*.86) minmax(0,1fr);align-items:start;min-height:calc(var(--cap)*.86)}
.cap{display:block;font-family:var(--head);font-size:var(--cap);line-height:.86;perspective:640px;opacity:0}
.cap__spin{display:inline-block;position:relative;transform-style:preserve-3d;will-change:transform}
.cap__l{position:absolute;left:0;top:0;color:#6f5223}
.cap__l:first-child{position:relative;color:var(--gold-hi)}
.cap__l:nth-child(2),.cap__l:nth-last-child(2){color:#9a7937}
.cap__f{color:var(--gold-hi);background:linear-gradient(180deg,#e2c487 0,#e2c487 36%,#fffaea 50%,#e2c487 64%,#e2c487 100%) 0 0/100% 500% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.help__t{padding-top:calc(var(--cap)*.12)}

/* О Дмитрии */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 9%;align-items:center}
.pol{width:min(100%,410px);transform:rotate(-4deg);justify-self:center}
.pol__card{background:linear-gradient(168deg,#f4f1ea,#e8e4da);padding:4.4% 4.4% 24%;position:relative;container-type:inline-size;box-shadow:0 34px 60px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.45)}
.pol__in{position:relative;aspect-ratio:1;background:#77878a;overflow:hidden}
.pol__in::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset 0 2px 9px rgba(0,0,0,.3);pointer-events:none}
.pol__in img{width:100%;height:100%;object-fit:cover}
.pol__sign{position:absolute;left:7cqw;right:3cqw;bottom:2.2cqw;height:20cqw;transform:rotate(-2deg);font-family:'Caveat',cursive;font-weight:500;color:#1e2230;line-height:1}
.pol__sign b{display:block;position:absolute;left:0;top:1cqw;font-weight:500;font-size:10.4cqw;white-space:nowrap}
.pol__sign span{display:block;position:absolute;left:1cqw;top:12.2cqw;font-size:5.6cqw;white-space:nowrap}
.js .pol__sign b,.js .pol__sign span{color:transparent}
.pol__in canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.pol.is-live .pol__in canvas{display:block}
.js .pol__in img{opacity:0}
.facts{margin-top:clamp(30px,5vh,52px)}
.facts li{position:relative;padding-left:46px;margin-top:1.25em;font-size:clamp(17px,1.45vw,20px);color:var(--soft);max-width:26em}
.facts li::before{content:"";position:absolute;left:0;top:.82em;width:26px;height:1px;background:var(--gold)}
.facts li.has-fig{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:0 22px;align-items:start;max-width:none}
.facts li.has-fig > span:first-child{max-width:19em}
.fig{position:relative;display:block;height:124px}
.fig--book{height:140px}
.path{margin-top:clamp(100px,17vh,190px)}
.path__say{font-family:var(--head);font-size:clamp(25px,2.7vw,40px);line-height:1.16;max-width:21em;color:var(--ink)}
.st{position:relative;margin-top:clamp(20px,3vh,36px)}
.st canvas{display:none}
.st p{font-family:var(--head);font-size:34px;color:var(--gold-hi)}
.st p span{font-family:var(--text);font-size:14px;color:var(--muted)}
.st.is-live{height:clamp(360px,40vw,560px)}
.st.is-live canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.st.is-live p{position:absolute;color:transparent;white-space:nowrap;line-height:1.05;pointer-events:none}
.st.is-live p span{display:none}

.foot{padding:70px 0 80px;color:var(--dim);font-size:13.5px}
.foot p{max-width:46em}

/* ---------- телефон ---------- */
@media (max-width:900px){
  body{font-size:16px}
  .hero{display:block;min-height:0}
  .hero__photo{position:static;width:100%;height:auto;aspect-ratio:3/4;-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent);mask-image:linear-gradient(to bottom,#000 66%,transparent)}
  .hero__photo::after{display:none}
  .hero__fx{height:520px}
  .hero__in{position:static;margin-top:-112px;padding-top:0;padding-bottom:20px}
  .logo{position:absolute;left:var(--pad);top:22px;margin:0;z-index:2}
  .logo img{height:80px}
  .mission{font-size:24px;position:relative}
  .hero__sub{font-size:16px;margin-bottom:26px;position:relative}
  .btn{min-width:0;width:100%;min-height:64px;padding:0 20px;font-size:14px}
  .hero__cap{position:static;text-align:left;max-width:none;padding:22px var(--pad) 56px}
  .hero__name{justify-content:flex-start}
  .ch{padding:84px 0 56px}
  .hd{font-size:clamp(32px,9vw,40px)}
  .why,.about{grid-template-columns:minmax(0,1fr)}
  .why__text .txt:first-of-type{margin-top:1.6em}
  .phr{margin-top:84px;font-size:clamp(28px,7.9vw,34px)}
  .phr__row:nth-child(2){margin-left:7%}
  .phr__row:nth-child(3){margin-left:0}
  .phr__was{font-size:13.5px}
  .glass{inset:-34px -14px -56px -14px}
  .glass::before{border-width:6px}
  .glass::after{inset:6px}
  .ch--help .hd{width:auto;margin-left:0}
  .help{margin-left:0;--cap:64px;gap:30px}
  .facts li.has-fig{grid-template-columns:minmax(0,1fr);gap:8px 0}
  .facts li.has-fig .fig{height:118px;width:min(100%,270px)}
  .facts li.has-fig .fig--book{height:136px}
  .about__text{margin-top:64px}
  .pol{width:80%;transform:rotate(-3deg)}
  .facts li{padding-left:36px}
  .facts li::before{width:20px}
  .st.is-live{height:340px}
}