/**
* Tarkowska Portfolio — Design Tokens
* Linked by every page (index.html, portfolio.html, case-study-*.html).
* Fonts: Inter (400/500/600/700) + Instrument Serif (italic)
*/
/* ─── Google Fonts import ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
/* ─── Base tokens ─────────────────────────────────────────── */
:root {
/* Colors */
--color-bg: #ffffff;
--color-ink: rgb(57, 57, 57); /* primary text */
--color-muted: rgb(115,111,111) /* secondary text — WCAG AA 4.96:1 on white */; /* secondary text */
--color-muted-2: rgb(207, 207, 207); /* placeholder / disabled */
--color-line: rgb(230, 230, 230); /* borders / dividers */
--color-chip: rgb(239, 239, 239); /* tag backgrounds */
--color-surface: rgb(248, 247, 247); /* subtle card bg */
--color-surface-2: rgb(249, 249, 249); /* hover on surface */
--color-accent: rgb(255,88,34); /* orange — CTAs, active — decorative */
--color-accent-text: rgb(255,88,34); /* orange — CTAs, active */
/* Semantic aliases */
--bg: var(--color-bg);
--ink: var(--color-ink);
--muted: var(--color-muted);
--muted-2: var(--color-muted-2);
--line: var(--color-line);
--chip: var(--color-chip);
--surface: var(--color-surface);
--surface-2:var(--color-surface-2);
--accent: var(--color-accent);
--accent-text: var(--color-accent-text);
/* Typography — families */
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Instrument Serif', Georgia, serif;
--font-mono: ui-monospace, Menlo, 'Courier New', monospace;
/* Typography — scale */
--text-hero: clamp(44px, 6.4vw, 80px); /* hero h1 */
--text-display: clamp(36px, 4.8vw, 64px); /* about h1 */
--text-h2: clamp(28px, 3.4vw, 40px); /* section heads */
--text-h3: clamp(24px, 2.4vw, 34px); /* narrative heads */
--text-project-h1:clamp(40px, 5.2vw, 72px); /* project page */
--text-body-lg: 17px; /* lede / primary body */
--text-body: 16px; /* standard body */
--text-body-sm: 15px; /* secondary body */
--text-ui: 14px; /* buttons, nav */
--text-ui-sm: 13.5px; /* small UI */
--text-label: 11px; /* eyebrow / sec-label */
--text-tag: 10px; /* chips */
--text-meta: 10px; /* year, tabular */
--text-mono: 10px; /* placeholder labels */
/* Typography — tracking */
--tracking-hero: -0.03em;
--tracking-h2: -0.02em;
--tracking-h3: -0.015em;
--tracking-label: 0.16em;
--tracking-tag: 0.12em;
--tracking-meta: 0.04em;
--tracking-mono: 0.1em;
/* Typography — line-height */
--leading-hero: 1.02;
--leading-tight: 1.1;
--leading-snug: 1.2;
--leading-normal: 1.6;
--leading-relaxed:1.7;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
--space-2xl: 60px;
--space-3xl: 80px;
--space-4xl: 100px;
--space-5xl: 140px;
/* Border radius */
--radius-sm: 8px;
--radius-md: 14px; /* avatar, cards, menu button */
--radius-lg: 16px; /* thumbnails */
--radius-xl: 20px; /* project covers, about sections */
--radius-pill: 999px; /* buttons, tags, crumb */
--radius-tag: 100px; /* chip tags */
/* Shadows */
--shadow-card-hover: 0 30px 60px -30px rgba(57, 57, 57, .28);
--shadow-avatar: 0 1px 0 rgba(0, 0, 0, .04);
--shadow-accent-dot: 0 0 0 3px rgba(255, 88, 34, .18);
/* Layout */
--max-width: 1200px;
--wrap-x: 40px;
--wrap-x-mobile: 22px;
--header-pb: 54px;
--section-gap: 140px;
--card-gap: 22px;
/* Motion */
--ease-settle: cubic-bezier(.2, .7, .2, 1);
--duration-fast: 0.2s;
--duration-base: 0.35s;
--duration-slow: 0.5s;
--duration-reveal: 0.9s;
--duration-float: 6s;
}
/* ─── Base resets ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
img { max-width: 100%; display: block; }
/* ─── Type utilities ──────────────────────────────────────── */
.t-hero { font-size: var(--text-hero); letter-spacing: var(--tracking-hero); line-height: var(--leading-hero); font-weight: 600; }
.t-display { font-size: var(--text-display); letter-spacing: var(--tracking-h2); line-height: var(--leading-tight); font-weight: 600; }
.t-h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-h2); line-height: var(--leading-snug); font-weight: 600; }
.t-h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-h3); line-height: var(--leading-snug); font-weight: 600; }
.t-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.t-lede { font-size: var(--text-body-lg); line-height: var(--leading-normal); color: var(--muted); }
.t-body { font-size: var(--text-body); line-height: var(--leading-normal); }
.t-label { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); font-weight: 400; }
.t-tag { font-size: var(--text-tag); letter-spacing: var(--tracking-tag); text-transform: uppercase; font-weight: 400; }
.t-meta { font-size: var(--text-meta); letter-spacing: var(--tracking-meta); font-weight: 500; font-variant-numeric: tabular-nums; }
.t-mono { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--tracking-mono); }
.t-accent { color: var(--accent); }
.t-muted { color: var(--muted); }
.t-ink { color: var(--ink); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
/* ─── Skip link — visually hidden until keyboard focus ────── */
.skip-link {
position: fixed; left: 8px; top: 8px; z-index: 1000;
background: var(--ink); color: #fff; text-decoration: none;
padding: 10px 16px; border-radius: 8px;
font-size: 14px; font-weight: 500;
transform: translateY(-150%); transition: transform .2s ease;
}
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
/* ─── Layout / reveal / float ─────────────────────────────────
Deliberately NOT defined here: .wrap, .reveal, and .float differ
between the home/portfolio pages and the case-study pages (widths,
timing, easing), so each page keeps its own local rule for these
rather than sharing one that would be wrong for half the site. */