/* Fonts: self-hosted, latin and latin-ext only. */ @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* IBM Plex Sans: IBM's own split files, used unchanged. */ @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Regular-Latin2.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; } /* Colour tokens. Light is the base; dark follows the system setting unless the toggle has chosen a theme (data-theme on ). */ :root { color-scheme: light; --bg: #F4F4F2; --bg-inset: #ECEAE5; --surface: #FBFAF8; --border: #DDD9D1; --text: #232019; --text-dim: #665F53; --accent: #B0443F; --accent-hover: #943631; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --gutter: clamp(1rem, 5vw, 3rem); --content: 72rem; --section-space: clamp(4rem, 9vw, 7rem); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #191714; --bg-inset: #131110; --surface: #221F1B; --border: #35302A; --text: #ECE7DF; --text-dim: #A69C8E; --accent: #E8877E; --accent-hover: #EFA29A; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #191714; --bg-inset: #131110; --surface: #221F1B; --border: #35302A; --text: #ECE7DF; --text-dim: #A69C8E; --accent: #E8877E; --accent-hover: #EFA29A; } /* Base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 1rem; line-height: 1.65; font-feature-settings: "liga" 0, "calt" 0; overflow-wrap: break-word; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, p, ul, dl, dd, figure, pre { margin: 0; } /* Base links. :where() keeps these at zero specificity, so every component rule below wins without a fight. */ :where(a) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; } :where(a:hover) { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } main { flex: 1 0 auto; } main:focus { outline: none; } .wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } /* Skip link */ .skip-link { position: absolute; top: 0.5rem; left: var(--gutter); z-index: 20; padding: 0.5rem 0.875rem; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; font-family: var(--mono); font-size: 0.9375rem; text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: none; } /* Header */ .site-header { background: var(--bg); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; } .mark { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: 0.02em; color: var(--text); text-decoration: none; } .mark:hover { color: var(--accent-hover); } .header-tools { display: flex; align-items: center; gap: 1.75rem; } .site-nav ul { display: flex; gap: 1.5rem; list-style: none; padding: 0; } .site-nav a { font-family: var(--mono); font-size: 0.9375rem; line-height: 1; color: var(--text-dim); text-decoration: none; } .site-nav a:hover { color: var(--accent-hover); text-decoration: underline; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; visibility: hidden; transition: color 120ms ease, border-color 120ms ease; } .theme-toggle.is-ready { visibility: visible; } .theme-toggle:hover { color: var(--accent-hover); border-color: var(--accent-hover); } .theme-toggle svg { width: 1.25rem; height: 1.25rem; } /* The icon shows the theme the toggle switches to: a sun while the page is dark, a moon while it is light. */ .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-sun { display: block; } :root:not([data-theme="light"]) .icon-moon { display: none; } } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } /* Hero */ .hero { padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3.5rem, 8vw, 6rem); } .hero-title { max-width: 36ch; font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } .hero-body { display: flex; flex-direction: column; gap: 3rem; margin-top: clamp(2rem, 4vw, 3rem); } .hero-copy { max-width: 33rem; } .hero-lead, .hero-ask { font-size: 1.0625rem; line-height: 1.6; } .hero-ask { margin-top: 1.25rem; font-weight: 600; } .button { display: flex; align-items: center; min-height: 2.75rem; margin-top: 1.75rem; padding: 0.625rem 1.25rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; font-family: var(--mono); font-weight: 500; font-size: 0.9375rem; line-height: 1.3; text-decoration: none; } .button:hover { background: var(--accent); color: var(--bg); } .portrait { display: block; width: 100%; max-width: 20rem; } .portrait img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; } /* Signature band: dark in both themes, so it uses fixed values. */ .band { background: #191714; } .band-stage { position: relative; min-height: clamp(15rem, 30vw, 20rem); overflow: hidden; } .band-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(0.5); } .band-stage::after { content: ""; position: absolute; inset: 0; background: rgb(25 23 20 / 0.72); } /* Sections */ .section { padding-block: var(--section-space); scroll-margin-top: 1.5rem; } .section + .section { padding-top: 0; } .section-title { margin-bottom: 2rem; font-family: var(--mono); font-weight: 500; font-size: 1.5rem; line-height: 1.3; } .hash { color: var(--text-dim); } .prose p { max-width: 35em; } .prose p + p { margin-top: 1.25em; } /* Skills */ .skills { display: grid; gap: 1.5rem; } .skill-group { display: grid; gap: 0.625rem; } .skill-group dt { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.4; color: var(--text-dim); } .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; } .tags li { padding: 0.3125rem 0.625rem; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.4; } /* Contact */ .contact-intro { max-width: 35em; } .contact { margin-top: 1.5rem; font-style: normal; } .contact ul { display: grid; gap: 0.5rem; list-style: none; padding: 0; font-family: var(--mono); font-size: 1rem; line-height: 1.6; } .contact-location { color: var(--text-dim); } /* Footer */ .site-footer { padding-block: 2rem; background: var(--bg-inset); border-top: 1px solid var(--border); color: var(--text-dim); font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; } .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; padding: 0; } .footer-links a { color: var(--text-dim); } .footer-links a:hover { color: var(--accent-hover); } .footer-credit { flex-basis: 100%; } /* Sub-pages: 404, privacy, terms */ .page { padding-block: clamp(3rem, 8vw, 5.5rem); } .page-title { font-family: var(--mono); font-weight: 700; font-size: 2rem; line-height: 1.2; } .page-lede { margin-top: 0.75rem; font-family: var(--mono); font-weight: 500; font-size: 1.5rem; line-height: 1.3; } .page-text { max-width: 35em; margin-top: 1rem; } .page-link { margin-top: 2rem; font-family: var(--mono); } .legal { max-width: 35em; margin-top: 1.5rem; } .legal h2 { margin-top: 2.5rem; font-family: var(--mono); font-weight: 500; font-size: 1.125rem; line-height: 1.3; } .legal p, .legal ul { margin-top: 0.75rem; } .legal ul { padding-left: 1.25rem; } .legal li + li { margin-top: 0.375rem; } .legal code { font-family: var(--mono); font-size: 0.875em; } /* Narrow screens: the nav links are hidden, the rest stacks. */ @media (max-width: 639.98px) { .site-nav { display: none; } .button { width: 100%; } } /* Wide screens: sticky header, hero in two columns, skill labels in a column. */ @media (min-width: 640px) { .skill-group { grid-template-columns: 7rem 1fr; align-items: baseline; gap: 1.5rem; } .button { display: inline-flex; } } @media (min-width: 960px) { .site-header { position: sticky; top: 0; z-index: 10; } .section { scroll-margin-top: 5.5rem; } .hero-body { flex-direction: row; align-items: flex-start; justify-content: space-between; } .portrait { flex-shrink: 0; } } /* Reduced motion: no transitions. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }