with the same href and must stay untouched. */
.home-grid:not(.home-grid--comm) > a[href="/projects#encore"] { order: 1; }
}
/* Коммуникации tab — equal-width columns and a tighter gap than the
Брендинг grid's 45fr/55fr + 96px (matches the Figma comp: two
684px columns with a ~24px gap, now three like the 2026 draft — not
the canonical asymmetric grid),
since these cards are all single hero shots, not multi-tile
composites. No case-page link yet, so .proj-block--static is a
plain div, not an anchor — cursor stays default, no hover-link
affordance for a destination that doesn't exist. */
.home-grid--comm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
/* Cards without a subtitle (Купер, Мото 54) used to stretch their image
to the row's height (.home-grid's align-items: stretch + .proj-tiles'
flex: 1) — keep every cover at its own aspect-ratio instead. */
.home-grid--comm .proj-tiles { flex: none; }
/* 3 columns (as in the 2026 draft) get too narrow for the titles below
~900px — two there, one on phones (see the 720px rule below). */
@media (max-width: 900px) {
.home-grid--comm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.proj-block--static { cursor: default; }
.home-more--note { text-align: center; }
/* Same specificity as .home-grid--comm above and later in the
cascade, so without this override it would win over the earlier
mobile .home-grid{grid-template-columns:1fr} rule and force two
half-width columns on mobile instead of one full-width stack. */
@media (max-width: 720px) {
.home-grid--comm { grid-template-columns: 1fr; }
}
/* ---------- About page ---------- */
.page-title {
font-size: clamp(36px, 5vw, 52px);
font-weight: 400;
letter-spacing: -0.01em;
padding-top: 56px;
margin: 0 0 14px;
}
/* .page-hero's height is set by JS (assets/js/main.js) to this page's own
real content height + a fixed 20px — the same 20px as .home-grid's own
margin-top below the line (see there), so the divider sits symmetrically:
exactly 20px under whatever content precedes it, exactly 20px above the
first project row, on every page and at any viewport width. A plain CSS
px/vw guess can't track real text-wrapping (which varies by browser/
font), so this is measured directly instead of estimated. The height
below is just a pre-JS fallback (divider sits right after content). */
.page-hero {
position: relative;
}
.page-hero .page-divider {
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
width: 100vw;
margin-left: -50vw;
border-bottom: 1px solid var(--black);
}
/* About's own reference gap (32px, same as "Опыт работы"'s two divider
lines) for the whitespace around its first divider too. Keeping it
scoped here leaves Contact unchanged. */
#cv-zone {
--about-content-gap: 32px;
--about-gallery-bottom-gap: 32px;
--page-divider-gap: 32px;
}
#cv-zone .page-title { margin-bottom: 0; }
/* Projects: 32px gap from the tabs down to the divider — same value
and same reasoning as Home's own --tight-gap just below (the tabs
are the last element before the line here too now, so this is the
same rule, not a separate "wide" one; the name's just stale). */
.page-hero--wide-gap { --page-divider-gap: 32px; }
/* Home: fixed 32px gap from the БРЕНДИНГ/КОММУНИКАЦИИ tabs down to
this divider, same at every width — matches the reference 32px the
line itself uses down to the project grid below it (.home-grid's
own margin-top), so the line sits with equal space on both sides.
This is JS-measured (see main.js's .page-hero height fit()), not a
plain CSS margin, since the tabs' own height/position isn't
otherwise fixed across pages. */
.page-hero--tight-gap { --page-divider-gap: 32px; }
/* 45fr/55fr, not an equal split — this is the site's one canonical
two-column grid (same ratio as .home-grid and the header's own
.header-align, which is what visibly pins the RU/ENG toggle in the
header on every page), so column 2 lines up with RU/ENG and with
every other two-column block on this page. */
.about-journey {
display: grid;
grid-template-columns: 45fr 55fr;
gap: 32px 96px;
margin-top: 32px;
/* Row items default to stretch, so a short right-column entry
(1-line "Бренд-дизайн") fills the same row height as a taller
left-column one (3-line) and .journey-item's own align-items:center
then centers its text within that borrowed height — pushing its
first line down instead of matching the left column's first line.
align-items:start keeps each item at its own natural height, so
both columns' first lines land on the same row. */
align-items: start;
}
/* align-items:start, not center — with center, whichever child (icon
or date+text) is taller drives this item's own height, and the
SHORTER child then gets centered within that borrowed height. Since
the icon's margin box (see below) is taller than a short one-line
entry's date+text ("Бренд-дизайн"), centering pushed that text down
from the item's own top — breaking the cross-column first-line
alignment .about-journey's align-items:start is supposed to
guarantee (its own diff between icon and item height didn't matter
for the auto-placement, but it did for this text's own position).
start makes date+text ALWAYS begin at this item's own top, no matter
which sibling is taller, restoring that guarantee unconditionally. */
.journey-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
/* align-items:start, not center: the text column must ALWAYS start
at this item's own top, no matter how the icon compares to it —
that's what keeps a paired row's two first lines level (see the
.about-journey comment above). Only the icon itself (via its own
align-self below) centers against whatever that row's height ends
up being. */
align-items: start;
}
.journey-item__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
flex: none;
/* Row height = max(icon, text). When text is taller (the normal
case), this centers the icon against the text's full height. When
the icon is taller than a short one-line entry ("Бренд-дизайн"),
the row height equals the icon's own height, so this resolves to
zero offset — icon and text both simply sit flush at the item's
top instead of the icon overhanging above it. Either way the text
itself never moves, so cross-column first-line alignment holds. */
align-self: center;
}
.journey-item__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.journey-item__years {
display: block;
font-size: 12px;
font-weight: 400;
color: var(--gray-mid);
margin-bottom: 4px;
}
/* Exact same size/line-height/tracking as the hero "statement" lead
text on Home (.hero__bio--statement, "6 лет создаю..."), not a fixed
25px — that diverged from it on mobile (20px there vs 25px fixed
here). */
.journey-item__text {
font-size: clamp(20px, 2.6vw, 32px);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0;
}
@media (max-width: 720px) {
.about-journey { grid-template-columns: 1fr; gap: 32px; }
}
/* On desktop the grid places items row by row (1=top-left, 2=top-right,
3=bottom-left, 4=bottom-right), so DOM order alone can't give both a
chronological mobile stack AND a chronological desktop reading —
mobile needs architecture/filming/brand-design/art-direction in that
DOM order, but that puts filming (2020–2021) top-right and
brand-design (2021–2024) bottom-left, i.e. each column no longer
runs chronologically top-to-bottom. `order` swaps just the visual
desktop position of those two, leaving the DOM (and mobile's source
order) untouched. */
@media (min-width: 721px) {
.about-journey .journey-item:nth-child(1) { order: 1; }
.about-journey .journey-item:nth-child(2) { order: 3; }
.about-journey .journey-item:nth-child(3) { order: 2; }
.about-journey .journey-item:nth-child(4) { order: 4; }
/* Desktop-only bump, mobile stays at 56px — align-items:center above
needs no extra formula for the larger size, it centers against
the text's own full height regardless of icon size. */
.journey-item { grid-template-columns: 64px 1fr; }
.journey-item__icon { width: 64px; height: 64px; }
}
.about-row {
display: grid;
grid-template-columns: 90px 1fr 1fr;
gap: 32px;
margin-top: 32px;
}
.about-row:last-of-type { padding-bottom: 32px; }
@media (max-width: 720px) {
.about-row { grid-template-columns: 1fr; gap: 16px; }
}
/* Mobile: stack label/text/gallery in one flex column so the gallery
row can move above the text (order:-1 below) without touching the
source order or duplicating markup. Desktop switches this to a real
two-column grid below — no separate label column: with it gone,
"Скачать CV" spans its own row above the text instead, freeing the
grid to be the site's actual 45fr/55fr two-column ratio (same as
.home-grid/.header-align, which is what visibly pins the RU/ENG
toggle in the header), rather than three cramped tracks. */
.about-bio-wrap { display: flex; flex-direction: column; }
.about-gallery-row {
/* No margin-top here — .about-bio-wrap's own margin-top (below)
already provides the divider→content gap; adding another one here
(mobile only, since desktop already zeroes this out below) doubled
it to 64px. */
/* Images end at the exact edge of their box, unlike text headings,
so this compensates for the missing line-box whitespace and yields
the same rendered secondary gap below the carousel. */
margin-bottom: var(--about-gallery-bottom-gap);
}
/* The first divider is positioned by main.js; this is its matching
lower gap before the biography on every breakpoint — same 32px
reference gap as the "Опыт работы" section around its own two
divider lines, not the site's larger 56px section module. */
#cv-zone .about-bio-wrap { margin-top: 32px; }
@media (min-width: 721px) {
.about-bio-wrap {
display: grid;
grid-template-columns: 45fr 55fr;
gap: 16px 96px;
}
.about-gallery-row {
grid-column: 2;
grid-row: 1;
align-self: center;
margin-top: 0;
min-width: 0;
}
}
/* Full-bleed black line — same visual language as .page-divider/
.footer-divider — marking the bio→"Опыт работы" transition. Same
32px reference gap as above/below "Опыт работы" itself. */
.about-divider {
position: relative;
height: 1px;
margin-top: 32px;
}
.about-divider::before {
content: "";
position: absolute;
left: 50%;
right: 50%;
top: 0;
width: 100vw;
margin-left: -50vw;
border-bottom: 1px solid var(--black);
}
/* This section's own reference gap: the same 32px used below, between
the last work entry and the footer divider — applied here (top
divider → heading) and on mobile (heading → heading) so every gap
tied to this section's two bounding divider lines, or between its
own headings, uses one consistent value instead of the site's
larger 56px section module. */
#cv-zone .about-experience { margin-top: 32px; }
/* On mobile the two experience columns become consecutive sections.
Separate the second one ("Фриланс") from the final work entry with
this section's own reference gap. ("Скачать CV" now lives inside the
first column, under its h2, so "Фриланс" is the 2nd child of
.about-experience, not the 3rd.) */
@media (max-width: 720px) {
/* .about-row's own 16px grid-gap (row gap, single column here) already
runs between the two columns — without cancelling it, it stacks with
this margin-top (16+32=48) instead of landing on the reference 32. */
#cv-zone .about-experience { gap: 0; }
#cv-zone .about-experience > :nth-child(2) {
margin-top: 32px;
}
}
.about-gallery-caption {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 8px;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.about-gallery-title {
color: var(--gray-mid);
border-bottom: none;
}
.about-gallery-title[aria-disabled="true"] {
cursor: default;
pointer-events: none;
}
.about-gallery-nav {
display: flex;
align-items: center;
gap: 12px;
color: var(--gray-mid);
flex: none;
}
.about-gallery.case__gallery {
width: 100%;
aspect-ratio: 683 / 233;
overflow-x: auto;
overflow-y: hidden;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
padding-bottom: 0;
/* Custom .about-gallery-progress below replaces the native scrollbar
as the "always visible, obviously scrollable" affordance — the
native one (styled further up for the generic .case__gallery) is
hidden here since OS-level auto-hide behavior can't be relied on. */
scrollbar-width: none;
}
.about-gallery.case__gallery::-webkit-scrollbar { display: none; }
.about-gallery.case__gallery img {
height: 100%;
width: auto;
}
.about-gallery-progress {
height: 3px;
margin-top: 8px;
background: var(--gray-line);
position: relative;
overflow: hidden;
}
.about-gallery-progress__thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--gray-mid);
}
/* Desktop only: bleed the gallery itself (images + progress bar, not
the caption row above them) past .wrap's right padding to the true
viewport edge. A negative margin-right would NOT do this — margins
don't extend an element's own box, they only pull whatever comes
after it — so this grows the element's own width past 100% instead,
by exactly the gap between its column's right edge and the viewport
edge: (100vw - wrapWidth)/2 + 24px of .wrap's own padding, where
wrapWidth = min(1600px, 100vw) is .wrap's own actual width (capped
by --container), so this holds at any viewport size instead of just
under 1648px. */
@media (min-width: 721px) {
.about-gallery.case__gallery,
.about-gallery-progress {
width: calc(100% + (100vw - min(1600px, 100vw)) / 2 + 24px);
}
}
@media (max-width: 720px) {
.about-gallery-row {
order: -1;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.about-gallery-caption { padding: 0 16px; }
.about-gallery.case__gallery,
.about-gallery-progress { width: auto; }
.about-gallery.case__gallery { margin: 0; }
.about-gallery-progress { margin: 8px 0 0; }
}
.about-body {
display: grid;
gap: 24px;
max-width: 480px;
margin: 0;
}
.about-body p {
font-size: 15px;
font-weight: 400;
line-height: 1.4;
margin: 0;
}
.brand-name {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Same reasoning as .about-bio-wrap above: drop the separate 90px
label column — "Скачать CV" spans its own row instead — so this
becomes a real 45fr/55fr two-column grid (matching .about-journey/
.home-grid/.header-align) instead of three cramped tracks. */
@media (min-width: 721px) {
.about-experience { grid-template-columns: 45fr 55fr; gap: 16px 96px; }
}
/* Same size/weight/tracking category as the page H1 (.page-title) —
"Опыт работы" / "Фриланс" read as headings, not sub-headings. */
.about-experience h2 {
font-size: clamp(36px, 5vw, 52px);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0 0 32px;
}
.exp-item + .exp-item { margin-top: 0; }
/* Collapsed by default — only the role/company/dates line (black) shows
until the visitor opens it; the link + description (gray) live inside
.exp-item__panel, height-animated via JS setting an explicit
max-height (see main.js), since CSS can't transition to/from "auto". */
.exp-item__toggle {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: 100%;
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.exp-item__role {
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}
.exp-item__place {
text-decoration: underline;
text-underline-offset: 3px;
}
.exp-item__arrow {
flex: none;
width: 7px;
height: 7px;
margin-top: 4px;
border-right: 1px solid var(--black);
border-bottom: 1px solid var(--black);
transform: rotate(-45deg);
transition: transform 0.2s ease;
}
.exp-item__toggle[aria-expanded="true"] .exp-item__arrow { transform: rotate(45deg); }
/* grid-template-rows 0fr->1fr, not max-height — animating max-height
(or height) forces layout recalculation every frame; this variant
only needs the row track size, which the compositor can handle much
more cheaply, and needs no JS scrollHeight measurement either. */
.exp-item__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease;
}
.exp-item__panel.is-open { grid-template-rows: 1fr; }
.exp-item__panel-inner {
overflow: hidden;
min-height: 0;
padding-top: 8px;
}
.exp-item__link {
display: inline-block;
font-size: 15px;
font-weight: 400;
color: var(--black);
margin-bottom: 8px;
}
.exp-item__link:hover { opacity: 0.6; }
.exp-item__desc {
font-size: 15px;
line-height: 1.4;
color: var(--gray-mid);
margin: 0 0 24px;
}
/* ---------- Contact page ---------- */
/* Canonical 45fr/55fr two-column grid (same ratio as .home-grid/
.about-journey/.header-align, which is what visibly pins the RU/ENG
toggle in the header) — list on the left, email/phone on the right. */
.contact-row {
display: grid;
grid-template-columns: 45fr 55fr;
gap: 32px 96px;
margin-top: 32px;
}
/* One tight block with a single shared line-height — like a paragraph
wrapping onto multiple lines — instead of each entry padded out into
its own separate row. */
.contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Same size/weight/line-height/tracking category as the hero
"statement" lead text on Home (.hero__bio--statement, "6 лет создаю
дизайн-системы...") — same category as .contact-statement on the
right, so both columns read as one consistent type scale instead of
the list towering over the email/phone block next to it. */
.contact-list a,
.contact-list span {
display: block;
font-size: clamp(20px, 2.6vw, 32px);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.01em;
}
.contact-list span { color: var(--gray-mid); cursor: default; }
.contact-list a { transition: opacity 0.15s ease; }
.contact-list a:hover { opacity: 0.55; }
/* Same size/weight/line-height/tracking category as the hero
"statement" lead text on Home (.hero__bio--statement, "6 лет создаю
дизайн-системы..."), reused here for the email/phone block. */
.contact-statement {
display: flex;
flex-direction: column;
gap: 4px;
}
.contact-statement a {
font-size: clamp(20px, 2.6vw, 32px);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--black);
transition: opacity 0.15s ease;
}
.contact-statement a:hover { opacity: 0.6; }
@media (max-width: 720px) {
/* Email is too long to share a row with the list at this width, so
it drops below instead. */
.contact-row { grid-template-columns: 1fr; gap: 0; }
.contact-statement { margin-top: 24px; }
}
/* ---------- Projects page ---------- */
/* Asymmetric on purpose: 56px below (tier 2 gap, same module as
About's section gap) keeps real breathing room between one case's
gallery and the next case's divider, but that same 56px above felt
too big for divider-to-content specifically — 30px matches
.case__desc's own margin-bottom (content-to-gallery), so both gaps
inside a single case read as the same size. */
.case {
position: relative;
padding: 32px 0 56px;
}
.case::before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
width: 100vw;
margin-left: -50vw;
border-top: 1px solid var(--black);
}
.case:first-of-type { margin-top: 0; }
.case:first-of-type::before { content: none; }
/* Removed from view everywhere — redundant with the header's own
site-wide RU/ENG toggle, and the role button now takes its old
90px-column spot instead (see .case__desc--split below). Still
rendered (not removed from the DOM) so the shared lang-switch JS
keeps a consistent element set to sync .active across, it just
never takes up visible space. */
.case__lang {
display: none;
gap: 10px;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
}
.case__lang button {
background: none;
border: none;
font: inherit;
color: var(--gray-mid);
cursor: pointer;
padding: 0;
}
.case__lang button.active { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
/* Normal flow now at every width, not just mobile — used to float
above the case's own divider line on desktop (position:absolute,
top:-22px), matching case__year--inline below; both switched to the
mobile-only convention that already existed (case's own 32px
padding-top gives the line-to-title gap for free) at the user's
request, so desktop reads the same as mobile instead of the two
diverging. See .case__head's old mobile-only media query, now
merged in here, and case__year--inline just below. */
.case__head {
position: static;
margin-bottom: 16px;
}
.case__title {
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Caps title width so a long one wraps instead of running into the
site-link now sharing its row (.case__desc--split .case__link, See
that rule) — a real collision at narrower desktop widths for cases
with longer titles (confirmed: "Яндекс Маркет — активация «С Днём
Курьера!»" actually overlapped market.yandex.ru at 721px). 45% + 24px
leaves a comfortable ~29px gap before the link's own left:45% + 52.8px.
Scoped to :not(.case__head--flow) — the minimal communications cases
use a flex row instead (title/year, no link on that row at all), so
they have no collision to guard against and more width to use; this
would just wrap their titles early for no reason. */
@media (min-width: 721px) {
.case__head:not(.case__head--flow) .case__title {
max-width: calc(45% + 24px);
}
}
/* Lives next to the role button (see .case__role-row) instead of
inside .case__head — at mobile's title size a year can't reliably
share the title's own row without wrapping, so it sits with the
role row instead, on every card, not just the ones that would
actually overflow (mixing "year up top" and "year down here"
case-by-case reads as inconsistent). Desktop pulls it back up to
the title's own -22px row below, since there it always has room. */
.case__year {
flex: none;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--gray-mid);
}
.case__role-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
/* Same at every width now, not just mobile — .case__head sits in
normal flow (see its own comment), starting right at .case's own
32px padding-top, so the year lines up with that instead of being
pulled up to float above the divider like it used to on desktop. */
.case__year--inline {
position: absolute;
top: 32px;
right: 0;
}
/* Minimal communications cases (title + year + a single image, no
.case__desc below) don't have that content to visually ground the
-22px "float above your own divider" convention branding cases used
to use via position:absolute — with nothing under it there,
.case__head's own box was collapsing to zero height, which on
mobile Safari specifically left title+year rendering off in the
wrong place entirely (reported as "даты улетели"). This stays in
normal flow instead — no position:absolute at all — so .case always
has real, correctly-measured content driving its height. Branding
cases now use the same flow convention (.case__head, above), so
there's no longer a desktop-only pull-up to match here either —
this is just the one shared convention at every width. */
.case__head--flow {
position: static;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
}
/* A site-link for a minimal communications case (no role/.case__desc at
all yet) — same idea as .case__desc--split .case__link below (see its
own comment), just without that grid to hang off of. Mobile: plain
flow, its own row between the title and the gallery, 32px both sides
to match the site's standard gap. Desktop: pulled onto the title/year
row itself via the same position/top/left this other rule uses, so
the two stay pixel-identical instead of two numbers that happen to
match today. */
.case__head--flow ~ .case__link {
margin-bottom: 32px;
}
@media (min-width: 721px) {
.case__head--flow ~ .case__link {
position: absolute;
top: 32px;
left: calc(45% + 52.8px);
margin-bottom: 0;
}
}
/* The project link used to sit in its own .case__meta row next to
.case__lang; it now lives at the top of the description's right
column (case__desc-col, or — for the single-block .case__desc
cases — its own grid row) so that column's own right edge is what
it aligns to, per the Пермь reference. width:fit-content lets
margin-left:auto pull it there in both a plain block (.case__desc-col)
and as a grid item (.case__desc) — a grid item stretches to fill its
cell by default only when its width stays auto. */
.case__link {
display: block;
width: fit-content;
margin-bottom: 12px;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--gray-mid);
}
.case__link:hover { color: var(--black); }
/* Only takes effect when .case__link is a direct grid child (the
single-block .case__desc cases) — inside a .case__desc-col
(the --split cases) it's just a normal block, unaffected. */
.case__desc > .case__link { grid-column: 2 / span 2; }
.case__desc {
display: grid;
grid-template-columns: 90px 1fr 1fr;
align-items: start;
gap: 16px;
margin-bottom: 32px;
}
.case__desc p {
grid-column: 2 / span 2;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 1.6;
margin: 0 0 14px;
max-width: 640px;
}
/* Two distinct columns (role/contribution, then context/concept)
instead of .case__desc's default single merged block. Column 1's
width is solved algebraically (same approach as .about-bio-wrap in
the About section) so column 2 lands exactly on the site's one
canonical column-2 line — 45fr/55fr with a 96px gap, same ratio as
.home-grid/.about-journey/.header-align, which is what visibly pins
the RU/ENG toggle in the header. That canonical line sits at
0.45*(100% - 96px) + 96px = 45% + 52.8px; subtract this row's own
single 16px gap to get column 1's width (45% + 36.8px). Now that
.case__lang no longer occupies the grid's first slot (see above),
the role column starts where the RU/ENG toggle used to sit instead
of being indented past it. */
.case__desc--split { grid-template-columns: calc(45% + 36.8px) minmax(0, 1fr); }
/* :nth-child(2)/(3), not (1)/(2) — .case__lang is still this grid's
first DOM child even though display:none removes it from the
rendered grid, so both .case__desc-col divs keep the same sibling
index they'd have if it were visible. */
.case__desc--split .case__desc-col:nth-child(2) { grid-column: 1; }
.case__desc--split .case__desc-col:nth-child(3) { grid-column: 2; }
.case__desc--split p {
font-size: 13px;
font-weight: 400;
text-transform: none;
line-height: 1.4;
margin: 0 0 12px;
max-width: 480px;
}
.case__desc--split p:last-child { margin-bottom: 0; }
/* Desktop only: pulls the site-link out of the right column's own flow
(where it used to sit above the paragraph, level with the role row
instead of the title) and up onto the title/year row itself — left
at 45% + 52.8px, the same canonical column-2 line .case__desc--split
itself is built around (see that rule's own comment for the algebra),
so it keeps the exact horizontal position it already had, just
raised to a new top. Taking it out of flow here also does the other
half of the job for free: the paragraph, now the right column's
first child, lands on the role row's own line automatically, no
separate rule needed for that. */
@media (min-width: 721px) {
.case__desc--split .case__link {
position: absolute;
top: 32px;
left: calc(45% + 52.8px);
margin-bottom: 0;
}
}
/* Right column of .case__desc--split as a collapsed-by-default
accordion — same pattern as .exp-item__toggle/__panel in the About
section's "Опыт работы", just sized for this row's 13px/1.4 body
copy instead of that one's 15px. */
.case__role-toggle {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 8px;
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.case__role-title {
font-size: 13px;
font-weight: 400;
line-height: 1.4;
}
.case__role-arrow {
flex: none;
width: 7px;
height: 7px;
margin-top: 4px;
border-right: 1px solid var(--black);
border-bottom: 1px solid var(--black);
transform: rotate(-45deg);
transition: transform 0.2s ease;
}
.case__role-toggle[aria-expanded="true"] .case__role-arrow { transform: rotate(45deg); }
/* max-height (JS-measured, see main.js), not the grid-template-rows
0fr/1fr trick used elsewhere on the site (About's exp-item, Home's
proj-block) — this panel's ancestor (.case__desc-col) switches to
display:contents at mobile width for the role/link row layout, and
that combination reportedly left some cases' text clipped or
overlapping content below on mobile Safari (a transition on a grid
track inside a flattened display:contents ancestor). max-height
sidesteps it entirely by animating a plain block element instead. */
.case__role-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
}
.case__role-panel-inner {
min-height: 0;
/* 13px, not About's own exp-item__panel-inner 8px — this column
sits next to .case__desc-col's static paragraph (right column),
whose own text starts 13px below the link/role row, so this
lands the two paragraphs' first lines on the same row on desktop
instead of the left one sitting ~5px higher. */
padding-top: 13px;
}
.case__role-panel-inner p {
font-size: 13px;
font-weight: 400;
line-height: 1.4;
max-width: 480px;
margin: 0;
}
/* Horizontal filmstrip — matches the source design: every case's
material scrolls sideways at one fixed height, instead of wrapping
into a grid. Add a new project's images in a row of ![]()
tags and
it just works — no layout math needed. */
.case__gallery {
display: flex;
gap: 13px;
overflow-x: auto;
padding-bottom: 10px;
scroll-snap-type: x proximity;
/* Safari-specific: a flex container relying on its tallest item
(the fixed-height img below) for its own height can, on reload,
size itself off the image's un-clamped intrinsic height instead —
reported on the Communications cases (single-image galleries) as
the image blowing past its 300px cap. min-height:0 forces Safari
to size the row from the flex item's used height, not its
content's natural size. */
min-height: 0;
/* Images are loading="lazy" with only height fixed (width:auto), so
each one's rendered width is unknown until it loads — as they load
in one by one, the browser's default scroll-anchoring tries to
"correct" the resulting horizontal layout shift by moving scrollLeft,
landing the gallery scrolled to some mid/end position on load instead
of showing image 1. Opting this container out of scroll anchoring
stops that. */
overflow-anchor: none;
}
.case__gallery img {
height: 300px;
width: auto;
max-width: none;
flex: 0 0 auto;
object-fit: cover;
scroll-snap-align: start;
background: #f2f2f2;
cursor: zoom-in;
}
.case__gallery::-webkit-scrollbar { height: 5px; }
.case__gallery::-webkit-scrollbar-track { background: transparent; }
.case__gallery::-webkit-scrollbar-thumb { background: var(--gray-line); border-radius: 3px; }
/* Case galleries wrapped like this (see projects.html) get the same
always-visible "you can scroll this" affordance as About's carousel
(.about-gallery-progress) — native scrollbars can auto-hide
depending on OS settings, so a custom bar replaces it here instead
of relying on it, plus a centered counter with prev/next arrows. */
.case__gallery-wrap .case__gallery {
padding-bottom: 0;
scrollbar-width: none;
}
.case__gallery-wrap .case__gallery::-webkit-scrollbar { display: none; }
.case__gallery-progress {
height: 3px;
margin-top: 8px;
background: var(--gray-line);
position: relative;
overflow: hidden;
}
.case__gallery-progress__thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--gray-mid);
}
.case__gallery-counter {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 16px;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--gray-mid);
}
.case__empty {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gray-mid);
padding: 20px 0 0;
margin-bottom: 32px;
}
/* Projects hero: same reference 32px above and below the lead statement
on mobile, instead of the desktop-tuned --page-divider-gap and
the empty .hero__left grid row (there for desktop column balance
only) silently padding the gap out further. */
@media (max-width: 720px) {
.page-hero--wide-gap { --page-divider-gap: 32px; }
.page-hero--wide-gap .hero__grid { min-height: 0; }
.page-hero--wide-gap .hero__left { display: none; }
/* Matches the specificity of the shared -33px rule (.page-hero >
.hero__grid .hero__bio--statement, 3 classes) so this override
actually wins instead of silently losing the cascade. */
.page-hero--wide-gap .hero__grid .hero__bio--statement { margin-top: 0; }
}
@media (max-width: 720px) {
/* 720px, not the 760px this used to say — every other mobile/desktop
split on the site (case__head, case__year--inline, etc.) uses 720;
760 was a stray leftover that left a 721-760px gap where content
was still getting the mobile-flattened layout despite being past
the site's own desktop breakpoint. */
/* gap:0 cancels .case__desc's own 16px row-gap (still set on the base
rule) — without it, that stacks with the 32px margin-top below and
the two columns end up 48px apart instead of the reference 32. */
.case__desc { grid-template-columns: 1fr; gap: 0; }
.case__desc p { grid-column: 1; }
/* Role button and site link share one row here too, left/right, same
as desktop's 3-column grid — each .case__desc-col becomes
display:contents so its real children (role-row/role-panel,
link/paragraph) become direct grid items of .case__desc--split
instead of the two columns just stacking as separate blocks. The
collapsible panel and the description paragraph still span the
full width, each on its own row below. */
.case__desc--split {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
column-gap: 16px;
row-gap: 0;
}
.case__desc--split .case__desc-col { display: contents; }
.case__desc--split .case__desc-col:nth-child(2) > .case__role-row {
grid-column: 1;
grid-row: 1;
}
.case__desc--split .case__desc-col:nth-child(3) > .case__link {
grid-column: 2;
grid-row: 1;
justify-self: end;
/* Handled by the paragraph's own margin-top below instead, now that
the link and paragraph are no longer adjacent in the same column. */
margin-bottom: 0;
}
.case__desc--split .case__desc-col:nth-child(2) > .case__role-panel {
grid-column: 1 / -1;
grid-row: 2;
}
/* 29px, not 32 — the role button's own bottom text-leading (~3px) and
the link's own top text-leading (~3px) both sit inside this margin
when going text-to-text, whereas the divider→button gap above only
has ONE leading to absorb (a drawn line has none of its own). 29px
of margin plus those two leadings lands the visually perceived gap
at the same ~35px as above, instead of ~38px if left at 32.
No grid-row here (unlike the row-1/row-2 items above) — a couple of
cases (ATRY, Artisara) have TWO s in this column, and hard-coding
them both to the same row 3 stacked them on top of each other
instead of one after another. Leaving row unset lets grid
auto-placement give each its own row below .case__role-panel. */
.case__desc--split .case__desc-col:nth-child(3) > p {
grid-column: 1 / -1;
margin-top: 0;
}
.case__desc--split .case__desc-col:nth-child(3) > p:first-of-type {
margin-top: 29px;
}
.case__gallery img { height: 220px; }
/* RU/ENG is an inert stub (no English copy exists) — not worth its own
row once the description stacks to one column at this width. */
.case__lang { display: none; }
}
/* ---------- Lightbox (click a gallery image to zoom) ---------- */
.lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
background: rgba(10, 10, 10, 0.92);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
cursor: zoom-out;
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
}
.lightbox img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transform: scale(0.92);
transition: transform 0.3s ease;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox.is-open img {
transform: scale(1);
}
/* ---------- Footer ---------- */
.footer-divider {
position: relative;
}
.footer-divider::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
width: 100vw;
margin-left: -50vw;
border-bottom: 1px solid var(--black);
}
.site-footer {
background: var(--white);
color: var(--black);
}
.site-footer__inner {
position: relative;
padding-top: 32px;
/* Same small gap as the header's own top padding, so the space below
the last footer line matches the space above the header at the
top of the page. */
padding-bottom: 18px;
display: grid;
grid-template-columns: 45fr 55fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"portrait right"
"credit right";
gap: 32px 96px;
}
.site-footer__portrait {
grid-area: portrait;
justify-self: start;
width: clamp(133px, 16vw, 230px);
aspect-ratio: 345 / 181;
}
.site-footer__portrait img { width: 100%; height: 100%; object-fit: contain; display: block; }
.site-footer__credit {
grid-area: credit;
align-self: end;
display: flex;
flex-direction: column;
gap: 0;
font-size: 13px;
font-weight: 400;
line-height: 1.2;
color: var(--black);
}
.site-footer__right {
grid-area: right;
display: flex;
flex-direction: column;
gap: 32px;
}
/* Desktop only: place the "Let's Get Started" mark on the same upper
edge as the right content column. The credit remains pinned to row 2;
mobile keeps its own stacked layout below. */
@media (min-width: 721px) {
.site-footer__portrait {
grid-column: 1;
grid-row: 1 / 3;
align-self: start;
justify-self: start;
width: clamp(89px, 10.7vw, 153px);
}
/* The WebP itself has transparent pixels above the visible lettering
(measured: ~9.4% of its own height) — offset the artwork, not the
grid box, so its ink aligns with the top line of the right text
column. A % offset (not a fixed px) keeps this correct as the
portrait's own width/height clamp with viewport. */
.site-footer__portrait img { transform: translateY(-9.4%); }
.site-footer__credit { grid-column: 1; grid-row: 2; }
.site-footer__right { grid-column: 2; grid-row: 1 / 3; }
}
.site-footer__nav,
.site-footer__social,
.site-footer__contact {
display: flex;
flex-direction: column;
gap: 0;
font-size: 13px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.site-footer__nav a,
.site-footer__social a,
.site-footer__contact a {
position: relative;
}
.site-footer__nav a::after,
.site-footer__social a::after,
.site-footer__contact a::after {
content: "";
position: absolute;
top: -6px;
bottom: -6px;
left: -4px;
right: -4px;
}
.site-footer__nav a { color: var(--black); }
.site-footer__nav a:hover { opacity: 0.6; }
.site-footer__social a,
.site-footer__social span {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--black);
}
.site-footer__social a:hover { opacity: 0.6; }
.site-footer__social img { width: 10px; height: 10px; }
.site-footer__contact { text-transform: none; margin-top: auto; }
.site-footer__contact a { color: var(--black); }
.site-footer__contact a:hover { opacity: 0.6; }
@media (max-width: 720px) {
.site-footer__inner {
grid-template-columns: 1fr;
grid-template-areas:
"portrait"
"right"
"credit";
}
.site-footer__nav { display: none; }
}
@media (max-width: 640px) {
.site-footer__inner { gap: 32px; }
}
/* Project titles, home cards and /projects cases alike: normal case at
16px (the general .proj-block__cap / .case__title rules above are 13px
uppercase), years at the same size so they share the title's line.
Home cards also get a one-line grey subtitle saying what was done. */
.home-grid .proj-block__cap,
.case__title,
.case__year {
font-size: 16px;
text-transform: none;
letter-spacing: 0;
}
.proj-block__sub {
font-size: 13px;
line-height: 1.4;
color: var(--gray-mid);
margin-top: 4px;
}