@font-face{font-family:commit mono;src:url(/fonts/commit-variable.woff2)format('woff2');font-weight:400;font-style:normal}:root{--gray50:#FAFAFA;--gray100:#F5F5F5;--gray200:#EEEEEE;--gray300:#E0E0E0;--gray400:#BDBDBD;--gray500:#9E9E9E;--gray600:#757575;--gray700:#616161;--gray800:#424242;--gray900:#212121;--backgroundBlack:#1a1a1a;--teal200:#80CBC4;--elevation1:rgba(255, 255, 255, 0.05);--elevation2:rgba(255, 255, 255, 0.10);--primaryColour:var(--teal200);--textColour:var(--gray50);--secondaryTextColour:var(--gray500);--backgroundColour:var(--backgroundBlack);--linkColour:var(--gray50);--linkHoverColour:var(--gray500);--codeBlockBackground:var(--gray900);--codeColour:var(--gray50);--borderColour:var(--gray800);--logoFill:var(--gray700);--logoHoverFill:var(--gray600);--primarySurfaceColour:transparent;--secondarySurfaceColour:var(--elevation2);--primarySurfaceBoxShadow:0 0 0.2rem rgba(0, 0, 0, 0.25);--secondarySurfaceBoxShadow:0 0 0.2rem rgba(0, 0, 0, 0.25);--borderRadius:0.25rem;--mainPaddingInline:2.5vw;--defaultTransitionSpeed:0.2s;--maxArticleWidth:80ch;--baseFontStack:'Inter', helvetica, arial, sans-serif;--codeFontStack:'Commit Mono', 'Hack', 'Source Code', monospace;--baseFontSize:1rem;--baseLineHeight:1.5;--baseUnitMultiple:0.5lh;--baseRemainder:calc(round(up, var(--baseUnitMultiple), var(--defaultParagraphSpacing)) - var(--baseUnitMultiple));--typeScale:1.333;--defaultParagraphSpacing:calc(var(--baseLineHeight) * 1rem);--verticalSpacingMultiple:var(--defaultParagraphSpacing);--typeXXXXL:calc(var(--baseFontSize) * pow(var(--typeScale), 6));--typeXXXL:calc(var(--baseFontSize) * pow(var(--typeScale), 5));--typeXXL:calc(var(--baseFontSize) * pow(var(--typeScale), 4));--typeXL:calc(var(--baseFontSize) * pow(var(--typeScale), 3));--typeL:calc(var(--baseFontSize) * pow(var(--typeScale), 2));--typeM:calc(var(--baseFontSize) * var(--typeScale));--typeS:var(--baseFontSize);--typeXS:calc(var(--baseFontSize) * pow(var(--typeScale), -1))}*{margin:0;padding:0;box-sizing:border-box}html{line-height:var(--baseLineHeight)}body{font-family:var(--baseFontStack);font-size:var(--baseFontSize);line-height:var(--baseLineHeight);color:var(--textColour);background:var(--backgroundColour);font-feature-settings:"calt" 1,"dlig" 1,"kern" 1,"frac" 1,"zero" 1,"liga" 1}a{color:var(--linkColour);transition:color var(--defaultTransitionSpeed)ease-in-out;&[href^="http"]:after { font-family: var(--codeFontStack); content: '↗'; vertical-align: super; color: var(--gray600); } &:hover { color: var(--linkHoverColour); }}li::marker{color:var(--gray600)}h1,h2,h3{line-height:1.25;margin-block-end:var(--baseRemainder)}h1{font-size:var(--typeXXL)}h2{font-size:var(--typeXL)}h3{font-size:var(--typeL)}h4{font-size:var(--typeM);margin-block-end:var(--baseRemainder)}p{margin-block-end:var(--defaultParagraphSpacing);text-wrap:pretty;color:var(--textColour)}small{font-size:var(--typeXS)}pre,code{font-family:var(--codeFontStack)}hr{margin-block-end:var(--verticalSpacingMultiple);border:none;border-top:1px solid var(--borderColour);width:75%;margin-inline:auto}img{max-width:100%}a:has(svg){line-height:0;justify-self:end;&:hover svg { fill:var(--logoHoverFill); }}svg{margin-inline:auto;max-width:min(4rem,10vw);height:fit-content;fill:var(--logoFill);transition:fill var(--defaultTransitionSpeed)ease-in-out}.block{margin-block:5rem}.design main{border-left:2px solid hsla(180,100%,60%,.75)}header{padding-inline:var(--mainPaddingInline)}.wrapper{display:grid;padding-block:var(--verticalSpacingMultiple)}main{margin-block:var(--verticalSpacingMultiple)}h1{font-size:var(--typeXL);margin-block-end:unset}h1+p{text-wrap:balance;max-width:80ch}@media screen and (min-width:600px){h1{font-size:var(--typeXXXXL)}h1+p{font-size:var(--typeM)}li:not(.category):first-of-type{grid-column:1/span 2}}h2{font-size:var(--typeM);font-weight:400;margin:0;line-height:1rlh;text-wrap:balance;a { text-decoration: none; }}ul[aria-label=Articles]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:calc(var(--verticalSpacingMultiple) * 2)var(--verticalSpacingMultiple);margin-inline:auto;padding-inline:var(--mainPaddingInline);list-style-type:""}li:not(.category){--borderWidth:calc(.5rem / 4);border-top:var(--borderWidth)solid var(--borderColour);margin-block-start:calc(var(--borderWidth) * -1);display:grid;grid-template-columns:66.66% 1fr;gap:var(--verticalSpacingMultiple);&:not(:has(figure)) { grid-template-columns:1fr; } &:first-of-type figure { visibility:visible; } a { display:block; } .card-body { padding-block:calc(var(--verticalSpacingMultiple)) calc(var(--verticalSpacingMultiple) * 2); grid-column:1; } figure { filter:grayscale(1); overflow:hidden; visibility:hidden; transition:filter var(--defaultTransitionSpeed) ease-in-out; max-height:13rem; box-shadow:var(--primarySurfaceBoxShadow); grid-column:2; grid-row:1; &:hover { filter:grayscale(0); } } img { object-fit:cover; }}time{font-size:var(--typeXS);text-transform:uppercase;line-height:1rlh;display:block;color:var(--secondaryTextColour);font-family:var(--codeFontStack);letter-spacing:calc(.5em/4);margin-block-end:var(--verticalSpacingMultiple);&::before { content:'░ '; }}ul.categories{font-size:var(--typeXS)}.category{display:inline-block;text-transform:uppercase;font-family:var(--codeFontStack);color:var(--secondaryTextColour);letter-spacing:calc(.5em/4);line-height:1rlh;&::before { content:'␥ '; font-size:var(--typeS); vertical-align:middle; display:inline-block; margin-block-start:calc(1ex - 1cap); margin-inline-end:calc(1ch/var(--typeScale)); }}