/* ==========================================================================
   mescheryakov.ru — дизайн-система сайта
   Один шрифт (Onest), одна шкала размеров, одна шкала отступов.
   Брейкпоинты: 576 / 768 / 992 / 1400. Всё остальное — плавные clamp().
   ========================================================================== */
@font-face {
    font-family: 'Onest';
    src: url('/css/Onest-VariableFont_wght.woff2') format('woff2'),
         url('/css/Onest-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* цвета */
    --bg: #E8EEF3;
    --bg-2: #dde5ec;
    --ink: #2D364E;
    --muted: rgba(45, 54, 78, .62);
    --line: rgba(45, 54, 78, .16);
    --accent: #ff5722;
    --ph: #cfd9e3;

    /* шкала шрифтов */
    --fs-hero: clamp(2.75rem, 15vw, 26rem);
    --fs-h1: clamp(2.5rem, 8vw, 9rem);
    --fs-h2: clamp(1.875rem, 4.4vw, 5rem);
    --fs-h3: clamp(1.25rem, 1.9vw, 2.25rem);
    --fs-lead: clamp(1.25rem, 2vw, 2.5rem);
    --fs-body: clamp(1rem, .5vw + .75rem, 1.25rem);
    --fs-sm: clamp(.8125rem, .2vw + .75rem, .9375rem);

    /* шкала отступов */
    --gutter: clamp(16px, 3.2vw, 64px);
    --gap: clamp(12px, 1.8vw, 32px);
    --stack: clamp(56px, 9vw, 176px);
    --section: clamp(96px, 14vw, 280px);

    --radius: clamp(6px, .8vw, 16px);
    --measure: 46rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font: 400 var(--fs-body)/1.6 'Onest', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, video, iframe, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- типографика ---------- */
.eyebrow {
    font: 600 var(--fs-sm)/1.2 'Onest', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}
.b-title, .h2 { font: 700 var(--fs-h2)/1.02 'Onest', sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.b-title--sm, .h3 { font: 600 var(--fs-h3)/1.1 'Onest', sans-serif; letter-spacing: -.02em; }
.lead { font: 500 var(--fs-lead)/1.25 'Onest', sans-serif; letter-spacing: -.015em; text-wrap: pretty; }
.prose > * + * { margin-top: 1.1em; }
.prose a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prose strong { font-weight: 650; }

/* шапка и меню — в css/main.css (общие для всех страниц, см. inc/header.php) */

/* ---------- главная: первый экран ---------- */
.hero {
    min-height: 100svh;
    padding: 0 var(--gutter) var(--gap);
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: clamp(20px, 3vw, 48px);
}
.hero__name {
    font: 800 var(--fs-hero)/.86 'Onest', sans-serif;
    letter-spacing: -.055em;
    text-transform: uppercase;
    margin-left: -.04em;
}
.hero__row {
    display: grid; gap: 20px;
    border-top: 1px solid var(--line);
    padding-top: clamp(16px, 2vw, 28px);
}
.hero__lead { max-width: 30ch; }
.hero__tags { font: 500 var(--fs-sm)/1.6 'Onest', sans-serif; color: var(--muted); max-width: 40ch; }

/* ---------- секции ---------- */
.section { padding: var(--section) var(--gutter) 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 64px); }
.section__head .count { font: 500 var(--fs-lead)/1 'Onest', sans-serif; color: var(--muted); }

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 3vw, 48px); }
.chip {
    font: 500 var(--fs-sm)/1 'Onest', sans-serif; padding: 9px 14px; border-radius: 99px;
    border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: .2s;
}
.chip:hover { border-color: var(--ink); }
.chip.is-set { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- сетка карточек ----------
   телефон:        1 колонка,  фото 4:5
   планшет:        2 колонки,  фото 4:5
   компьютер ≥992: 12 колонок, ряды «широкая 7:5 + квадрат 1:1», затем зеркально       */
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 96px) var(--gap); }
.card { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.card.is-hidden { display: none; }
.card .media { flex: 0 0 auto; aspect-ratio: 4 / 5; }
.card .media img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.card:hover .media img { transform: scale(1.035); }
.card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; }
.card__title { font: 600 var(--fs-h3)/1.12 'Onest', sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.card__year { font: 500 var(--fs-sm)/1 'Onest', sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { font: 500 .8125rem/1 'Onest', sans-serif; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }

/* ---------- универсальный медиа-контейнер ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ph); aspect-ratio: var(--rm, auto); }
.media > img, .media > video, .media > iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.media > img[width] { height: 100%; }

/* ---------- обо мне ---------- */
.about { display: grid; gap: clamp(24px, 4vw, 64px); }
.about .about__photo { aspect-ratio: 4 / 5; }
.about__body > * + * { margin-top: clamp(20px, 2.5vw, 40px); }
.services { list-style: none; border-top: 1px solid var(--line); }
.services li { padding: 14px 0; border-bottom: 1px solid var(--line); font: 500 var(--fs-h3)/1.15 'Onest', sans-serif; letter-spacing: -.02em; }

/* ---------- контакты и подвал ---------- */
.contacts { padding-bottom: var(--section); }
.contacts__mail {
    display: inline-block; margin-top: clamp(20px, 3vw, 48px);
    font: 700 clamp(1.75rem, 7.4vw, 9rem)/1 'Onest', sans-serif; letter-spacing: -.045em; text-decoration: none; word-break: break-word;
    background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0 .06em; background-position: 0 100%; transition: background-size .5s;
}
.contacts__mail:hover { background-size: 100% .06em; }
.contacts__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 3vw, 40px); }
.contacts__links a { font: 500 var(--fs-body)/1 'Onest', sans-serif; padding: 13px 20px; border-radius: 99px; border: 1px solid var(--ink); text-decoration: none; transition: .2s; }
.contacts__links a:hover { background: var(--ink); color: var(--bg); }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px var(--gutter) 28px; border-top: 1px solid var(--line); font: 500 var(--fs-sm)/1.4 'Onest', sans-serif; color: var(--muted); }

/* ==========================================================================
   Страница кейса
   ========================================================================== */
.case-hero { padding: clamp(112px, 16vw, 240px) var(--gutter) 0; }
.case-hero h1 { font: 700 var(--fs-h1)/.95 'Onest', sans-serif; letter-spacing: -.045em; margin-top: clamp(14px, 2vw, 28px); text-wrap: balance; max-width: 16ch; }
.case-hero .lead { margin-top: clamp(16px, 2vw, 32px); max-width: 32ch; color: var(--muted); }
.case-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--gap); padding: clamp(28px, 4vw, 64px) var(--gutter); }
.case-meta dt { font: 600 var(--fs-sm)/1.2 'Onest', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.case-meta dd { margin-top: 6px; font: 500 var(--fs-body)/1.35 'Onest', sans-serif; }
.case-cover { margin: 0; }
.case-cover .media { --r: 21 / 9; --rm: 4 / 5; border-radius: 0; max-height: 92svh; width: 100%; }
.case-intro { padding: var(--stack) var(--gutter) 0; }
.case-intro .lead { max-width: 40ch; }
.case-intro .lead + .lead { margin-top: 1.1em; color: var(--muted); }

/* ---------- блоки ---------- */
.b { margin: var(--stack) 0; padding-inline: var(--gutter); }
.b.is-full { padding-inline: 0; }
.b.is-full .media { border-radius: 0; }
.b figcaption { padding: 12px 0 0; font: 500 var(--fs-sm)/1.4 'Onest', sans-serif; color: var(--muted); }
.b.is-full figcaption { padding-inline: var(--gutter); }

.b-text__in { max-width: var(--measure); margin-inline: auto; }
.b-text--wide .b-text__in { max-width: 66rem; }
.b-text .b-title { margin-top: 14px; }
.b-text .prose { margin-top: clamp(18px, 2vw, 32px); }

.b-image .media, .b-video .media { width: 100%; }

.b-split { display: grid; gap: var(--gap); align-items: center; }
.b-split__body { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 24px); }
.b-split__body .prose { max-width: 36rem; }

.b-gallery__grid { display: grid; grid-template-columns: repeat(var(--cols-m, 2), 1fr); gap: var(--gap); align-items: start; }

.b-metrics .b-title { margin-bottom: clamp(24px, 4vw, 64px); max-width: 18ch; }
.b-metrics__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 64px) var(--gap); }
.b-metrics__grid > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.b-metrics dt { font: 700 clamp(2.5rem, 7vw, 8rem)/.95 'Onest', sans-serif; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.b-metrics dd { margin-top: 12px; font: 500 var(--fs-body)/1.35 'Onest', sans-serif; color: var(--muted); max-width: 22ch; }

.b-quote { margin-inline: 0; }
.b-quote blockquote { font: 600 clamp(1.625rem, 4.4vw, 5rem)/1.1 'Onest', sans-serif; letter-spacing: -.035em; max-width: 22ch; text-wrap: balance; }
.b-quote blockquote::before { content: '«'; margin-left: -.55em; color: var(--accent); }
.b-quote blockquote::after { content: '»'; color: var(--accent); }
.b-quote figcaption { padding-top: clamp(16px, 2vw, 32px); display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-body); color: var(--ink); }
.b-quote figcaption span { color: var(--muted); font-size: var(--fs-sm); }

.cmp { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp__after, .cmp__before { position: absolute; inset: 0; }
.cmp__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.cmp__after img, .cmp__before img { width: 100%; height: 100%; object-fit: cover; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.cmp__handle::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D364E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cmp__tag { position: absolute; bottom: 14px; padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.85); font: 600 .8125rem/1 'Onest', sans-serif; pointer-events: none; }
.cmp__tag--l { left: 14px; } .cmp__tag--r { right: 14px; }

.case-next { padding: var(--section) var(--gutter) var(--stack); }
.case-next a { display: block; text-decoration: none; }
.case-next .b-title { margin-top: 14px; max-width: 14ch; }
.case-next .media { margin-top: clamp(20px, 3vw, 48px); --r: 21 / 9; --rm: 4 / 5; }
.case-next .media img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.case-next a:hover .media img { transform: scale(1.03); }

.notfound { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 var(--gutter); }
.notfound h1 { font: 800 var(--fs-hero)/.86 'Onest', sans-serif; letter-spacing: -.055em; }
.preview-bar { white-space: nowrap; position: fixed; z-index: 99; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 99px; font: 500 14px/1 'Onest', sans-serif; }

/* ---------- появление ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .card .media img, .case-next .media img { transition: none; }
}

/* ==========================================================================
   576+  — большой телефон / маленький планшет
   ========================================================================== */
@media (min-width: 576px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .case-meta { grid-template-columns: repeat(4, auto); justify-content: start; gap: 20px clamp(32px, 6vw, 96px); }
    .b-metrics__grid { grid-template-columns: repeat(var(--n, 4), 1fr); }
}

/* 768+ — планшет: настоящие пропорции блоков вместо телефонных */
@media (min-width: 768px) {
    .media { aspect-ratio: var(--r, auto); }
    .hero__row { grid-template-columns: 1fr 1fr; align-items: start; }
    .hero__tags { justify-self: end; text-align: right; }
    .b-gallery__grid { grid-template-columns: repeat(var(--cols, 3), 1fr); }
    .b-split { grid-template-columns: repeat(12, 1fr); }
    .b-split__media { align-self: stretch; }
    .b-split--left .b-split__media { grid-column: 1 / 7; grid-row: 1; }
    .b-split--left .b-split__body  { grid-column: 8 / 13; grid-row: 1; }
    .b-split--right .b-split__body  { grid-column: 1 / 6; grid-row: 1; }
    .b-split--right .b-split__media { grid-column: 7 / 13; grid-row: 1; }
    .b-split__body { align-self: var(--valign, center); }
    .about { grid-template-columns: repeat(12, 1fr); align-items: start; }
    .about__photo { grid-column: 1 / 6; position: sticky; top: 90px; }
    .about__body { grid-column: 7 / 13; }
    .case-cover .media, .case-next .media { aspect-ratio: 21 / 9; }
}

/* 992+ — компьютер: редакторская сетка */
@media (min-width: 992px) {
    .cards { grid-template-columns: repeat(12, 1fr); }
    .card .media { flex: 1 0 auto; }
    .card:nth-child(4n+1), .card:nth-child(4n+4) { grid-column: span 7; }
    .card:nth-child(4n+2), .card:nth-child(4n+3) { grid-column: span 5; }
    .card:nth-child(4n+1) .media, .card:nth-child(4n+4) .media { aspect-ratio: 7 / 5; }
    .card:nth-child(4n+2) .media, .card:nth-child(4n+3) .media { aspect-ratio: 1 / 1; }
    /* последняя одиночная карточка — на всю ширину */
    .card:nth-child(4n+1):last-child, .card:nth-child(4n+3):last-child { grid-column: 1 / -1; }
    .card:nth-child(4n+1):last-child .media, .card:nth-child(4n+3):last-child .media { aspect-ratio: 21 / 9; }
}

/* 1400+ — широкий экран */
@media (min-width: 1400px) {
    .hero__row { grid-template-columns: 1fr 1fr 1fr; }
    .hero__tags { grid-column: 3; }
}
/* 1900+ — очень широкие мониторы: фото в кейсах не растягиваем выше экрана */
@media (min-width: 1900px) {
    .case-cover .media { max-height: 88svh; }
}

/* ---------- якорные ссылки под заголовком кейса ---------- */
.case-anchors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(18px, 2.4vw, 36px); }
.case-anchor { font: 500 clamp(14px, .3vw + 12px, 17px)/1 'Onest', sans-serif; text-decoration: none; padding: 10px 15px; border-radius: 99px; background: rgba(255,255,255,.72); color: var(--ink); transition: background .2s, color .2s; }
a.case-anchor:hover { background: var(--ink); color: var(--bg); }
.case-anchor.is-static { opacity: .6; }