/* Страница «Как я работаю» (/work/): поверх site.css, только на этой странице. Классы — с приставкой w-.
   Ритм фонов: темная шапка страницы → светлые шаги → светлые форматы → «слоновая кость» где проходит работа → устрица правила → темный призыв */

/* шапка страницы: под плавающей шапкой сайта */
.w-head{background:var(--ink);color:var(--ivory);padding:calc(var(--hdr,96px) + clamp(40px,6vw,88px)) 0 clamp(48px,7vw,96px)}
.w-head .wrap{display:grid;gap:22px}
.w-head .eyebrow{color:var(--gold-light)}
.w-head h1{font-size:clamp(34px,4.2vw,56px);line-height:1.12;max-width:20ch}
.w-head .lead{font-size:clamp(18px,1.6vw,22px);line-height:1.55;max-width:56ch;opacity:.9}
/* три формата отдельно, ссылками к своим блокам ниже; под ними — «Начинаем всегда со знакомства» */
.w-three{list-style:none;padding:0;margin:clamp(8px,2vw,20px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,36px)}
.w-three a{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--gold);text-decoration:none;color:var(--ivory)}
.w-three b{font-weight:400;font-size:clamp(20px,1.8vw,24px);line-height:1.25;transition:color .25s}
.w-three span{font-size:16px;line-height:1.45;opacity:.75}
.w-three a::after{content:"↓";font-size:16px;color:var(--gold-light);opacity:.8;transition:transform .35s var(--ease)}
@media (hover:hover){.w-three a:hover b{color:var(--gold-light)}.w-three a:hover::after{transform:translateY(4px)}}
.w-head .lead{margin-top:clamp(8px,1.6vw,16px)}

/* заголовок блока */
.w-sh{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.w-sh .eyebrow{color:var(--gold-deep)}
.w-sh h2{font-size:clamp(30px,3.4vw,44px);line-height:1.15}
.w-sh p{color:var(--espresso-soft);max-width:60ch}

/* три шага */
.w-path{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);counter-reset:step}
.w-path li{display:grid;gap:10px;align-content:start;padding-top:22px;border-top:1px solid var(--gold);counter-increment:step}
.w-path li::before{content:counter(step,decimal-leading-zero);font-size:14px;letter-spacing:.14em;color:var(--gold-deep);font-weight:500}
.w-path h3{font-size:clamp(22px,2vw,26px);line-height:1.25}
.w-path p{color:var(--espresso-soft)}

/* форматы: название слева, описание справа; адреса #support, #sprint, #talks — для «Подробнее» с главной */
.w-formats{border-top:1px solid var(--oyster)}
.w-fmt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,72px);padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--oyster);scroll-margin-top:calc(var(--hdr,96px) + 16px)}
.w-fmt:first-of-type{border-top:0;padding-top:0}
.w-name{display:grid;gap:10px;align-content:start}
.w-name .eyebrow{color:var(--gold-deep);font-size:12px}
.w-fmt h3{font-size:clamp(28px,2.8vw,36px);line-height:1.15}
.w-body{display:grid;gap:22px;max-width:62ch}
.w-body>p{font-size:clamp(18px,1.4vw,20px);line-height:1.6}
.w-facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.w-facts li{padding-left:16px;border-left:2px solid var(--gold);font-size:16px;line-height:1.5;color:var(--espresso-soft)}
.w-facts b{display:block;font-weight:500;color:var(--ink)}
.w-circles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.w-circles div{background:var(--oyster);border-radius:12px;padding:18px 20px;font-size:16px;line-height:1.5;color:var(--espresso-soft)}
.w-circles b{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.w-topics{display:grid;gap:12px}
.w-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--gold-deep)}
.w-topics ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.w-topics li{position:relative;padding-left:20px;font-size:17px;line-height:1.45}
.w-topics li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold-light)}

/* где проходит работа */
.w-where{background:var(--ivory)}
.w-places{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.w-places li{background:var(--paper);border-radius:14px;padding:clamp(22px,3vw,32px);display:grid;gap:10px;align-content:start}
.w-places h3{font-size:clamp(22px,2vw,26px);line-height:1.25}
.w-places p{color:var(--espresso-soft);font-size:17px}

/* правила работы */
.w-rules{background:var(--oyster)}
.w-rules .w-sh .eyebrow{color:var(--espresso)} /* золотой надзаголовок на устрице не проходит по контрасту */
.w-rules ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-reset:rule}
.w-rules li{background:var(--paper);border-radius:14px;padding:clamp(22px,3vw,32px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;counter-increment:rule}
.w-rules li::before{content:counter(rule);grid-row:span 2;font-size:28px;line-height:1.1;color:var(--gold-deep)}
.w-rules h3{font-size:22px;line-height:1.3}
.w-rules p{color:var(--espresso-soft);font-size:17px}
.w-rules li.wide{grid-column:1/-1}

@media (max-width:860px){
  .w-path,.w-fmt,.w-places,.w-rules ol,.w-three{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .w-facts,.w-circles,.w-topics ul{grid-template-columns:minmax(0,1fr)}
}