*,*:after,*:before{box-sizing:inherit;margin:0;padding:0;color:currentColor}:focus-visible{outline:var(--p-border)dotted var(--c-theme);outline-offset:.25rem}main:focus{outline:none}picture,figure,img,svg,video{display:block;overflow:hidden}img,svg,video{max-width:100%;height:auto}ul,ol,menu{list-style:none}a,button,label,details,i{text-decoration:none;font-style:normal;cursor:pointer}table{width:100%;border-collapse:collapse;text-align:left}@font-face{font-family:ibm plex sans;src:url(/files/fnt/IBMPlexSansVar-Roman-Latin1.woff2)format("woff2");font-weight:100 700;font-style:normal;font-display:swap}@font-face{font-family:ibm plex sans;src:url(/files/fnt/IBMPlexSansVar-Italic-Latin1.woff2)format("woff2");font-weight:100 700;font-style:italic;font-display:swap}@font-face{font-family:ibm plex serif;src:url(/files/fnt/IBMPlexSerifVar-Roman-Latin1.woff2)format("woff2");font-weight:100 700;font-style:normal;font-display:swap}@font-face{font-family:ibm plex serif;src:url(/files/fnt/IBMPlexSerifVar-Italic-Latin1.woff2)format("woff2");font-weight:100 700;font-style:italic;font-display:swap}@font-face{font-family:ibm plex mono;src:url(/files/fnt/IBMPlexMono-Regular-Latin1.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}html{box-sizing:border-box;width:100vw;overflow-x:hidden;font-size:clamp(1rem,.625rem + .9375vw,1.375rem);background:var(--c-back)}html:focus-within{scroll-behavior:smooth}[hidden],.is-hidden:not(:focus):not(:active){position:absolute!important;height:0;width:0;overflow:hidden}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes slide-in{from{opacity:0;transform:translateY(var(--p-gutter))}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes clip-up{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}::selection{color:var(--c-dark-1);background:var(--c-highlight)}:is(p,dd,small,h6){max-width:68ex;line-height:1.6}p{text-wrap:pretty}small,figcaption{font-size:var(--fs-s);color:var(--c-text-muted)}a,label{color:currentColor;transition:color var(--a-delay)var(--a-bezier)}a:hover,label:hover{color:var(--c-theme)}a{text-underline-offset:min(.38ex,13px)}a[href^=http]:not([href*="johnwestbroek.nl"]):after{content:"^";display:inline-block;margin-left:var(--p-border);font:.62em/1 var(--ff-code);vertical-align:top}time,label,h5{font:var(--fs-p)/1 var(--ff-code);letter-spacing:.13em;text-transform:uppercase;color:var(--c-text-muted)}time{cursor:help}time:before{content:"@";padding-right:var(--p-border);color:var(--c-border)}del{white-space:nowrap;text-decoration:wavy line-through var(--c-theme)}mark{color:var(--c-dark-1);background:var(--c-highlight)}h1,h2,h3,h4,dt,th,.hl{display:inline-block;letter-spacing:-.013em;color:var(--c-text-heading)}h1,.h1,h2,h3,.hl{display:block;max-width:38ch;text-wrap:balance;font:var(--fw-head,600)var(--fs-h1)/1.125 var(--ff-head)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}:is(h2,h3){--p-flow:min(1.5em, var(--p-gutter))}:is(h2,h3)+*{--p-flow:var(--p-padding)}:is(h2,h3) a{display:block}:is(h2,h3) a:after{content:" ·";font:700 1em/1 var(--ff-text);white-space:nowrap;color:var(--c-theme)}h4,dt,th{font:var(--fw-head,600)var(--fs-h4)/1.125 var(--ff-text)}h6{font-size:var(--fs-p);color:var(--c-text-heading)}.hs{display:flex;gap:var(--p-border);position:absolute;top:var(--p-border-n);padding-right:var(--p-space);background:var(--c-back);transform:translateY(-50%)}.hs:before,.hs:after{content:"[";color:var(--c-border)}.hs:after{content:"]"}.hi{font:italic var(--fs-i)/1.5 var(--ff-head);text-wrap:balance}.hl{font-size:var(--fs-l);line-height:1}dl:not(.m-info) dt+dd{padding-top:var(--p-padding);border-top:var(--p-border)dotted var(--c-text-muted)}dl:not(.m-info) dd{margin-top:var(--p-space);line-height:1.4lh;white-space:normal}dl:not(.m-info) dd+dt{margin-top:var(--p-padding)}dl:not(.m-info).details{padding:var(--p-padding);background:var(--c-back-contrast)}dl:not(.m-info).details dd:before{display:inline-block;margin-right:1ex;content:"+"}hr{--p-flow:var(--p-gutter);height:0;border:0 solid var(--c-text-muted);border-top-width:var(--p-border)}hr+*{--p-flow:var(--p-gutter)}:is(figure,picture){--p-flow:var(--p-padding)}:is(figure,picture)+*{--p-flow:var(--p-gutter)}:is(figure,picture){background:var(--c-back)}:is(figure,picture) img{width:100%}figcaption{padding-top:var(--p-padding);text-wrap:balance}img{position:relative;aspect-ratio:var(--img-ratio,auto);object-fit:cover;image-rendering:var(--img-render,-webkit-optimize-contrast);mix-blend-mode:var(--img-blend,normal)}img:after{content:"[IMG]";display:grid;place-items:center;position:absolute;inset:0;text-align:center;background:var(--c-back-contrast)}img.cover{width:100%;border-radius:var(--p-space)}img.banner{--img-render:pixelated;--img-ratio:8/3;--img-blend:darken;width:100%;border-radius:var(--p-space)}[data-icon]:before{content:attr(data-icon)}pre,code{font:var(--fs-p)/1.125 var(--ff-code);white-space:pre-wrap;color:var(--c-text-muted);background:var(--c-back-contrast)}pre{--p-flow:var(--p-padding)}pre+*{--p-flow:var(--p-padding)}pre{overflow-x:auto;padding:var(--p-padding);white-space:pre}code{display:inline-block;font-size:var(--fs-s);white-space:nowrap;padding:.38ex .62ex}table{width:100%;background:var(--c-back);border:0 solid var(--c-border);border-width:var(--p-border)0}table tbody tr+tr{border-top:var(--p-border)dotted var(--c-border)}table thead{border-bottom:var(--p-border)solid var(--c-border)}table tfoot{border-top:var(--p-border)solid var(--c-border)}table td,table th{display:table-cell;padding:var(--p-space)var(--p-padding)var(--p-space)0}table td:last-child,table th:last-child{padding:var(--p-space)0}table td{font-size:var(--fs-s)}table.numbered tbody,table.numbered thead{counter-reset:rowNumber}table.numbered tbody tr:before,table.numbered thead tr:before{display:table-cell;padding:var(--p-space)var(--p-padding)var(--p-space)0;counter-increment:rowNumber;content:counter(rowNumber,decimal-leading-zero);font:var(--fs-s)/1 var(--ff-code);vertical-align:middle;text-align:center;color:var(--c-text-muted)}table.numbered thead tr:before{content:"#"}:is(.btn,.btn-s){--p-flow:var(--p-padding);display:inline-flex;align-items:center;min-height:var(--p-gutter);padding:0 .38lh;border:var(--p-border)solid var(--c-border);white-space:nowrap;font:var(--fs-h4)/1 var(--ff-code);letter-spacing:-.013em;text-transform:uppercase;text-decoration:none;color:var(--c-text-muted)}:is(.btn,.btn-s):hover{color:var(--c-text)}.btn-s{font-size:var(--fs-s);min-height:var(--p-padding)}.content{align-items:start}.content>*+*{margin-block-start:var(--p-flow)}.content :is(p,dd) a{color:var(--c-theme);text-decoration:underline}@media(min-width:1024px){.content h1{margin-left:calc(var(--p-gutter) * -1)}}@media(min-width:1024px){.content figure,.content pre{margin-right:var(--p-gutter)}}.content figure{grid-column:body}.content figure.spread{grid-column:page}@media(min-width:1024px){.content figure:has(figcaption):not(.spread){grid-column:page;display:grid;grid-template-columns:subgrid}}.content figure:has(figcaption):not(.spread) img{grid-area:body}.content figure:has(figcaption):not(.spread) figcaption{grid-area:side}@media(min-width:1024px){.content figure:has(figcaption):not(.spread) figcaption{margin-left:var(--p-gutter);border-top:var(--p-border)solid var(--c-border);text-align:right}}.entry--text .title{padding:var(--p-gap)0 0 var(--p-gutter)}.entry--text img:not(.banner){transition:all var(--a-delay)var(--a-bezier)}.entry--text img:not(.banner):not(:active){--img-blend:darken;filter:grayscale(1)opacity(.8);cursor:crosshair}.home-title{background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--p-gap) - var(--p-border)),var(--c-border) calc(var(--p-gap) - var(--p-border)),var(--c-border) var(--p-gap))}.home-title h1,.home-title p{display:inline;max-width:none;text-wrap:auto;line-height:var(--p-gap)}.home-title p{font-weight:400;color:var(--c-text)}@media(max-width:1024px){.home-title p{display:none}}.home-title a{font-style:italic}ol.m-tl>li{border-left:var(--p-border)solid var(--c-border)}ol.m-tl>li+li{padding-top:var(--p-gap)}.m-tl__entry{display:grid;gap:var(--p-padding);padding-left:var(--p-padding)}.m-tl__entry .period{margin-bottom:var(--p-padding);font:var(--fs-s)/1 var(--ff-code);color:var(--c-text-muted)}.m-tl__entry .period time{font-size:var(--fs-s)}.m-tl__entry .period time:before{display:none}.m-tl__entry .role{position:relative}.m-tl__entry .role:before{content:"●";position:absolute;top:50%;left:calc((var(--p-padding) + var(--p-border)) * -1);font-size:var(--fs-p);color:var(--c-theme);transform:translate(-50%,-50%)}.m-tl__entry .org{padding-top:var(--p-space);font:italic var(--fs-h4)/1 var(--ff-head)}.m-tl__entry section p{color:var(--c-text-muted)}.ta-center{text-align:center}.tc-text{color:var(--c-text)}.tc-muted{color:var(--c-text-muted)}.fs-small{font-size:var(--fs-s)}.fw-400{font-weight:400}.mt-1{display:inline-block;margin-top:1ex}:root{--s-maxwidth:1640px;--s-grid:[page-start side-start] 1fr [side-end body-start] 1fr 1fr [body-end
    page-end];--p-page:max(var(--p-page-border), calc(50vw - (var(--s-maxwidth) / 2)));--p-page-border:var(--p-gutter);--p-border:2px;--p-border-n:calc(var(--p-border) * -1);--p-space:clamp(8px, 1em, 0.62rem);--p-padding:clamp(16px, calc(13.8462px + 0.9615vi), 32px);--p-gutter:clamp(32px, calc(-6.9231px + 5.7692vi), 64px);--p-gap:clamp(64px, calc(23.0769px + 5.7692vi), 96px);--p-flow:1lh;--c-light-1:#c0c3b0;--c-light-2:#b1b4a1;--c-mid-1:#656f64;--c-dark-1:#1f2519;--c-dark-2:#454b43;--c-theme:#c84630;--c-highlight:#dec956;--c-text-heading:var(--c-light-1);--c-text:var(--c-light-2);--c-text-muted:var(--c-mid-1);--c-back:var(--c-dark-1);--c-back-contrast:var(--c-dark-2);--c-border:var(--c-dark-2);--c-logo:var(--c-light-1);--ff-head:"IBM Plex Serif", serif;--ff-text:"IBM Plex Sans", sans-serif;--ff-code:"IBM Plex Mono", monospace;--fs-l:5.82rem;--fs-h1:3.64rem;--fs-h2:2.5rem;--fs-h3:1.75rem;--fs-i:1.25rem;--fs-h4:1.125rem;--fs-p:1rem;--fs-s:clamp(16px, 0.875rem, 19px);--a-bezier:cubic-bezier(0.6, 0.69, 0.14, 1);--a-speed:0.32s;--a-delay:0.16s;--a-default:var(--a-speed) var(--a-delay) var(--a-bezier) both}@media(max-width:640px){:root{--p-page-border:var(--p-padding);--fs-l:3.64rem;--fs-h1:2.5rem;--fs-h2:1.75rem;--fs-i:1rem}}.site{display:grid;grid-template-rows:minmax(var(--p-gap),auto)auto 1fr minmax(var(--p-gap),auto);min-height:100vh;font:var(--fs-p)/1 var(--ff-text);background:var(--c-back)}.site>*{position:relative;display:grid;grid-template-columns:var(--s-grid);gap:0 var(--p-gutter);align-content:start;padding-inline:var(--p-page);color:var(--c-text);background:var(--c-back);z-index:0}@media(max-width:1024px){.site>*{grid-template-columns:[page-start side-start body-start] 1fr [side-end body-end page-end]}}.site.is-single .site__header,.site.is-single .site__body{--c-text-heading:var(--c-dark-1);--c-text:var(--c-dark-2);--c-text-muted:var(--c-mid-1);--c-back:var(--c-light-1);--c-back-contrast:var(--c-light-2);--c-border:var(--c-light-2);--c-logo:var(--c-dark-1);--fw-head:700}.site__header{align-content:end;border-bottom:var(--p-border)solid var(--c-border)}.site__body>*{grid-column:page;padding-block:var(--p-gutter)var(--p-gap)}.site__body>*:not(header){animation:slide-in var(--a-default)}.site__body>header{animation:fade-in var(--a-default)}.site__body img{animation:clip-up var(--a-speed)var(--a-delay)steps(8)both}.site__footer{align-content:center;border-top:var(--p-border)solid var(--c-border);color:var(--c-text-muted)}.header__brand{height:var(--p-gutter)}@media(max-width:1024px){.header__brand{border-bottom:var(--p-border)solid var(--c-border);text-align:center}}.header__brand a{display:inline-block;background:var(--c-back);box-shadow:0 0 0 var(--p-space)var(--c-back)}.header__brand a:hover,.header__brand a[aria-current]{--c-logo:var(--c-theme)}.header__brand .logo{height:calc(var(--p-gutter) + var(--p-border));margin-bottom:var(--p-border-n)}.header__menu{grid-column:body}.menu,.tabs{padding:0 var(--p-border);background:var(--c-back)}.menu :is(a,label),.tabs :is(a,label){display:flex;align-items:center;justify-content:space-between;min-height:var(--p-gutter);padding-block:var(--p-space)}.menu a{font:var(--fw-head,600)var(--fs-h4)/1 var(--ff-text);letter-spacing:-.013em}.menu a[aria-current],.menu a:active{color:var(--c-text-muted)}.index{position:sticky;top:var(--p-padding);grid-column:side!important;padding:1lh var(--p-gutter)1lh 0;background:var(--c-back);z-index:10}.index li{position:relative}.index li:after{content:"";width:100%;position:absolute;top:50%;border-top:var(--p-border)solid var(--c-border);transform:translateY(50%);z-index:-1}.index a{padding:0 var(--p-space);font:var(--fs-p)/1 var(--ff-head);white-space:nowrap;background:var(--c-back)}.index a:active{text-indent:10px}#arc input{position:absolute;opacity:0;pointer-events:none}#arc .tabbar,#arc .panels,#arc .panel{grid-column:page;display:grid;grid-template-columns:subgrid}#arc .tabbar{border-bottom:var(--p-border)solid var(--c-border)}#arc .tabs{grid-column:body;margin:0 0 var(--p-gutter)}@media(min-width:1024px){#arc .tabs{margin:0 0 var(--p-border-n)}}#arc .tabs .tab{padding-inline:var(--p-space);background:radial-gradient(var(--c-border) 1px,transparent 1px);background-size:4px 4px}#arc .tabs .tab:hover{color:var(--c-text)}#arc .panels{position:relative;padding-block:var(--p-gutter)var(--p-gap)}#arc .panels .panel{display:none}#arc .panels .panel header{animation:fade-in var(--a-default)}#arc .records{grid-column:body;border-top:var(--p-border)dotted var(--c-border);animation:slide-in var(--a-default)}#arc .records .record{display:flex;box-sizing:content-box;align-items:center;justify-content:space-between;gap:var(--p-padding);position:relative;min-height:var(--p-gutter);padding:var(--p-border)var(--p-space);border-bottom:var(--p-border)dotted var(--c-border);z-index:10}#arc .records .record.is-muted{pointer-events:none}#arc .records .record.is-muted h4{color:var(--c-text-muted)}#arc .records .record.is-muted .terms,#arc .records .record.is-muted h4{opacity:.38}#arc .records .record .page-link:before{content:"";position:absolute;inset:0}#arc .records .record .terms{z-index:20}@media(max-width:640px){#arc .records .record .terms{display:none}}#arc-tab-1:checked~.tabbar .tabs [for=arc-tab-1],#arc-tab-2:checked~.tabbar .tabs [for=arc-tab-2],#arc-tab-3:checked~.tabbar .tabs [for=arc-tab-3]{pointer-events:none;color:var(--c-text);background:var(--c-border)}#arc-tab-1:checked~.panels #arc-panel-1,#arc-tab-2:checked~.panels #arc-panel-2,#arc-tab-3:checked~.panels #arc-panel-3{display:grid}.m-info{display:flex;align-items:center;gap:var(--p-space);font:var(--fs-s)/1 var(--ff-code)}.m-info dt{font-size:var(--fs-s)}.m-info dd{display:flex;gap:var(--p-space);align-items:center;margin:0}.m-info--location{grid-column:body}.m-info--location img{height:var(--p-padding);cursor:help}.m-info--location dt:not(:first-of-type){margin-left:auto}.g-page,.page__entry,.page__section,.card{display:grid;grid-template-columns:subgrid;gap:var(--p-gutter);position:relative}.g-gallery{--min:15rem;--aspect-ratio:4/3}.g-gallery>*{height:auto;aspect-ratio:var(--aspect-ratio)}.g-gallery img{width:100%;height:100%}.g-cols{--col-min:32ch;--col-gap:var(--p-gutter);display:grid;gap:var(--col-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--col-min)),1fr))}.g-c-page{grid-column:page!important}.g-c-side{grid-column:side!important;order:-1;margin-top:0}.page__header+*{border-top:var(--p-border)solid var(--c-border)}.page__entry>*{grid-column:page}.page__entry__body>*{grid-column:body}.page__entry__body.content{gap:0 var(--p-gutter)}.page__entry__body section{position:relative;padding-block:var(--p-gutter)var(--p-gap);border-top:var(--p-border)solid var(--c-border)}.page__entry__meta{align-items:center}.page__section{padding-block:var(--p-gutter)var(--p-gap);border-top:var(--p-border)solid var(--c-border)}.card{grid-column:page}.card:not(:hover) img{--img-blend:darken}.card__picture{overflow:hidden;border-radius:var(--p-space);background:var(--c-back-contrast)}.card__picture img{--img-render:pixelated;--img-ratio:4/3;width:100%;height:100%}@media(max-width:1024px){.card__picture img{--img-ratio:8/3}}.card__body{grid-column:body;display:flex;flex-flow:column wrap;gap:var(--p-padding);justify-content:space-between;position:relative;margin-top:var(--p-padding);padding-block:var(--p-gutter)var(--p-padding);border-top:var(--p-border)dotted var(--c-border)}.card .title a:before{content:"";position:absolute;inset:0}.card .excerpt{color:var(--c-text-muted)}.card .date{position:absolute;top:var(--p-border-n);padding-right:var(--p-space);background:var(--c-back);transform:translateY(-50%)}.list,.list-row,.list-menu{display:flex;flex-flow:column wrap;gap:var(--p-space)}.list>*,.list-row>*,.list-menu>*{flex:1;display:flex;align-items:center;white-space:nowrap}.list-row,.list-menu{flex-flow:row wrap;align-items:center;gap:0 var(--p-border)}.list-menu a{width:100%}@media(max-width:640px){.list-menu{display:block}}.list-row{gap:var(--p-padding)}.list-row.terms{gap:0;width:max-content;padding-left:var(--p-border)}.list-row.terms li{margin-left:var(--p-border-n)}.list--social a:before{content:" ";display:inline-block;width:1em;margin-right:var(--p-space);background:50%/contain no-repeat;opacity:.38}.list--social a[href*=linkedin]:before{background-image:url(/files/img/ico/ico_linkedin.svg)}.list--social a[href*=github]:before{background-image:url(/files/img/ico/ico_github.svg)}.list--social a[href*=instapaper]:before{background-image:url(/files/img/ico/ico_instapaper.svg)}.list--social a[href*=discogs]:before{background-image:url(/files/img/ico/ico_discogs.svg)}.list--social a[href*=bsky]:before{background-image:url(/files/img/ico/ico_bluesky.svg)}.list--social a[href*=last]:before{background-image:url(/files/img/ico/ico_lastfm.svg)}.list--social a[href*=pinterest]:before{background-image:url(/files/img/ico/ico_pinterest.svg)}