/* ============================================================
case.css — Shared layout + typography for case-study pages
------------------------------------------------------------
Pulls the same design language as home-v8.css:
- VT323 for the H1 marquee (--font-display)
- system-ui sans for h2/h3/subtitle/meta values (--font-heading)
- Inter for body copy (--font-body)
- JetBrains Mono for eyebrows + back link (--font-mono)
on the cream canvas defined by tokens.css. Self-contained:
does not depend on home-v8.css. Pair this with:
tokens.css must come last so --site-bg wins.
No serif fonts. The design system uses VT323 for display,
system-ui sans for headings, Inter for body, JetBrains Mono
for mono — and nothing else.
============================================================ */
:root {
/* Brand */
--primary: #1F4D3A;
--primary-active: #143426;
--primary-soft: #B4CDC0;
/* Ink scale */
--ink: #141413;
--body-strong: #252523;
--body: #3d3d3a;
--muted: #6c6a64;
--muted-soft: #8e8b82;
/* Surface */
--canvas: #fcfcfb;
--surface-soft: #f4f3ee;
--surface-card: #ece9e0;
--hairline: #e7e3da;
--hairline-soft: #eeebe3;
/* Layout */
--pad-page: 24px;
--max-w: 1200px;
--read-w: 720px;
/* Per-case theming — overridden inline in each page */
--case-grad: linear-gradient(135deg, #181715, #2a2725, #423d36);
--case-accent: var(--primary);
}
@media (min-width: 768px) { :root { --pad-page: 48px; } }
@media (min-width: 1200px) { :root { --pad-page: 72px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--canvas);
color: var(--body);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--primary-soft); color: var(--ink); }
a { color: inherit; text-decoration: none; transition: color .15s ease, opacity .15s ease; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }
em { font-style: italic; }
/* Heading family — used for everything except the H1 marquee. */
.case h2, .case h3,
.case__subtitle,
.case__sub-title {
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: -0.012em;
}
/* ============================================================
Header / back link
============================================================ */
.case__back {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 56px;
transition: color .15s ease, transform .15s ease;
}
.case__back:hover {
color: var(--case-accent);
transform: translateX(-2px);
}
/* ============================================================
Header block
============================================================ */
.case {
max-width: var(--max-w);
margin: 0 auto;
padding: 64px var(--pad-page) 0;
}
.case__title {
font-family: var(--font-heading);
font-size: clamp(44px, 5.6vw, 72px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
max-width: 18ch;
margin: 0 0 20px;
}
.case__subtitle {
font-size: clamp(20px, 2vw, 24px);
line-height: 1.45;
color: var(--muted);
max-width: 56ch;
font-style: normal;
font-weight: 400;
margin: 0 0 56px;
}
/* ============================================================
Meta strip — Role / Timeline / Platform / Scope / Team
============================================================ */
.case__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 28px;
padding: 28px 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.case__meta-item label {
display: block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.case__meta-item span {
font-family: var(--font-heading);
font-weight: 500;
font-size: 16px;
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--ink);
}
/* ============================================================
Hero visual & inline visuals — gradient blocks with caption
============================================================ */
.case__hero {
width: 100%;
aspect-ratio: 16 / 7;
margin: 64px 0 0;
background: var(--case-grad);
border-radius: 0;
position: relative;
overflow: hidden;
}
/* When a real ![]()
or