/* ── Shared foundation: tokens, fonts, base styles ── */ /* Self-hosted variable fonts */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-var.woff2") format("woff2"); } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/lora-var.woff2") format("woff2"); } @font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/lora-italic.woff2") format("woff2"); } :root { --bg: #f5f3ef; --bg2: #efede8; --surface: #ffffff; --border: #e2ddd6; --border-light: #ede9e2; --text: #1a1916; --text-secondary: #5c5852; --text-muted: #736d66; /* 4.6:1 on --bg; keep ≥4.5:1 (WCAG AA) for 11–12px labels */ --accent: #1a1916; --serif: "Lora", Georgia, serif; --sans: "Inter", system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.75; width: 100%; overflow-x: clip; } img, svg { display: block; max-width: 100%; height: auto; } /* Hide content until the saved language is applied (class set inline in , removed by lang.js) */ html.i18n-pending body { visibility: hidden; } /* ── Skip link ── */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--text); color: var(--bg); padding: 8px 16px; font-size: 13px; z-index: 200; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ── Animations ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── Footer ── */ footer { border-top: 1px solid var(--border); padding: 32px 64px; display: flex; justify-content: space-between; align-items: center; min-width: 0; } footer p { font-size: 12px; color: var(--text-muted); font-weight: 300; } footer a { color: var(--text-muted); text-decoration: none; font-size: 12px; transition: color 0.2s; } footer a:hover { color: var(--text); } footer a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; } /* ── Next case study ── */ .next-case { border-top: 1px solid var(--border); } .next-case a { display: block; max-width: 760px; margin: 0 auto; padding: 72px 32px; text-decoration: none; min-width: 0; } .next-case-label { font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 14px; } .next-case-title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.01em; color: var(--text); display: flex; align-items: baseline; gap: 14px; } .next-case-title em { font-style: italic; } .next-case-arrow { font-size: 0.6em; color: var(--text-muted); transition: transform 0.2s ease; } .next-case a:hover .next-case-arrow { transform: translateX(4px); } .next-case a:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; } @media (max-width: 768px) { footer { padding: 24px; flex-direction: column; gap: 8px; text-align: center; } .next-case a { padding: 56px 24px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; } }