*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}body{min-block-size:100vh;line-height:1.6}h1,h2,h3,h4,h5,h6,button,input,label{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance}p,li{text-wrap:pretty}img,picture,video{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit}:root{--font-family-heading:ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';--font-family-body:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';--font-size-root:1rem;--font-scale-ratio:1.125;--font-size--2:calc(var(--font-size--1) / var(--font-scale-ratio));--font-size--1:calc(var(--font-size-0) / var(--font-scale-ratio));--font-size-0:var(--font-size-root);--font-size-1:calc(var(--font-size-0) * var(--font-scale-ratio));--font-size-2:calc(var(--font-size-1) * var(--font-scale-ratio));--font-size-3:calc(var(--font-size-2) * var(--font-scale-ratio));--font-size-4:calc(var(--font-size-3) * var(--font-scale-ratio));--font-size-5:calc(var(--font-size-4) * var(--font-scale-ratio));--font-size-6:calc(var(--font-size-5) * var(--font-scale-ratio));--font-size-7:calc(var(--font-size-6) * var(--font-scale-ratio));--font-size-8:calc(var(--font-size-7) * var(--font-scale-ratio));--font-weight-0:400;--font-weight-1:500;--font-weight-2:600;--font-weight-3:700;--spacing-step:0.25rem;--spacing-0:0px;--spacing-1:var(--spacing-step);--spacing-2:calc(var(--spacing-1) + var(--spacing-step));--spacing-3:calc(var(--spacing-2) + var(--spacing-step));--spacing-4:calc(var(--spacing-3) + var(--spacing-step));--spacing-5:calc(var(--spacing-4) + var(--spacing-step));--spacing-6:calc(var(--spacing-5) + var(--spacing-step));--spacing-7:calc(var(--spacing-6) + var(--spacing-step));--spacing-8:calc(var(--spacing-7) + var(--spacing-step));--spacing-9:calc(var(--spacing-8) + var(--spacing-step));--spacing-10:calc(var(--spacing-9) + var(--spacing-step));--spacing-11:calc(var(--spacing-10) + var(--spacing-step));--spacing-12:calc(var(--spacing-11) + var(--spacing-step));--spacing-13:calc(var(--spacing-12) + var(--spacing-step));--spacing-14:calc(var(--spacing-13) + var(--spacing-step));--spacing-15:calc(var(--spacing-14) + var(--spacing-step));--spacing-16:calc(var(--spacing-15) + var(--spacing-step));--border-radius-1:5px;--border-radius-2:10px;--background-colour:#ffffff;--text-colour:#000000;--text-light-colour:#737373;--border-colour:#e5e5e5;--border-dark-colour:#cccccc;--tag-background-colour:#f7f7f7;--featured-post-background-colour:#fafafa;--posts-heading-background-colour:#dee2e6;--underline-colour:#bbf7d0;--code-text-colour:#f8f8f2;--code-background-colour:#272822;--mobile-navigation-z-index:40;--wrapper-padding:var(--spacing-6);--wrapper-max-width:74ch;--prose-max-asset-height:500px;--site-header-height:4.5rem;--theme-transition-duration:500ms}[data-theme=dark]{--background-colour:#252524;--text-colour:#ffffff;--text-light-colour:#9d9d9d;--border-colour:#3b3b3b;--border-dark-colour:#515151;--tag-background-colour:#2c2c2c;--featured-post-background-colour:#292929;--posts-heading-background-colour:#9d9d9d;--underline-colour:#545454}@view-transition{navigation: auto;
}html{font-family:var(--font-family-body);font-size:var(--font-size-root);color:var(--text-colour);background-color:var(--background-colour);transition:background-color var(--theme-transition-duration)ease,color var(--theme-transition-duration)ease;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,.u-h1{font-family:var(--font-family-heading);font-size:var(--font-size-8);font-weight:var(--font-weight-2)}h2,.u-h2{font-family:var(--font-family-heading);font-size:var(--font-size-5);font-weight:var(--font-weight-2)}h3,.u-h3{font-family:var(--font-family-heading);font-size:var(--font-size-3);font-weight:var(--font-weight-2)}h4,.u-h4{font-family:var(--font-family-heading);font-size:var(--font-size-2);font-weight:var(--font-weight-2)}h5,.u-h5{font-family:var(--font-family-heading);font-size:var(--font-size-1);font-weight:var(--font-weight-2)}h6,.u-h6{font-family:var(--font-family-heading);font-size:var(--font-size-0);font-weight:var(--font-weight-2)}a{color:var(--text-colour);text-decoration:none;transition:color var(--theme-transition-duration)ease}.l-wrapper{max-inline-size:var(--wrapper-max-width);padding-inline:var(--wrapper-padding);margin-inline:auto}.l-page-title{margin-block:var(--spacing-12)}.about{display:flex;gap:var(--spacing-8);@media(width < 760px){flex-direction: column-reverse;}}.about__contact{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-6);@media(width >= 760px){margin-left: auto;}}.about__social-links{display:flex;list-style:none;padding:0;margin:0;gap:var(--spacing-3);justify-items:center;align-items:center}.archive{display:flex;gap:var(--spacing-12);flex-direction:column}.archive__year{display:grid;grid-template-columns:max-content 1fr;gap:var(--spacing-16);padding-bottom:var(--spacing-12);border-bottom:1px solid var(--border-colour);&:last-of-type { border-bottom:0; padding-bottom:0; } @media (width < 760px) { grid-template-columns:1fr; gap:var(--spacing-8); }}.archive__posts{display:flex;flex-direction:column;gap:var(--spacing-8)}@media(width > 760px){.archive__year-title{height:fit-content;position:sticky;top:var(--site-header-height)}}.avatar{--_size:10rem;border-radius:9999px;border-width:.5px;background-color:var(--background-colour);transition:background-color var(--theme-transition-duration)ease;border:1px solid var(--border-colour);padding:var(--spacing-2);width:var(--_size);height:var(--_size);img { border-radius: 9999px; }}@media(hover:hover) and (prefers-reduced-motion:no-preference){.avatar--spin:hover{animation:spin-once 400ms linear}@keyframes spin-once{from{transform:rotate(0)}to{transform:rotate(360deg)}}}.button{--button-text-colour:var(--background-colour);--button-background-colour:var(--text-colour);border-radius:var(--border-radius-2);color:var(--button-text-colour);background-color:var(--button-background-colour);padding:var(--spacing-3)var(--spacing-5);font-size:var(--font-size--1);transition:transform 100ms linear,background-color var(--theme-transition-duration)ease,color var(--theme-transition-duration)ease;&:active { transform:scale(0.95); }}.podcast-ad{display:flex;gap:var(--spacing-6);margin-inline:calc(var(--wrapper-padding) * -1);padding:var(--wrapper-padding);background-color:var(--background-colour);border:1px solid var(--border-colour);border-radius:var(--border-radius-2);margin-block:var(--spacing-16);@media(width < 760px){flex-direction: column; align-items: center; text-align: center; margin-inline: 0;}}.podcast-ad__artwork{flex-shrink:0}.podcast-ad__artwork-image{width:140px;height:140px;border-radius:var(--border-radius-2);object-fit:cover;display:block;@media(width < 760px){width: 120px; height: 120px;}}.podcast-ad__content{flex:1;display:flex;flex-direction:column;justify-content:center}.podcast-ad__title{font-size:var(--font-size-3);font-weight:var(--font-weight-2);color:var(--text-colour);margin:0 0 var(--spacing-3);line-height:1.2;@media(width < 760px){font-size: var(--font-size-2);}}.podcast-ad__description{font-size:var(--font-size-0);color:var(--text-light-colour);margin:0 0 var(--spacing-3);line-height:1.5}.podcast-ad__link{font-weight:var(--font-weight-2);color:var(--text-colour);&::after { content:' →'; font-weight:var(--font-weight-2); }}.post-footer{margin-top:var(--spacing-16);display:flex;flex-direction:column;gap:var(--spacing-12)}.posts{}.posts__heading{margin-top:var(--spacing-9);display:flex;justify-content:center;position:relative;&::before { content:''; position:absolute; inset:0 0 10px; background-image:radial-gradient( var(--posts-heading-background-colour) 15%,transparent 15% ); background-size:1rem 1rem; -webkit-mask:linear-gradient(to top,#ffffff,transparent); mask:linear-gradient(to top,#ffffff,transparent); z-index:-1; }}.posts__post{margin-block:var(--spacing-16)}.posts__post--featured{margin-inline:calc(var(--wrapper-padding) * -1);padding:var(--wrapper-padding);background-color:var(--featured-post-background-colour);transition:transform 300ms ease-in-out,background-color var(--theme-transition-duration)ease;border-radius:var(--border-radius-2);@media(hover:hover) and (prefers-reduced-motion:no-preference){&:hover{transform:scale(1.03)}}}.posts__post-summary{margin-top:var(--spacing-4)}.posts__navigation{display:flex;justify-content:space-between}.project{border-radius:var(--border-radius-2);overflow:hidden;box-shadow:0 4px 6px var(--border-colour);transition:transform 250ms ease-in-out;@media(hover:hover) and (prefers-reduced-motion:no-preference){&:hover{transform:scale(1.03);.project__image { transform: scale(1.03); }}}}@supports(animation-timeline:view()){.project{animation:fade-in linear forwards;animation-timeline:view();animation-range:entry;scale:.8;opacity:0}@keyframes fade-in{to{scale:1;opacity:1}}}.project__image-wrapper{overflow:hidden;position:relative;height:150px}.project__image{--_size:100%;width:var(--_size);height:var(--_size);transition:transform 200ms linear 100ms;object-fit:cover;object-position:0% 0%}.project__details{padding:var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-3)}.project__description{margin-top:calc(var(--spacing-2) * -1);color:var(--text-light-colour)}.projects{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-8);@media(width < 760px){grid-template-columns: 1fr;}}.published-at{margin-top:var(--spacing-2);display:block;color:var(--text-light-colour);font-size:var(--font-size--2)}.related{font-size:1.125rem;line-height:2rem}.related__title{margin-bottom:var(--spacing-3)}.related__posts{list-style-type:disc;li { padding-left: var(--spacing-1); margin-block: var(--spacing-2); &::marker { color: var(--text-light-colour); } } a { text-decoration: underline; font-weight: var(--font-weight-1); }}.scroll-watcher{display:none}@supports(animation-timeline:scroll()){.scroll-watcher{display:block;position:fixed;height:5px;width:100%;top:0;left:0;z-index:calc(var(--mobile-navigation-z-index) - 1);background-color:var(--text-colour);scale:0 1;transform-origin:left;animation:scroll-watcher linear;animation-timeline:scroll()}@keyframes scroll-watcher{to{scale:1 1}}}.site-footer{display:flex;justify-content:center;margin-block:var(--spacing-16);color:var(--text-light-colour);font-size:var(--font-size--2);text-transform:uppercase;gap:var(--spacing-8)}.site-footer__theme-toggle{all:unset;display:inline-flex;align-items:center;cursor:pointer;transition:transform 200ms ease-in-out;transform:rotate(180deg);svg { --_size: 1rem; width: var(--_size); height: var(--_size); }}[data-theme=dark] .site-footer__theme-toggle{transform:rotate(0)}.site-header{background-color:var(--background-colour);transition:background-color var(--theme-transition-duration)ease;height:var(--site-header-height);display:flex;align-items:center;justify-content:space-between;z-index:calc(var(--mobile-navigation-z-index) - 1)}.site-header--pinable{position:sticky;top:calc(var(--site-header-height) * -1);transition:top 200ms linear;&.site-header--pinned { top: 0; }}.site-header__title{font-size:var(--font-size-2);font-weight:var(--font-weight-2);display:flex;gap:var(--spacing-1);align-items:center;span { font-weight: var(--font-weight-1); font-size: var(--font-size-0); color: var(--text-light-colour); display: inline-flex; align-items: center; gap: var(--spacing-1); } span::before { --_size: 1rem; content: ''; width: var(--_size); height: var(--_size); background-color: var(--text-light-colour); mask-image: var(--url); mask-repeat: no-repeat; mask-position: center; }}.site-header__mobile-navigation-button{display:none}.site-header__navigation{display:flex;gap:var(--spacing-8)}.site-header__primary-navigation,.site-header__social-navigation{display:flex;list-style:none;padding:0;gap:var(--spacing-8)}@media(width < 760px){.site-header__title{z-index:calc(var(--mobile-navigation-z-index) + 1);position:relative}.site-header__mobile-navigation-button{--_size:5rem;all:unset;display:inline-flex;z-index:calc(var(--mobile-navigation-z-index) + 1);position:relative;gap:var(--spacing-2);justify-content:center;align-items:end;flex-direction:column;width:var(--_size);height:var(--_size);cursor:pointer;&::before,&::after { content:''; display:block; height:2px; width:1.25rem; background-color:var(--text-light-colour); transition:transform 100ms linear; }}.site-header__navigation{opacity:0;z-index:var(--mobile-navigation-z-index);font-size:var(--font-size-2);position:fixed;inset:0;transform:translateY(100vh);transition:transform 100ms linear,background-color var(--theme-transition-duration)ease;justify-content:center;align-items:center;flex-direction:column;background:var(--background-colour)}.site-header__primary-navigation{flex-direction:column;align-items:center;transform:translateY(100vh);transition:transform 150ms ease-in-out 100ms}.site-header__social-navigation{transform:translateY(100vh);transition:transform 200ms ease-in-out 200ms}.js-mobile-navigation-open{overflow:hidden;.site-header__navigation { opacity: 1; } .site-header__navigation, .site-header__primary-navigation, .site-header__social-navigation { transform: translateY(0); } .site-header__mobile-navigation-button { &::before { width: 1.5rem; transform: translate(0, 5px) rotate(45deg); } &::after { width: 1.5rem; transform: translate(0, -5px) rotate(-45deg); } }}}.social-icon{--_size:1.5rem;display:block;width:var(--_size);height:var(--_size);background-color:var(--text-colour);mask-image:var(--url);mask-repeat:no-repeat;mask-position:center;font-size:0}.tags{display:flex;flex-wrap:wrap;gap:var(--spacing-2);list-style:none;margin:0;padding:0;font-weight:var(--font-weight-1);font-size:var(--font-size--1);li { background-color: var(--tag-background-colour); transition: transform 100ms linear; padding: 0.25em 1em; border-radius: var(--border-radius-1); &:has(a:active) { transform: scale(0.95); } }}.tags--large{font-size:var(--font-size-1);gap:var(--spacing-3);li { border-radius: var(--border-radius-2); }}.u-prose{font-size:1.125rem;line-height:2rem;h2 { margin-top: 2em; margin-bottom: 1em; } h3 { margin-top: 1.6em; margin-bottom: 0.6em; } h4 { margin-top: 1.5em; margin-bottom: 0.5em; } h5 { margin-top: 1.4em; margin-bottom: 0.4em; } h6 { margin-top: 1.4em; margin-bottom: 0.4em; } h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { margin-top: 0; } p { margin-bottom: 1.25em; &:has(img), &:has(picture), &:has(video) { display: grid; grid-auto-flow: column; align-items: center; gap: var(--spacing-2); } } code { font-weight: var(--font-weight-2); font-size: var(--font-size--1); line-height: 1rem; &::before, &::after { content: '`'; } } pre { overflow-x: auto; font-weight: var(--font-weight-0); font-size: var(--font-size--1); line-height: 1.7rem; border-radius: var(--border-radius-2); padding: var(--spacing-4); margin-block: var(--spacing-8); background-color: var(--code-background-colour); color: var(--code-text-colour); code { background-color: transparent; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; &::before, &::after { display: none; } } } table { width: 100%; table-layout: auto; margin-block: var(--spacing-8); font-size: var(--font-size-0); line-height: 1.7rem; border-collapse: collapse; thead { border-bottom: 1px solid var(--border-dark-colour); th { font-weight: var(--font-weight-2); padding-bottom: var(--spacing-2); text-align: start; &:first-child { padding-left: 0; } } } tbody { td { padding: var(--spacing-2) 0; text-align: start; } tr { border-bottom: 1px solid var(--border-colour); &:last-child { border-bottom: 0; } } } } kbd { font-weight: var(--font-weight-1); font-family: inherit; box-shadow: var(--text-colour) 1px var(--border-colour), 0 3px var(--border-colour); font-size: var(--font-size--1); border-radius: var(--border-radius-1); padding: var(--spacing-1); &:has(kbd) { box-shadow: 0 0 var(--text-colour), 0 0 var(--text-colour); } } ul { list-style-type: disc; } ol li, ul li { padding-left: var(--spacing-1); margin-block: var(--spacing-2); &::marker { color: var(--text-light-colour); } } hr { margin-block: var(--spacing-12); border: none; height: 1px; background-color: var(--border-colour); } a { text-decoration: underline; font-weight: var(--font-weight-1); &[rel~='external']:not(:has(img))::after { --_size: 0.75rem; content: ''; display: inline-block; width: var(--_size); height: var(--_size); margin-left: var(--spacing-1); background-color: var(--text-colour); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a.5.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1-0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill='currentColor' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; } } img, picture, video { margin-inline: auto; max-height: var(--prose-max-asset-height); &:not(p &) { margin-bottom: 1.25em; } } blockquote { font-style: italic; border-left: 0.25rem solid var(--border-colour); margin-block: 1.6em; padding-inline-start: 1em; }}.u-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.u-overlay-wrapper{position:relative}.u-overlay{position:absolute;inset:0;font-size:0}.u-transition-between-pages{view-transition-name:var(--id)}.u-underline{--length:100%;display:inline;background-image:linear-gradient( to right,var(--underline-colour),var(--underline-colour) );background-repeat:no-repeat;background-position:0 100%;background-size:var(--length).5rem;transition:background-size 300ms ease-in-out}.u-underline-on-hover{.u-underline { --length: 0; } @media (hover: hover) { &:hover { .u-underline { --length: 100%; } } }}