. The offset
keeps the sticky nav from covering the top when you deep-link to one
(e.g. case-studies.html#apex from a My Work card). */
.case-study { scroll-margin-top: 76px; }
/* ── STATS BLOCK ─────────────────────────────────────────────
Dark metric grid used at the top of case study pages. .stats-row shares
.case-row's exact column formula (1fr + --col-left, same 4rem gap) so
.stats-block — including its own card padding — renders at exactly the
width of .case-main above it at every viewport, not just the widest one.
A hardcoded calc() of the same math would only match at the one breakpoint
where .section-inner is at its full --max width; below that, .case-main
narrows proportionally while a fixed calc() wouldn't, so the two would
drift apart. Sharing the grid instead of duplicating the arithmetic keeps
them locked together by construction. The sidebar track is left empty on
purpose, it's reserved space, not a second column of content.
──────────────────────────────────────────────────────────── */
.stats-row {
display: grid;
grid-template-columns: 1fr var(--col-left);
gap: 0 4rem;
}
/* min-width: 0 matches .case-main's own reset (§ above) — without it, a grid
item's default min-width:auto lets its content (the stat labels' min-content
size) blow the 1fr track past .case-main's width at in-between viewports,
the same overflow .case-main already guards against for its own content. */
.stats-block { padding: 2.5rem; margin: 2rem 0; min-width: 0; }
.stats-grid {
display: grid;
gap: 2px;
}
.stat-cell {
background: var(--black);
padding: 1.5rem 2rem;
}
.stat-number {
font-family: var(--display);
font-size: 2.5rem;
font-weight: 900;
color: var(--white);
line-height: 1;
}
.stat-label {
font-family: var(--display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink4);
margin-top: 6px;
}
/* Breadcrumb — sits at the top of a case study where the old back button used to.
A simple home-icon + chevron trail on the light page (no dark bar): the site's
Oswald label type (uppercase, 0.1em tracking, like the nav) with Material
OUTLINED icons (home + work_outline + chevron_right, per design.md's icon
language). The home icon is the root (links to My Work); the middle "Case
Studies" crumb is a disclosure button that opens a menu of the three studies;
the last crumb is the current page. Clickable crumbs warm to the accent on
hover; the current page is a muted, non-interactive label. */
.breadcrumb {
/* It's a