/* =================================================================== Faces. Declared here so every page that loads tokens.css gets the type, rather than each page re-declaring them inline. Paths are root-relative: case studies sit at the same level as index. =================================================================== */ @font-face{font-family:'Circular';src:url('../fonts/CircularStd-Book.otf');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Circular';src:url('../fonts/CircularStd-BookItalic.otf');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Circular';src:url('../fonts/CircularStd-Medium.otf');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Circular';src:url('../fonts/CircularStd-Bold.otf');font-weight:700;font-style:normal;font-display:swap} /* Only Medium and SemiBold ship: the Webflow-era style.css still asks for weight 400 on .large-heading, and the display face is Medium by decision, so a 400 request must resolve to Medium rather than to a lighter cut. */ @font-face{font-family:'Craftwork Grotesk';src:url('../fonts/CraftworkGrotesk-Medium.ttf');font-weight:400 500;font-display:swap} @font-face{font-family:'Craftwork Grotesk';src:url('../fonts/CraftworkGrotesk-SemiBold.ttf');font-weight:600;font-display:swap} @font-face{font-family:'GeistMono';src:url('../fonts/GeistMono[wght].ttf');font-weight:100 900;font-display:swap} /* =================================================================== tokens.css — the design system. Loaded first, before every other stylesheet, so everything downstream can consume it. TYPE Three families, each with one job, so a reader can tell what kind of thing they are looking at before they read it: · Craftwork Grotesk display — headlines and titles. Voice. · Circular Std text — body, UI, captions. Work. · Geist Mono meta — kickers, labels, dates, counts. Data. The mono-for-metadata split is not decoration: it is the same convention used in the products this site documents (SHOWBOAT sets years and percentages in mono, booqd sets its field labels in mono), so the portfolio and the work speak the same language. COLOUR The site is achromatic on purpose. Every screenshot on this page carries its own product's colour (SHOWBOAT yellow, booqd indigo, Subly blue); a brand hue here would compete with all of them. So emphasis is carried by BRIGHTNESS, not hue: the brighter a thing is, the more it is asking of you. Full white is reserved for the way into a case study. That is the only accent this site has. =================================================================== */ :root { /* ---- families ---- */ --font-display: 'Craftwork Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --font-text: 'Circular', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'GeistMono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- type scale ---- Fluid, but each step is a deliberate jump rather than a percentage of the last: metadata and body sit close together so the page reads evenly, and display steps away hard so hierarchy is never ambiguous. */ --t-meta: 0.6875rem; /* 11px mono, uppercase */ --t-meta-lg: 0.75rem; /* 12px */ --t-sm: 0.8125rem; /* 13px captions */ --t-body: 0.9375rem; /* 15px default */ --t-lg: clamp(1rem, 1.1vw, 1.125rem); /* lead paragraphs */ --t-h3: 1.3125rem; --t-h2: clamp(1.75rem, 3.4vw, 2.75rem); --t-h1: clamp(2.5rem, 5.4vw, 4.5rem); --t-display: clamp(3rem, 7.2vw, 6.5rem); /* The grotesk needs pulling in at display sizes; at text sizes it does not. */ --track-display: -0.022em; --track-h: -0.018em; --track-meta: 0.14em; --lh-display: 1.02; --lh-h: 1.1; --lh-body: 1.65; /* ---- colour ---- The page itself is a warm neutral: paper, ink, and one soft grey. Colour proper belongs to the WORK. Every project section declares its own --accent, sampled from that product's actual screenshots (SHOWBOAT's yellow, booqd's indigo, Subly's blue), so the hue on screen always means "this is that product" rather than decorating. Each accent ships as three values because one is never enough on paper: --accent-tint for fills behind text, --accent-ink for text and rules that must stay legible, --accent for pure markers. */ --paper: #F7F7F5; /* warm off-white; pure #FFF glares and makes the light screenshots disappear */ --bg: var(--paper); --bg-sunken: #EFEFEC; --bg-raised: #FFFFFF; --bg-plate: #FFFFFF; --line: rgba(17, 17, 17, .09); --line-strong: rgba(17, 17, 17, .20); --fg: #111111; --fg-1: rgba(17, 17, 17, .94); --fg-2: rgba(17, 17, 17, .60); --fg-3: rgba(17, 17, 17, .40); /* Default accent for anything outside a project section. */ --accent: #111111; --accent-ink: #111111; --accent-tint: rgba(17, 17, 17, .05); --shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 18px 40px -18px rgba(17,17,17,.16); --radius-card: 22px; /* ---- space ---- */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --page-max: 64rem; --wide-max: 84rem; --ease: cubic-bezier(.16, 1, .3, 1); /* Legacy aliases: the older stylesheets still reference these names. */ --m-fg: var(--fg-1); --m-fg-muted: var(--fg-2); --m-fg-subtle: var(--fg-3); --m-border: var(--line); --m-border-strong: var(--line-strong); --m-surface: var(--bg-raised); --m-surface-2: var(--bg-plate); --m-page-max: var(--page-max); --m-wide-max: var(--wide-max); --m-gutter: var(--gutter); --m-ease: var(--ease); --cs-surface: var(--bg-raised); --cs-border: var(--line); --cs-border-strong: var(--line-strong); --cs-fg: var(--fg-1); --cs-fg-muted: var(--fg-2); --cs-fg-subtle: var(--fg-3); } /* =================================================================== Base =================================================================== */ html { background: var(--bg); font-family: var(--font-text); font-size: 16px; font-weight: 400; line-height: var(--lh-body); color: var(--fg-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { background: var(--bg); color: var(--fg-2); font-family: var(--font-text); } /* Display family, one weight, optically tracked. Craftwork Grotesk is set at Medium throughout: hierarchy comes from size, not from bolding. */ h1, h2, h3, .large-heading, .heading, .hero-title, .section-heading, .pj__title, .proj__title, .rail__title, .pullquote-text { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track-h); line-height: var(--lh-h); color: var(--fg-1); text-wrap: balance; } .large-heading, .hero-title { letter-spacing: var(--track-display); line-height: var(--lh-display); } /* Metadata is always mono, always uppercase, always tracked out. `.pj__stat span` left this list on 2026-08-24: a home-page stat label is a sentence explaining the figure, not a tag, and uppercase mono made it shout two cramped words instead. projects.css owns it now. */ .pj__kicker, .proj__kicker, .hero-eyebrow, .section-label, .rail__label, .proj__stat span, .metric__label, .screen__label, .state__tag, .flow__index, .compare__label, .decision-col span, .hero-meta dt, .work-type, .footer-copy, .hero-scroll-cue { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-3); } /* Numerals in stats are data, so they are mono and tabular: columns of figures line up and never jitter as they animate. */ .pj__stat b, .proj__stat b, .metric__value, .hero-meta dd { font-family: var(--font-text); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--fg-1); } /* Links: full white is the only "accent" this site has. */ a { color: inherit; } ::selection { background: var(--fg); color: #fff; } a:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }