`
instead of a single `![]()
`. Without it, this absolutely-positioned
flex container (`left: 50%`, no `right`) computed `width: auto` as
50% of `.case-scroll-carousel`'s own width in testing — half the
frame, regardless of how wide the 5 cards actually were — leaving
the other half of the frame visibly empty even at rest, before any
parallax offset was applied at all ("половина пустая"). An `![]()
`
never had this problem because its own intrinsic width drove
shrink-to-fit sizing directly; a flex container's content-based
width apparently isn't inferred the same way in this
position:absolute + left-only setup. Verified via
`getBoundingClientRect()`: without the fix, `scrollWidth` (1595px,
the real content width) and `offsetWidth` (700px) diverged sharply;
with `width: max-content` they match. */
.case-scroll-carousel {
position: relative;
height: clamp(240px, 34.7vw, 460px);
overflow: hidden;
}
.case-scroll-strip {
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: max-content;
display: flex;
gap: 1rem;
transform: translateX(-50%);
will-change: transform;
}
.case-scroll-strip img {
height: 100%;
width: auto;
display: block;
}
/* full-bleed single image — flat, no border/rule, no scrim. Aspect
ratio is set per-instance via an inline `style="aspect-ratio: …"`
since each one is a deliberate crop (portrait lookbook shot vs. a
wide signage banner), not a fixed system value. */
.case-figure { overflow: hidden; }
.case-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the mark, presented as a specimen rather than cropped into a
figure — contained, centred, no background box (the source photo
is already white/transparent, a paper-2 box under it just muddies
it), so the logo reads at a glance instead of competing with a
photographic crop */
.case-figure-mark {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(2rem, 9vw, 5rem) var(--gutter);
}
.case-figure-mark img { width: auto; height: clamp(160px, 22vw, 320px); display: block; }
/* two-up pairs — two related shots side by side as one narrative
beat. Flat: plain gap, no ink gridline, no caption. */
.case-pair {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
margin: 0;
padding: 0;
}
.plate { aspect-ratio: 4 / 3; overflow: hidden; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a poster/video pairing that keeps each item's OWN natural aspect
ratio instead of force-cropping into .plate's fixed 4:3 — used
where the source (e.g. a full A4 poster) needs to be seen whole,
not cropped into a uniform grid cell. Each child sizes itself via
its own aspect-ratio (set inline per-instance, same pattern as
.case-figure). */
.case-pair-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
align-items: start;
}
.case-pair-media img { width: 100%; display: block; }
.case-pair-media .video-frame {
position: relative;
overflow: hidden;
}
.case-pair-media .video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 640px) {
.case-pair-media { grid-template-columns: 1fr; }
}
/* stacked half-width beats, alternating left/right — reuses the same
`.case-half-item` primitive as `.case-split-half` above (defined
there, not repeated here), just arranged in a column instead of a
row: one full-bleed block per row instead of two side by side. */
.case-stack-half {
display: flex;
flex-direction: column;
}
/* "big" featured spreads (as opposed to the small wall-grid thumbnails
further down the page) — direct follow-up request: "сделай на 20%
меньше большие развороты и помести их на темный фон для контраста".
Each spread is a white book page, so sitting it directly on the
site's own off-white paper background gave it almost no edge
definition; shrinking it and mounting it on --ink reads as a
deliberate "plate on a dark mount" and echoes the wall section's own
dark treatment instead of introducing a third, unrelated look. */
.case-spread-feature {
background: var(--ink);
padding: clamp(2rem, 5vw, 4rem) var(--gutter);
display: flex;
justify-content: center;
}
.case-spread-feature img {
width: 80%;
display: block;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.case-spread-feature-pair { gap: clamp(1rem, 3vw, 2rem); }
.case-spread-feature-pair img { width: 38%; }
@media (max-width: 640px) {
.case-spread-feature-pair { flex-direction: column; }
.case-spread-feature-pair img { width: 80%; }
}
/* Schizorevolution's closing "wall of spreads" — the whole book laid
out on the site's own dark ink, direct request with a reference
screenshot to match exactly ("страницы поместим на наш фирменный
черный фон... как на прикрепленном скриншоте"). This is the one
place on the site that puts a shadow under content photography —
everywhere else (Prostor's plates, case-pair, case-figure) is
deliberately flat/borderless by an earlier, explicit decision — but
the reference here shows each page as a separate floating sheet on
black, and that was the specific brief for this one section, not a
drift back toward the shadowed look that was rejected elsewhere.
Thumbnails are a dedicated small export (wall-*.jpg, ~30-40KB each)
— at 25 images, the full 1500px spread-*.jpg files would be ~8MB
for this block alone; the small ones are just for the grid, while
each tile's data-lightbox-gallery points at the full-res files for
the actual full-size view. align-items: start keeps each image at
its own natural height (the cover is portrait, spreads are
landscape) rather than stretching every tile to match its row. */
.case-spread-wall {
background: var(--ink);
padding: clamp(1.6rem, 4vw, 3.2rem) var(--gutter);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
align-items: start;
gap: clamp(0.8rem, 2vw, 1.6rem) clamp(0.6rem, 1.6vw, 1.2rem);
}
.case-spread-wall img {
width: 100%;
display: block;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* the cover is a single page (portrait), every other tile is a double-
page spread (landscape, roughly twice as wide relative to its
height) — at the same column width that made the cover render
about 2x as tall as a spread tile ("открывающая страница стала в
два раза больше"). Halving its width brings its rendered height
back in line with the spread tiles beside it, reflecting the real
page-vs-spread size relationship instead of fighting it with a
forced/cropped aspect-ratio. */
.case-spread-wall img.is-single-page {
width: 50%;
margin: 0 auto;
}
/* Naja Slab Serif's actual webfont, self-hosted — the case study has
almost no photography (just a cover shot and a specimen video), so
rather than fake the type in a screenshot, the real .woff is loaded
and set live on the page itself. Only a Regular weight exists. */
@font-face {
font-family: "Naja Slab Serif";
src: url("images/naja-slab-serif/NajaSlabSerif-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
.naja-specimen {
background: var(--ink);
color: var(--paper);
padding: clamp(2rem, 6vw, 4rem) var(--gutter);
}
.naja-specimen p {
font-family: "Naja Slab Serif", var(--font-body);
font-size: clamp(1.4rem, 5vw, 3.2rem);
line-height: 1.25;
word-break: break-word;
}
.naja-specimen p + p { margin-top: 0.5em; }
/* ---------- lightbox: click any content photo to see it full-size ----------
Generic and site-wide by design — nav.js attaches this to every
![]()
that isn't inside an (work-list thumbnails stay plain
navigation links, the header logo is excluded too), so any image
added to any page picks this up automatically, no per-image markup
needed. */
/* two earlier attempts at a hover affordance here, both since replaced:
a real CSS `cursor: url()` eye (laggy/glitchy regardless of size,
abandoned same day), then a floating eye ![]()
drawn above the
pointer by nav.js (worked, but simplified to plain text on request
— "просто на ховер появится надпись open над курсором"). The native
cursor stays a plain pointer (see `.work-entry-link` etc.) — no
custom cursor CSS at all here. */
img.is-lightboxable { cursor: pointer; }
/* the floating "Open" label itself — a dark chip (not bare coloured
text) so it stays legible over any photo regardless of that photo's
own brightness, same reasoning as the hero marquee's scrim. Hidden
once the lightbox opens (nav.js hides it on click). */
.lightbox-cursor-label {
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, calc(-100% - 20px));
pointer-events: none;
z-index: 60;
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--paper);
background: var(--ink);
padding: 0.35rem 0.7rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.15s ease;
}
.lightbox-cursor-label.is-visible { opacity: 1; }
.lightbox-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 5vw, 3rem);
background: rgba(33, 30, 29, 0.92);
cursor: zoom-out;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
.lightbox-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.15s ease;
}
.lightbox-overlay img {
max-width: 100%;
max-height: 100%;
width: auto;
object-fit: contain;
cursor: default;
}
body.lightbox-open { overflow: hidden; }
/* prev/next — only shown when the page actually has more than one
lightboxable photo to step through (`.has-multiple`, set once in
nav.js at setup, since the candidate count never changes at runtime) */
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: 0;
padding: 0.75rem 1rem;
font-family: var(--font-mono);
font-size: 2rem;
line-height: 1;
color: var(--paper);
opacity: 0.6;
cursor: pointer;
transition: opacity 0.15s ease;
}
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
.lightbox-overlay:not(.has-multiple) .lightbox-nav { display: none; }
/* "n / total" position indicator — same visibility rule as the arrows */
.lightbox-counter {
position: absolute;
bottom: clamp(1rem, 4vw, 2rem);
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.05em;
color: var(--paper);
opacity: 0.75;
}
.lightbox-overlay:not(.has-multiple) .lightbox-counter { display: none; }
/* previous/all/next — .case-nav-item.is-disabled (plain, unlinked,
dimmed span) is for when there's genuinely no neighbouring case
study to point to yet (e.g. Prostor's "previous", Mamy i Papy's
"next" — Prostor is first, Mamy i Papy is second, nothing before
or after either of those ends). Swap in a real
the moment a real neighbour exists —
don't leave a fake href pointing nowhere. */
/* a 3-column grid, not flex + space-between — space-between only
centres the middle item when the two flanking items happen to be
equal width, which "← Previous work" / "Next work →" aren't (the
real bug: "All works" was reported off-centre). Two equal 1fr
side-columns guarantee equal left/right whitespace, so the middle
`auto` column sits at the true visual centre regardless of how
long the flanking labels are. */
.case-nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: 3rem var(--gutter) 4rem;
border-top: 1px solid var(--line-strong);
}
.case-nav-item:first-child { justify-self: start; }
.case-nav-item:nth-child(2) { justify-self: center; }
.case-nav-item:last-child { justify-self: end; }
.case-nav-item {
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink);
text-decoration: none;
border-bottom: 2px solid var(--ink);
padding-bottom: 2px;
}
a.case-nav-item:hover { color: var(--accent); border-bottom-color: var(--accent); }
.case-nav-item.is-disabled {
color: var(--ink-soft);
opacity: 0.45;
border-bottom-color: transparent;
}
@media (max-width: 640px) {
.case-pair { grid-template-columns: 1fr; }
/* "← Previous work" / "Next work →" wrapped onto two lines in their
narrow 1fr grid column at the full 0.85rem size — same fix as the
header nav and work-filter above */
.case-nav-item { font-size: 0.72rem; }
}
/* ---------- about page ----------
Reuses the same .case-head/.case-lede/.case-body rhythm as the
case-study pages — one shared "long-form text page" pattern across
the site rather than a bespoke layout just for About. */
.about-contact { margin: 0 0 0.75rem; }
.about-contact:last-child { margin-bottom: 0; }
.about-contact a {
font-family: var(--font-mono);
font-weight: 700;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink);
text-decoration: none;
border-bottom: 2px solid var(--ink);
padding-bottom: 2px;
}
.about-contact a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* ---------- case study: buy / contact-to-license ---------- */
/* same bold-mono-underline treatment as .about-contact, kept separate
since it means something different here (a purchase or licensing
call to action, not a general contact block) — a page with a real
store link (e.g. Gumroad) gets a direct "Buy" link; a page without
one gets a prompt to contact the author instead, "любым способом"
(by any means) — see case-ardica.html vs case-naja-slab-serif.html */
.case-purchase { padding: 0 var(--gutter) 3rem; }
.case-purchase-note {
font-family: var(--font-mono);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink-soft);
margin: 0 0 0.75rem;
}
.case-purchase p { margin: 0 0 0.75rem; }
.case-purchase p:last-child { margin-bottom: 0; }
.case-purchase a {
font-family: var(--font-mono);
font-weight: 700;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink);
text-decoration: none;
border-bottom: 2px solid var(--ink);
padding-bottom: 2px;
}
.case-purchase a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* ---------- 404 ---------- */
.not-found-body { padding: 1rem var(--gutter) 4rem; }
.not-found-body a {
display: inline-block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.03em;
text-decoration: none;
color: var(--ink);
border-bottom: 2px solid var(--ink);
}
.not-found-body a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* ---------- footer ---------- */
.site-footer {
position: relative;
z-index: 2;
background: var(--paper);
border-top: var(--rule) solid var(--ink);
padding: 1.5rem var(--gutter) 2.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
justify-content: space-between;
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink-soft);
}
.site-footer a { text-decoration: none; color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
/* ---------- focus ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero-marquee-track { animation: none; }
}