/* Варианты блоков 1–2 (11.11.2026): акцент на фото и работах, имя не крупно.
   Подключается поверх ../../сайт/style.css (чёрный) или ../v2-белый/style.css (белый). */
.bar{grid-template-columns:1fr auto 1fr}
.who{font:500 15px/1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.who span{color:var(--ink2);font-weight:400}
.k-label{display:block;margin-bottom:16px}
.fix-sm .fix .corr{font-size:.82em}
.thumb{display:block}
.thumb img{width:100%;aspect-ratio:1800/1408;object-fit:cover;background:#151311}
.thumb .mono{display:flex;gap:8px;margin-top:8px}
.thumb .mono i{font-style:normal;color:var(--red-s)}
.facts{display:grid;gap:0}
.facts div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dd{font-size:15px}
.after{padding-top:clamp(80px,9vw,140px)}
.after .shot img{width:100%;height:auto}

/* ── 1. Портрет-постер ───────────────────────────── */
.p1{display:grid;grid-template-columns:5fr 7fr;min-height:100svh;padding-top:48px}
.p1-photo{position:relative;overflow:hidden;background:var(--red)}
.p1-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.p1-photo figcaption{position:absolute;left:var(--gut);bottom:20px;color:#F1EEE8}
.p1-side{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(32px,4vw,64px) var(--gut) 32px clamp(32px,4vw,72px)}
.p1-h{font-weight:400;font-size:clamp(30px,3.3vw,56px);line-height:1.12;letter-spacing:-.025em;max-width:860px}
.p1-about{margin-top:24px;max-width:520px;font-size:16px;color:var(--ink2)}
.p1-about b{font-weight:500;color:var(--ink)}
.p1-side .link{margin-top:24px}
.p1-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.p2b{display:grid;grid-template-columns:5fr 7fr;gap:var(--gut);padding-top:clamp(80px,9vw,140px)}
.p2b .facts{grid-column:2}

/* ── 2. Триптих ──────────────────────────────────── */
.t1{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:var(--gut);min-height:100svh;padding-top:88px;padding-bottom:40px;align-items:stretch}
.t1-text{display:flex;flex-direction:column;justify-content:space-between}
.t1-h{font-weight:400;font-size:clamp(26px,2.4vw,42px);line-height:1.15;letter-spacing:-.02em}
.t1-about{margin-top:20px;font-size:15px;color:var(--ink2);max-width:400px}
.t1-photo{position:relative;overflow:hidden;background:var(--red);min-height:520px}
.t1-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.t1-photo figcaption{position:absolute;left:16px;bottom:14px;color:#F1EEE8}
.t1-index{display:flex;flex-direction:column;justify-content:space-between}
.t1-index ol{list-style:none;border-top:1px solid var(--line)}
.t1-index li a{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:17px;transition:color .2s,padding .3s}
.t1-index li a:hover{color:var(--red);padding-left:8px}
.t1-index li i{font:normal 400 12px/1 var(--mono);color:var(--red-s)}
.t1-index li span{font:400 12px/1 var(--mono);color:var(--ink2)}
.t2{padding-top:clamp(64px,7vw,110px)}
.t2-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.t2-strip .mono{font-size:11px}
.t2-row{display:grid;grid-template-columns:1fr 2fr;gap:var(--gut);margin-top:clamp(56px,6vw,96px)}

/* ── 3. Кадр + флагман ───────────────────────────── */
.k1{display:grid;grid-template-columns:1fr 2fr;gap:var(--gut);padding-top:72px;min-height:100svh;padding-bottom:28px}
.k1 figure{display:flex;flex-direction:column}
.k1-photo,.k1-case{position:relative;flex:1;overflow:hidden;min-height:480px}
.k1-photo{background:var(--red)}
.k1-photo img,.k1-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k1-photo img{object-position:50% 20%}
.k1-case{background:#13202c}
.k1-case img{object-position:50% 45%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.k1-case:hover img{transform:scale(1.02)}
.k1 figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:12px;align-items:baseline}
.k1 figcaption b{font-weight:400;font-size:17px;color:var(--ink)}
.k1 figcaption .red{color:var(--red-s)}
.k2{display:grid;grid-template-columns:1fr 2fr;gap:var(--gut);padding-top:clamp(80px,9vw,140px)}
.k2-h{font-weight:400;font-size:clamp(30px,3.6vw,62px);line-height:1.1;letter-spacing:-.025em}
.k2-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:clamp(32px,3vw,48px)}
.k2-cols p{font-size:16px;color:var(--ink2)}
.k2-cols p b{color:var(--ink);font-weight:500}

/* планшет и телефон */
@media (max-width:1100px){
  .p1{grid-template-columns:1fr 1fr}
  .p1-strip{grid-template-columns:repeat(2,1fr)}
  .p2b{grid-template-columns:1fr}.p2b .facts{grid-column:1}
  .t1{grid-template-columns:1fr 1fr;padding-top:72px}
  .t1-index{grid-column:1 / -1}
  .t2-strip{grid-template-columns:repeat(4,1fr)}
  .t2-row,.k2{grid-template-columns:1fr}
  .k1{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .bar-mid{display:none}
  .p1{grid-template-columns:1fr;min-height:0}
  .p1-photo{aspect-ratio:4/5}
  .p1-side{padding:32px var(--gut)}
  .t1{grid-template-columns:1fr;min-height:0}
  .t1-photo{min-height:0;aspect-ratio:4/5}
  .t2-strip{grid-template-columns:repeat(2,1fr)}
  .k1{grid-template-columns:1fr;min-height:0}
  .k1-photo{min-height:0;aspect-ratio:4/5;flex:none}
  .k1-case{min-height:0;aspect-ratio:1800/1408;flex:none}
  .k2-cols{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:2px}
}
/* правка 11.11: «продаёт» не налезает на строку выше */
.p1-h,.t1-h,.k2-h{line-height:1.42}
.p1-h .fix .corr,.t1-h .fix .corr,.k2-h .fix .corr{bottom:66%;font-size:.74em}
.t1-h{line-height:1.6}
.who{white-space:nowrap}
@media (max-width:640px){.who{font-size:14px}.bar nav{gap:10px}}
@media (max-width:640px){.bar{grid-template-columns:auto 1fr;gap:12px}}

/* ── правки по проверке джуна (джун-блоки-1-2.md), 11.11.2026 ── */
/* П1: «продаёт» не касается строки выше, межстрочный не расшатан */
.p1-h,.k2-h{line-height:1.12}
.t1-h{line-height:1.15}
.p1-h .nw::before,.t1-h .nw::before,.k2-h .nw::before{content:"";display:inline-block;width:0;height:1.62em}
.p1-h .fix .corr,.t1-h .fix .corr,.k2-h .fix .corr{bottom:92%;font-size:.74em}
/* П2: портрет не шире ~460 px (фото маленькое) */
.p1{grid-template-columns:clamp(320px,32vw,460px) 1fr}
.p2b{grid-template-columns:clamp(320px,32vw,460px) 1fr;padding-left:0;padding-right:0;column-gap:0}
.p2b>div:first-child{padding:0 var(--gut)}
.p2b .facts{padding:0 var(--gut) 0 clamp(32px,4vw,72px)}
/* вар. 1: работы крупнее */
.p1-strip{grid-template-columns:2fr 1fr 1fr;gap:16px;margin-top:48px;align-items:end}
.p1-strip .thumb img{height:clamp(160px,15vw,240px);aspect-ratio:auto}
.p1-strip .thumb:first-child img{height:clamp(220px,21vw,340px)}
.p1-side{padding-top:64px}
/* вар. 2 */
.thumb img{outline:1px solid var(--line);outline-offset:-1px}
.t2-row{grid-template-columns:1fr 2fr}
/* вар. 3 */
.k1{min-height:0;align-items:start}
.k1-photo{flex:none;aspect-ratio:466/600;min-height:0}
.k1-case{flex:none;aspect-ratio:1800/1408;min-height:0}
.k1-photo{aspect-ratio:auto;height:100%}
.k1>figure:first-child{height:100%}
.k1-name{font:400 17px/1.3 var(--sans);letter-spacing:-.01em}
.k2-cols .link{display:table}
.k1-m b{color:var(--ink);font-weight:400}
.k1-cap .fix{margin-top:.9em}
.k1-cap .fix .corr{bottom:62%;font-size:.95em}
@media (max-width:1100px){
  .p2b{padding-left:var(--gut);padding-right:var(--gut)}.p2b>div:first-child,.p2b .facts{padding:0}
  .p1{grid-template-columns:1fr 1fr}
  .k1{grid-template-columns:1fr 2fr}
}
@media (max-width:640px){
  .t1-text{gap:24px}.t1-photo{order:-1}.t1-index li span{display:none}
  .k1 figcaption{flex-direction:column;gap:4px}
  .p1,.k1{grid-template-columns:1fr}
  .p1-strip{grid-template-columns:1fr 1fr}.p1-strip .thumb:first-child{grid-column:1 / -1}
  .k1-photo{height:auto;aspect-ratio:4/5}
}
.k1{align-items:stretch}
.k1>figure:first-child{height:auto}
.k1-photo{flex:1 1 auto;height:auto;aspect-ratio:auto;min-height:0}
@media (max-width:640px){.k1-photo{flex:none;aspect-ratio:4/5}}
.k1-cap.in .fix path{stroke-dashoffset:0}
.k1-cap.in .fix .corr{opacity:1}
@media (max-width:1100px){.t2-row{grid-template-columns:1fr}}

/* ══ Один блок «фото слева + текст и подписи справа» (варианты 4–6, 11.11.2026) ══ */
.ob{display:grid;grid-template-columns:clamp(320px,34vw,480px) 1fr;column-gap:clamp(32px,4.5vw,80px);padding-top:48px;min-height:100svh}
.ob-photo{position:relative;overflow:hidden;background:var(--red);margin:0}
.ob-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ob-body{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:56px var(--gut) 40px 0}
.ob-h{font-weight:400;font-size:clamp(30px,3.3vw,56px);line-height:1.12;letter-spacing:-.025em;max-width:880px}
.ob-h .nw::before{content:"";display:inline-block;width:0;height:1.62em}
.ob-h .fix .corr{bottom:92%;font-size:.74em}
.ob-about{margin-top:24px;max-width:600px;font-size:16px;color:var(--ink2)}
.ob-about b{font-weight:500;color:var(--ink)}
/* 4 · карточки (по Кузьмину) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.card{border-top:1px solid var(--ink);padding-top:16px}
.card b{display:block;font-weight:400;font-size:clamp(26px,2.3vw,38px);line-height:1.05;letter-spacing:-.02em}
.card b em{color:var(--red)}
.card p{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink2)}
/* 5 · метки (по Лагуте) */
.tags-top,.tags-bot{display:flex;justify-content:space-between;gap:24px}
.tags-top .mono,.tags-bot .mono{color:var(--ink)}
.tags-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.tags-grid .mono{line-height:1.75}
.tags-grid .mono b{display:block;font-weight:400;color:var(--ink2);margin-bottom:8px}
.tags-grid .mono span{display:block;color:var(--ink)}
.tags-bot a:hover{color:var(--red)}
/* 6 · досье */
.ob .facts{max-width:760px}
@media (max-width:1100px){
  .ob{grid-template-columns:1fr 1fr}
  .cards,.tags-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ob{grid-template-columns:1fr;min-height:0}
  .ob-photo{aspect-ratio:4/5}
  .ob-body{padding:32px var(--gut) 0}
  .tags-top,.tags-bot{flex-direction:column;gap:6px}
}
/* 11.11: фото небольшое, текст о себе сразу рядом; блок компактный, кейсы сразу ниже */
.ob{grid-template-columns:clamp(200px,21vw,300px) 1fr;min-height:0;padding-top:clamp(104px,10vw,160px);align-items:start}
.ob-photo{aspect-ratio:466/600;align-self:start}
.ob-body{padding:0 var(--gut) 0 0;justify-content:flex-start;gap:clamp(32px,3vw,48px)}
.ob-h{font-size:clamp(28px,2.9vw,48px)}
.ob .tags-top{margin-bottom:-8px}
.ob+.after{padding-top:clamp(72px,7vw,112px)}
@media (max-width:1100px){.ob{grid-template-columns:clamp(180px,30vw,260px) 1fr}}
@media (max-width:640px){.ob{grid-template-columns:1fr;padding-top:72px}.ob-photo{width:62%;aspect-ratio:466/600}.ob-body{padding:24px 0 0}}
.ob{padding-left:var(--gut)}

/* ══ Вариант C «по стилю Olha Lazarieva» (11.11.2026) ══ */
.ol{position:relative;min-height:100svh;padding-top:72px;padding-bottom:40px;display:flex;flex-direction:column}
.ol-nav{display:flex;gap:clamp(24px,4vw,64px)}
.ol-nav a{color:var(--ink)}
.ol-nav a:hover{color:var(--red)}
.ol-big{font-family:"Oswald",var(--sans);font-weight:600;text-transform:uppercase;font-size:clamp(64px,12.6vw,210px);line-height:.86;letter-spacing:-.035em;margin-top:clamp(28px,3vw,48px);white-space:nowrap;position:relative;z-index:2}
.ol-big sup{font:400 11px/1 var(--mono);letter-spacing:0;vertical-align:top;position:relative;top:.6em;margin-right:6px;color:var(--ink2)}
.ol-city{display:flex;justify-content:flex-end;letter-spacing:.6em;margin-top:10px}
.ol-mid{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:var(--gut);margin-top:clamp(-70px,-4.5vw,-30px)}
.ol-photo{position:relative;width:clamp(220px,20vw,320px);aspect-ratio:466/600;background:#ddd;margin:0;z-index:1}
.ol-photo img{width:100%;height:100%;object-fit:cover}
.ol-list{justify-self:end;font-family:"Oswald",var(--sans);font-weight:500;text-transform:uppercase;font-size:clamp(18px,1.6vw,26px);line-height:1.2;letter-spacing:-.01em;text-align:left}
.ol-recent{justify-self:end;text-align:right}
.ol-recent b{display:block;font-family:"Oswald",var(--sans);font-weight:600;text-transform:uppercase;font-size:clamp(24px,2.4vw,40px);line-height:1;letter-spacing:-.02em;margin-top:6px}
.ol-recent span.mono{display:block;margin-top:8px}
.ol-about{max-width:560px;margin:clamp(28px,3vw,44px) auto 0;text-align:center;text-transform:uppercase;font:400 13px/1.6 var(--mono);color:var(--ink)}
.ol-about b{font-weight:400;color:var(--red-s)}
.ol-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:32px}
.ol-foot a.mail{font:400 17px/1.3 var(--sans);border-bottom:1px solid var(--ink)}
@media (max-width:1100px){.ol-mid{grid-template-columns:1fr 1fr}.ol-photo{grid-column:1 / -1;justify-self:center;order:-1}}
@media (max-width:640px){.ol-big{font-size:17vw;white-space:normal}.ol-nav{gap:14px;flex-wrap:wrap}.ol-mid{grid-template-columns:1fr;margin-top:16px}.ol-list,.ol-recent{justify-self:start;text-align:left}.ol-foot{flex-direction:column;align-items:flex-start;gap:16px}.ol-city{justify-content:flex-start;letter-spacing:.3em}}
.ol-big{font-size:clamp(60px,16.2vw,290px)}
.ol-foot a.mail{text-transform:none}
.ol{padding-top:24px}
.ol-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.ol-logo{font-family:"Oswald",var(--sans);font-weight:600;text-transform:uppercase;font-size:20px;line-height:.95;letter-spacing:-.02em;color:var(--ink)}
.ol-head .ol-cta{justify-self:end;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px}
@media (max-width:640px){.ol-head{grid-template-columns:1fr auto}.ol-head .ol-nav{grid-column:1 / -1;order:3;margin-top:12px}.ol-big{font-size:16vw}}
.ol-big{font-size:clamp(60px,15.9vw,286px)}
.ol-photo{z-index:3}
/* заголовок не рвётся посреди слова (литеры motion.js) */
.ol-big [aria-hidden]{white-space:nowrap}
@media (max-width:640px){.ol-big{font-size:13.5vw;white-space:nowrap}}

/* слово до краёв на любых широких экранах (5,8 — ширина слова в Oswald 600 к кеглю), портрет не закрывает город на планшете */
@media (min-width:641px){.ol-big{font-size:calc((100vw - 2 * var(--gut) - 36px) / 5.8)}}
@media (max-width:1100px){.ol-mid{margin-top:32px}}
/* выбор Ольги 11.11 (вариант 2): абзац о себе — Onest, не моно-капс */
.ol-about{font:400 17px/1.5 var(--sans);text-transform:none;letter-spacing:0}
@media (max-width:640px){.ol-about{font-size:16px;text-align:left}.ol-foot .mono:last-child{display:flex;flex-direction:column;gap:0}.ol-foot .sep{display:none}}
@media (min-width:641px){.ol-big{font-size:calc((100vw - 2 * var(--gut) - 56px) / 5.8)}} @media (max-width:640px){.ol-big{font-size:13.2vw}} /* «14 лет» шире «2026» */

/* запасной узкий шрифт, если Oswald не загрузился */
.ol-big,.ol-logo,.ol-list,.ol-recent b,.h2,.sub-h .h3,.cs-next .t,.cap h3,.cs-head h1{font-family:"Oswald","Arial Narrow","Helvetica Neue",sans-serif;font-stretch:condensed}
.case-flag .cap h3{font-family:var(--sans);font-stretch:normal}
/* подпись «14 лет в дизайне» длиннее прежней: отдельной строкой над словом */
.ol-big sup{display:block;top:0;margin:0 0 10px}
/* версия «ведущий продуктовый дизайнер»: слово длиннее, две строки */
@media (min-width:641px){.ol-big{font-size:calc((100vw - 2 * var(--gut) - 56px) / 6.7);line-height:.9}}
@media (max-width:640px){.ol-big{font-size:11.2vw;white-space:nowrap;line-height:.95}}
@media (min-width:1101px){.ol-big{font-size:calc((100vw - 2 * var(--gut) - 56px) / 7.6)}.ol-mid{margin-top:-6px}}

/* подвал первого экрана (Ольга 12.11): стрелка ×2, тонкое подчёркивание по длине почты, без точек между контактами */
.ol-foot a.mail{display:inline-block;border-bottom:0;text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:5px;min-height:0}
.ol-foot .mono:last-child{display:flex;gap:clamp(28px,3vw,48px)}
@media (max-width:640px){.ol-foot .mono:last-child{flex-direction:column;gap:0}}
/* версия «ведущий»: вариант 9 — «Продуктовый дизайнер» в одну строку на всю ширину (Ольга 12.11) */
.ol-big{--fs:calc((100vw - 2 * var(--gut)) / 10.51 * 1.0035);font-size:var(--fs);line-height:.86;white-space:nowrap;display:block;margin-top:calc(clamp(28px,3vw,48px) + 1cm)}
.ol-big br{display:none}
.ol-big>span[aria-hidden]:not(.lead){display:inline;margin-left:-.056em}
.ol-big sup{display:block;text-align:left}
.ol-big .lead{color:var(--red);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ol-city{justify-content:flex-end;margin-top:calc(10px + 3mm);margin-right:-.6em}
@media (min-width:1101px){.ol-mid{margin-top:-52px}}
/* сетка первого экрана: низ последней строки списка и «Недавней работы» = нижний край фото (базовая линия, Ольга 12.11) */
@media (min-width:1101px){.ol-list{margin-bottom:-4px}.ol-recent{margin-bottom:-2px}}


/* размеры «Ведущий · 14 лет» и «Москва» поменяны местами (12 ↔ 11 px), высота строк прежняя */
.ol-big sup{font-size:12px;line-height:11px}
.ol-city{font-size:11px;line-height:18px}

@media (max-width:640px){.ol-city{margin-right:-.3em}}

/* решения Ольги 13.11: фото выше на 8 px (перекрытие слова ~22 %), на невысоких экранах группа ниже меню на 12 px ближе */
@media (min-width:1101px){.ol-mid{margin-top:-60px}}
@media (min-width:1101px) and (max-height:820px){.ol-big{margin-top:calc(clamp(28px,3vw,48px) + 1cm - 12px)}}

/* проверка 13.11: «Ведущий» — контраст ≥4,5:1; планшет и телефон */
.ol-big .lead{color:var(--red-s)}
/* 13.11 решение Ольги: «Ведущий» крупнее (18 px), остальное в строке 12 px; высота строки прежняя */
.ol-big .lead{font-size:18px;line-height:11px;letter-spacing:.06em}
@media (min-width:641px) and (max-width:1100px){
  .ol-mid{margin-top:calc(32px - 1.02 * ((100vw - 2 * var(--gut)) / 10.51 * 1.0035))}
  .ol-photo{position:relative;z-index:1}
  .ol-list{justify-self:start}
  .ol-about{margin-top:clamp(40px,6vw,56px)}
}
@media (max-width:640px){
  .ol-big{--fs:calc((100vw - 2 * var(--gut)) / 6.35);white-space:normal;line-height:.9}
  .ol-big>span[aria-hidden]:not(.lead){white-space:normal}
  .ol-city{margin-top:10px;margin-right:-.3em;font-size:12px}
  .ol-mid{margin-top:24px}
}