.main-header{background:var(--header-bg);border-top:8px solid var(--header-border);.container{align-items:start;column-gap:var(--grid-gutter);display:grid;grid-template-areas:"title";grid-template-columns:1fr;overflow-wrap:anywhere;&:has(nav):not(:has(.favicon)):not(:has(.details)){grid-template-areas:"title" "nav";grid-template-columns:1fr;@media (width >= 768px){grid-template-areas:"title nav";grid-template-columns:1fr auto}}&:has(.details):not(:has(nav)){grid-template-areas:"favicon" "title" "details";grid-template-columns:1fr;@media (width >= 768px){grid-template-areas:"favicon title" "favicon details";grid-template-columns:auto 1fr}}&:has(.details):has(nav){grid-template-areas:"favicon" "title" "details" "nav";grid-template-columns:1fr;@media (width >= 768px){grid-template-areas:"favicon title nav" "favicon details nav";grid-template-columns:auto 1fr auto}}>h1{grid-area:title;margin-block:unset}}.favicon{border-radius:var(--radius-m);grid-area:favicon;width:64px}.count{font-family:var(--font-display-bold);font-size:clamp(1.35rem,.9736rem + 1.6731vw,2.4375rem)}.details{display:flex;flex-direction:column;gap:var(--space-3xs);grid-area:details;p{font-size:var(--step-1);margin-block:unset}}nav,ul{display:flex;flex-wrap:wrap;font-size:var(--step--1)}nav{align-items:center;align-self:center;border-radius:999px;gap:var(--space-2xs);grid-area:nav;margin-block-start:var(--space-2xs);padding:var(--space-3xs) var(--space-2xs);width:max-content;@media (width >= 768px){margin-block-start:unset}}a{padding:var(--space-3xs) var(--space-2xs)}.current{background:var(--header-current-bg);border-radius:999px;text-decoration:none}.details,.favicon,h1{color:var(--header-content)}.count{color:var(--header-accent)}.author-links{gap:unset;a{color:var(--header-accent);&:hover{color:var(--header-content)}}}nav{background:var(--header-pill-bg);.current{background:var(--header-pill-active-bg)}}nav,ul{color:var(--header-pill-fg)}}.categories{--header-bg:var(--categories-colour-4);--header-border:var(--categories-colour-5);--header-content:var(--categories-colour-1);--header-accent:var(--categories-colour-2);--header-pill-bg:var(--categories-colour-1);--header-pill-fg:var(--categories-colour-7);--header-pill-active-bg:var(--categories-colour-3)}.authors{--header-bg:var(--authors-colour-4);--header-border:var(--authors-colour-5);--header-content:var(--authors-colour-1);--header-accent:var(--authors-colour-2);--header-pill-bg:var(--authors-colour-1);--header-pill-fg:var(--authors-colour-7);--header-pill-active-bg:var(--authors-colour-3)}.showcase{--header-bg:var(--showcase-colour-4);--header-border:var(--showcase-colour-5);--header-content:var(--showcase-colour-1);--header-accent:var(--showcase-colour-2);--header-pill-bg:var(--showcase-colour-1);--header-pill-fg:var(--showcase-colour-7);--header-pill-active-bg:var(--showcase-colour-3)}.starters{--header-bg:var(--starters-colour-4);--header-border:var(--starters-colour-5);--header-content:var(--starters-colour-1);--header-accent:var(--starters-colour-2);--header-pill-bg:var(--starters-colour-1);--header-pill-fg:var(--starters-colour-7);--header-pill-active-bg:var(--starters-colour-3)}.blog{--header-bg:var(--blog-colour-4);--header-border:var(--blog-colour-5);--header-content:var(--blog-colour-1);--header-accent:var(--blog-colour-2);--header-pill-bg:var(--blog-colour-1);--header-pill-fg:var(--blog-colour-7);--header-pill-active-bg:var(--blog-colour-3)}.firehose{--header-bg:var(--firehose-colour-4);--header-border:var(--firehose-colour-5);--header-content:var(--firehose-colour-1);--header-accent:var(--firehose-colour-2);--header-pill-bg:var(--firehose-colour-1);--header-pill-fg:var(--firehose-colour-7);--header-pill-active-bg:var(--firehose-colour-3)}.skip-links{display:flex;flex-wrap:wrap;gap:var(--space-s)}.directory__layout{@media (width >=768px){align-items:start;display:grid;gap:var(--grid-gutter);grid-template-columns:minmax(min-content,1fr) 11fr;.directory__grid{margin-block-start:unset}}}.directory__grid{display:grid;gap:var(--grid-gutter);margin-block-start:var(--grid-gutter);margin-inline:calc(var(--grid-gutter)*-1);@media (width >=768px){grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:unset}@media (width >=1024px){grid-template-columns:repeat(3,minmax(0,1fr))}}.directory__card{background:var(--surface-mid);border:1px solid var(--surface-fore);overflow-wrap:anywhere;padding:var(--space-s);@media (width <= 768px){border-left:unset;border-right:unset}}.directory--category{>h3{align-items:flex-start;background:var(--surface-fore);display:flex;font-family:var(--font-display-extrablack);font-size:var(--step-1);gap:var(--space-s);justify-content:space-between;margin-block-start:calc(var(--space-s)*-1);margin-inline:calc(var(--space-s)*-1);padding:var(--space-s);a{flex-grow:1}}a{grid-area:link}.count{background:var(--surface-back);border-radius:999px;color:var(--heading-colour-1);font-family:var(--font-display-bold);font-size:var(--step--1);overflow-wrap:normal;padding:var(--space-3xs) var(--space-2xs)}}.directory--detail{align-content:start;display:grid;gap:var(--space-xs);&:has(.bundleitem-highlight){outline:4px dotted var(--primary-6);outline-offset:-4px}&:has(.favicon){grid-template-areas:"favicon link" "details details";grid-template-columns:auto 1fr}&:not(:has(.favicon)){grid-template-areas:"link" "details";grid-template-columns:1fr}.favicon{grid-area:favicon}a[href^=http],h3[id^=post-]{color:inherit;font-family:var(--font-display-bold);font-size:var(--step-0);grid-area:link;line-height:inherit;margin-block-start:unset;text-wrap:wrap}.details{display:flex;flex-direction:column;font-size:var(--step--1);gap:var(--space-2xs);grid-area:details;>a[href^=http]{font-family:var(--font-display-bold);font-size:var(--step-0)}p{margin-block:unset}}.categories-list{display:flex;flex-direction:column;gap:var(--space-2xs);>ul{display:flex;flex-wrap:wrap;gap:var(--space-3xs)}a{background:var(--surface-back);border:1px solid var(--surface-fore);border-radius:999px;display:flex;padding:var(--space-3xs) var(--space-2xs);text-decoration:none;&:hover{background:var(--surface-fore)}}}}.directory--list{display:flex;flex-direction:column;font-size:var(--step--1);gap:var(--space-xs);padding:var(--space-s);>li{column-gap:var(--space-xs);display:grid;grid-template-areas:"link date";grid-template-columns:1fr auto;row-gap:var(--space-3xs);@media (width >=768px){grid-template-areas:"link" "date";grid-template-columns:1fr}&:has(.favicon){grid-template-areas:"favicon link date";grid-template-columns:auto 1fr auto;@media (width >=768px){grid-template-areas:"favicon link" "favicon date";grid-template-columns:auto 1fr}}}.favicon{grid-area:favicon}a{grid-area:link}time{grid-area:date}}.showcase__grid{display:grid;gap:var(--space-2xs);padding-inline:var(--grid-gutter);@media (width >=768px){grid-template-columns:repeat(auto-fit,minmax(425px,1fr))}}.showcase__card{background:var(--surface-mid);border:1px solid var(--surface-fore);border-radius:var(--radius-m);color:var(--greyscale-9);display:grid;grid-template-areas:"figcaption" "picture";grid-template-columns:1fr;margin-block:unset;overflow:hidden;position:relative;picture{grid-area:picture}figcaption{align-items:center;background:oklch(100 0 0);border-radius:999px;display:contents;display:flex;font-size:var(--step--1);gap:var(--space-2xs);grid-area:figcaption;margin:var(--space-2xs);padding:var(--space-3xs) var(--space-2xs)}}.showcase--category{.details{align-items:center;align-self:stretch;background:var(--surface-mid);border:1px solid var(--surface-fore);border-radius:var(--radius-m);color:var(--text-colour-1);display:flex;flex-direction:column;gap:var(--space-2xs);grid-area:picture;inset:var(--grid-gutter);justify-content:center;opacity:0;padding:var(--space-s);text-align:center;transform:translateY(12px) scale(.9);transition:opacity .15s ease-out,transform .15s ease-out;p{margin-block-start:unset}}.favicon{aspect-ratio:1;border-radius:var(--radius-s);width:var(--space-s-m)}a{overflow:hidden;text-decoration:none;&:after{content:"";display:block;inset:0;position:absolute}&:focus,&:hover{+.details{clip:auto;height:auto;opacity:1;overflow:visible;pointer-events:none;transform:translateY(0) scale(1);white-space:normal;width:auto}}}}.post__layout{display:grid;gap:var(--grid-gutter);grid-template-columns:1fr;.post__title{font-size:var(--step-3)}@media (width >=768px){align-items:start;grid-template-columns:repeat(8,1fr);.calendar{grid-column:1/2;justify-self:end}.calendar,.prose{grid-row:1}.prose,aside,nav{grid-column:2/8}}}.post__title{font-family:var(--font-display-bold)}.post__list{display:flex;flex-direction:column;gap:var(--grid-gutter)}.post__item{display:grid;gap:var(--grid-gutter);grid-template-columns:1fr;.post__title{font-size:var(--step-0);line-height:1.25}.details{display:flex;flex-direction:column;gap:var(--space-2xs)}.meta{margin-block-start:unset}@media (width >=768px){align-items:start;grid-template-columns:repeat(8,1fr);.calendar{grid-column:1/2;grid-row:1;justify-self:end}.details{grid-column:2/8;grid-row:1}}}aside{h2{align-items:center;display:flex;gap:var(--space-s)}.count{background:var(--surface-mid);border-radius:999px;color:var(--heading-colour-1);font-family:var(--font-display-bold);font-size:var(--step--1);padding:var(--space-3xs) var(--space-2xs)}}code[class*=language-],pre[class*=language-]{background:none;color:#f8f8f2;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;text-shadow:0 1px rgba(0,0,0,.3);white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre[class*=language-]{border-radius:.3em;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}lite-youtube{background-color:#000;background-position:50%;background-size:cover;contain:content;cursor:pointer;display:block;max-width:720px;position:relative}lite-youtube:before{background-image:linear-gradient(180deg,rgba(0,0,0,.67),rgba(0,0,0,.54) 14%,rgba(0,0,0,.15) 54%,rgb(0 0 0/5%) 72%,transparent 94%);box-sizing:border-box;color:#eee;content:attr(data-title);display:block;font-family:YouTube Noto,Roboto,Arial,Helvetica,sans-serif;font-size:18px;height:99px;overflow:hidden;padding:25px 20px;position:absolute;text-overflow:ellipsis;text-shadow:0 0 2px rgba(0,0,0,.5);top:0;white-space:nowrap;width:100%}lite-youtube:hover:before{color:#fff}lite-youtube:after{content:"";display:block;padding-bottom:56.25%}lite-youtube>iframe{left:0;top:0}lite-youtube>.lyt-playbtn,lite-youtube>iframe{border:0;height:100%;position:absolute;width:100%}lite-youtube>.lyt-playbtn{background:no-repeat 50%/68px 48px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');cursor:pointer;display:block;filter:grayscale(100%);transition:filter .1s cubic-bezier(0,0,.2,1);z-index:1}lite-youtube .lyt-playbtn:focus,lite-youtube:hover>.lyt-playbtn{filter:none}lite-youtube.lyt-activated{cursor:unset}lite-youtube.lyt-activated:before,lite-youtube.lyt-activated>.lyt-playbtn{opacity:0;pointer-events:none}.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.page-not-found{background:linear-gradient(oklch(.75 .075 240) 62%,oklch(.75 .075 60) 0);height:stretch}.screen{fill:var(--screen)}.error{dominant-baseline:middle;fill:currentColor;font-family:var(--font-brand);text-anchor:middle;transform:translate(720px,310px);transform-box:fill-box;transform-origin:top left}.error__code,.error__message{font-family:var(--font-brand);font-size:var(--step-5)}.error__code{font-size:var(--step-5)}.error__message{font-size:var(--step-4)}.date{dominant-baseline:middle;fill:currentColor;font-family:var(--font-brand);text-anchor:middle;transform:translate(1200px,154px);transform-box:fill-box;transform-origin:top left}.date__month{fill:oklch(100 0 0);font-size:var(--step-4)}.date__day{fill:var(--greyscale-9);font-size:var(--step-5)}@media screen{[data-theme=light]{--screen:var(--primary-2)}[data-theme=dark]{--screen:var(--greyscale-9)}}.reveal{animation:reveal 4s linear 2s infinite}@keyframes reveal{0%{y:455px}to{y:305px}}