reads as body copy, whether or not it also carries a named type role - this is the floor so a plain paragraph (e.g. inside a grid card) never falls back to the browser's default leading. Type roles set the same 1.6 explicitly for anything that isn't a
(dd, span, div). */ p { line-height: 1.6; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--ink); } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @keyframes prism { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto !important; } } /* ── Type roles ── 11px base, ×1.2 ratio, 11 named roles on 10 of 11 steps. Full spec: pattern-library.html#type-scale. Weight/line-height are a function of role, never a per-instance choice; the five roles below that carry a size drop on small screens are bounded to the exact desktop→mobile step the scale defines (flat below 767px, flat again once the fluid ramp reaches the desktop value) — every other role is identical at every viewport, reading size being a function of the eye, not the screen. */ .t-title { font: 600 clamp(39px,5.08vw,57px)/1.05 var(--font-display); letter-spacing: -.035em; text-wrap: pretty; margin: 0; } .t-figure { font: 600 clamp(33px,4.3vw,47px)/.95 var(--font-display); letter-spacing: -.03em; color: var(--accent); margin: 0; } .t-sectionhead { font: 600 clamp(27px,3.52vw,33px)/1.1 var(--font-display); letter-spacing: -.035em; margin: 0; text-wrap: pretty; } .t-lede { font: 500 clamp(23px,3vw,27px)/1.6 var(--font-body); letter-spacing: -.01em; margin: 0; } .t-navtitle { font: 500 23px/1.25 var(--font-display); letter-spacing: -.02em; margin: 0; } .t-subhead { font: 500 19px/1.3 var(--font-display); letter-spacing: -.02em; margin: 0; } .t-bodylead { font: 400 19px/1.6 var(--font-body); margin: 0; text-wrap: pretty; } .t-body { font: 400 16px/1.6 var(--font-body); margin: 0; } .t-bodyvalue { font: 500 16px/1.6 var(--font-body); } .t-footnote { font: 400 13px/1.6 var(--font-mono); } .t-label { font: 500 11px/1.3 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; } .t-label.is-numeric { letter-spacing: .1em; text-transform: none; } /* CTA arrow glyph - the → / ← in link and button labels ("Older work →", "Unlock →", "Back to index") reads as too small at the small mono label sizes it normally sits in, so it's bumped up on its own regardless of the surrounding text's size. Not applied to arrows already sitting in larger type (e.g. .t-navtitle's pager links) or to plain "from → to" value pairs, which aren't links. */ .cta-arrow { font-size: 16px;} .contact-btn .cta-arrow, .menu-cta .cta-arrow {height: 24px;} .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 12px 20px; background: var(--ink); color: var(--bg); text-decoration: none; font: 500 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; } .skip-link:focus { left: 8px; } /* Overrides the base a:hover color (var(--ink)), which would otherwise match this link's own background and hide the text. Accent bg with the light text keeps ~7:1 contrast (WCAG AA needs 4.5:1). */ .skip-link:hover { background: var(--accent); color: var(--bg); } /* ── Nav bar: identical markup and styling on the homepage and every case-study page, so it lives here once. Page-specific nav content (the mobile menu panel on the homepage, the "Back to homepage" link on case studies) stays in each page's own stylesheet. ── */ .site-nav { position: relative; z-index: 60; height: 96px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: inset 0 -1px 0 var(--ink-14); font: 500 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; } .nav-brand { display: flex; align-items: center; gap: 16px; min-width: 0; text-decoration: none; color: inherit; } .nav-brand svg { flex: none; } .nav-brand span { color: var(--ink-68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Below 899px the nav links (or, on case studies, "Back to case studies") start crowding the brand text enough to clip it mid-word - drop the "Senior UX Designer" half first rather than let it ellipsize. */ @media (max-width: 899px) { .nav-brand-sub { display: none; } }