/*! Theme Name: Chris Coyier Theme 9 Author: Chris Coyier Version: 1 */html{--orange: oklch(74% 55% 45deg);--paper: oklch(19% 3% 72deg);--ink: white;--brown: oklch(26% 4% 63deg);--code-1: #ffb100;--code-2: #a4bb98;--code-3: #fbc254;--code-4: #fe7032}*,*::before,*::after{box-sizing:border-box}.hide{display:none}.visually-hidden{position:absolute;top:-9999px;left:-9999px}img{max-width:100%;height:auto !important;display:block}/*! Theme Name: Chris Coyier Theme 9 Author: Chris Coyier Version: 1 */@font-face{font-family:"Roslindale";src:url(fonts/roslindale.woff2) format("woff2");font-weight:300;font-style:normal}:root{--font-family: Roslindale, system-ui, sans-serif;--font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace}@layer typography{html.front-end,.editor-styles-wrapper.editor-styles-wrapper{font-family:var(--font-family);font-size:100%;line-height:1.4;font-variation-settings:"wdth" 100,"wght" 300;overflow-wrap:break-word;background-color:var(--paper);color:var(--ink)}html.front-end li,html.front-end p,html.front-end pre,html.front-end code,.editor-styles-wrapper.editor-styles-wrapper li,.editor-styles-wrapper.editor-styles-wrapper p,.editor-styles-wrapper.editor-styles-wrapper pre,.editor-styles-wrapper.editor-styles-wrapper code{overflow-wrap:break-word;word-break:break-word}html.front-end p,.editor-styles-wrapper.editor-styles-wrapper p{margin:0 0 1rem 0}html.front-end strong,.editor-styles-wrapper.editor-styles-wrapper strong{font-variation-settings:"wght" 600}html.front-end em,.editor-styles-wrapper.editor-styles-wrapper em{font-style:normal;font-variation-settings:"slnt" -6;letter-spacing:.25px}html.front-end a,.editor-styles-wrapper.editor-styles-wrapper a{color:inherit;text-decoration:none}html.front-end h1,html.front-end h2,html.front-end h3,html.front-end h4,html.front-end h5,html.front-end h6,.editor-styles-wrapper.editor-styles-wrapper h1,.editor-styles-wrapper.editor-styles-wrapper h2,.editor-styles-wrapper.editor-styles-wrapper h3,.editor-styles-wrapper.editor-styles-wrapper h4,.editor-styles-wrapper.editor-styles-wrapper h5,.editor-styles-wrapper.editor-styles-wrapper h6{font-variation-settings:"wdth" 70,"wght" 700;line-height:1;text-wrap:balance}html.front-end h1,html.front-end .h1,.editor-styles-wrapper.editor-styles-wrapper h1,.editor-styles-wrapper.editor-styles-wrapper .h1{font-size:4rem;margin:0 0 1rem 0}@media(width < 600px){html.front-end h1,html.front-end .h1,.editor-styles-wrapper.editor-styles-wrapper h1,.editor-styles-wrapper.editor-styles-wrapper .h1{font-size:3rem}}html.front-end h2,html.front-end .h2,.editor-styles-wrapper.editor-styles-wrapper h2,.editor-styles-wrapper.editor-styles-wrapper .h2{font-size:2.5rem;margin-block:1rem 1.2rem}html.front-end h2.jetpack-instant-search__search-results-title,html.front-end .h2.jetpack-instant-search__search-results-title,.editor-styles-wrapper.editor-styles-wrapper h2.jetpack-instant-search__search-results-title,.editor-styles-wrapper.editor-styles-wrapper .h2.jetpack-instant-search__search-results-title{margin-block-start:1rem;margin-inline-start:2rem}html.front-end h3,.editor-styles-wrapper.editor-styles-wrapper h3{font-size:var(--font-size-md)}html.front-end h3:not(:first-child),.editor-styles-wrapper.editor-styles-wrapper h3:not(:first-child){margin-block:3rem 1.2rem}html.front-end details,.editor-styles-wrapper.editor-styles-wrapper details{margin:0 0 1rem 0}html.front-end sub,html.front-end sup,.editor-styles-wrapper.editor-styles-wrapper sub,.editor-styles-wrapper.editor-styles-wrapper sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}html.front-end sub,.editor-styles-wrapper.editor-styles-wrapper sub{bottom:-0.25em}html.front-end sup,.editor-styles-wrapper.editor-styles-wrapper sup{top:-0.5em}html.front-end p:not(.wp-block),html.front-end li,.editor-styles-wrapper.editor-styles-wrapper p:not(.wp-block),.editor-styles-wrapper.editor-styles-wrapper li{max-width:50ch}html.front-end pre,.editor-styles-wrapper.editor-styles-wrapper pre{margin:0}html.front-end pre:not(:has(.hljs)),html.front-end .hljs,.editor-styles-wrapper.editor-styles-wrapper pre:not(:has(.hljs)),.editor-styles-wrapper.editor-styles-wrapper .hljs{border-radius:4px;padding:1rem !important;margin-block-end:1rem !important;background:#000 !important;color:#fff !important;white-space:pre-wrap !important;font-size:1rem}html.front-end article ul,html.front-end article ol,.editor-styles-wrapper.editor-styles-wrapper article ul,.editor-styles-wrapper.editor-styles-wrapper article ol{padding:0 0 0 1rem;margin:0 0 1rem 0}html.front-end article ul>li,html.front-end article ol>li,.editor-styles-wrapper.editor-styles-wrapper article ul>li,.editor-styles-wrapper.editor-styles-wrapper article ol>li{margin:0 0 .5rem 0}html.front-end blockquote,.editor-styles-wrapper.editor-styles-wrapper blockquote{font-family:var(--font-family-mono);font-variation-settings:"wght" 500;font-size:1rem;line-height:1.7;margin:0 0 1.5rem 0;padding:2rem !important;border-radius:4px}@media(width < 600px){html.front-end blockquote,.editor-styles-wrapper.editor-styles-wrapper blockquote{padding:1rem !important}}html.front-end blockquote cite::before,.editor-styles-wrapper.editor-styles-wrapper blockquote cite::before{content:"— ";padding-inline-start:1rem}html.front-end hr,.editor-styles-wrapper.editor-styles-wrapper hr{margin:2rem auto;height:4px;border:0;width:100px;background:#000}html.front-end figure figcaption,.editor-styles-wrapper.editor-styles-wrapper figure figcaption{font-size:.9rem}html.front-end .post-format,.editor-styles-wrapper.editor-styles-wrapper .post-format{text-transform:uppercase}html.front-end .has-drop-cap:not(:focus):first-letter,.editor-styles-wrapper.editor-styles-wrapper .has-drop-cap:not(:focus):first-letter{font-size:6.3em !important;margin:.05em .1em .3em 0 !important}html.front-end .jetpack-instant-search__overlay.jetpack-instant-search__overlay--dark .jetpack-instant-search__search-results-list h3 a,html.front-end .jetpack-instant-search__overlay.jetpack-instant-search__overlay--dark .jetpack-instant-search__search-result-expanded__path a{color:#fff !important}.aal_anchor{width:16px;height:16px;display:inline-block;scroll-margin-block-start:4rem;margin-inline-end:.25rem;margin-inline-start:calc(-16px - .25rem);opacity:.5}.aal_anchor svg{filter:invert(1)}.aal_anchor:hover,.aal_anchor:focus{opacity:1}}html.front-end pre:has(.hljs),.editor-styles-wrapper.editor-styles-wrapper pre:has(.hljs){padding:0 !important}html.front-end pre,html.front-end code,.editor-styles-wrapper.editor-styles-wrapper pre,.editor-styles-wrapper.editor-styles-wrapper code{font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}html.front-end p code,html.front-end li code,html.front-end dd code,.editor-styles-wrapper.editor-styles-wrapper p code,.editor-styles-wrapper.editor-styles-wrapper li code,.editor-styles-wrapper.editor-styles-wrapper dd code{font-size:82%;padding:.1rem}html.front-end .hljs-type,html.front-end .hljs-string,html.front-end .hljs-subst,html.front-end .hljs-number,html.front-end .hljs-selector-id,html.front-end .hljs-selector-class,html.front-end .hljs-deletion,.editor-styles-wrapper.editor-styles-wrapper .hljs-type,.editor-styles-wrapper.editor-styles-wrapper .hljs-string,.editor-styles-wrapper.editor-styles-wrapper .hljs-subst,.editor-styles-wrapper.editor-styles-wrapper .hljs-number,.editor-styles-wrapper.editor-styles-wrapper .hljs-selector-id,.editor-styles-wrapper.editor-styles-wrapper .hljs-selector-class,.editor-styles-wrapper.editor-styles-wrapper .hljs-deletion{color:var(--code-1) !important}html.front-end .hljs-built_in,html.front-end .hljs-bullet,html.front-end .hljs-code,html.front-end .hljs-addition,html.front-end .hljs-literal,html.front-end .hljs-keyword,html.front-end .hljs-attr,html.front-end .hljs-attribute,.editor-styles-wrapper.editor-styles-wrapper .hljs-built_in,.editor-styles-wrapper.editor-styles-wrapper .hljs-bullet,.editor-styles-wrapper.editor-styles-wrapper .hljs-code,.editor-styles-wrapper.editor-styles-wrapper .hljs-addition,.editor-styles-wrapper.editor-styles-wrapper .hljs-literal,.editor-styles-wrapper.editor-styles-wrapper .hljs-keyword,.editor-styles-wrapper.editor-styles-wrapper .hljs-attr,.editor-styles-wrapper.editor-styles-wrapper .hljs-attribute{color:var(--code-2) !important}html.front-end .hljs-title,html.front-end .hljs-name,html.front-end .hljs-meta,.editor-styles-wrapper.editor-styles-wrapper .hljs-title,.editor-styles-wrapper.editor-styles-wrapper .hljs-name,.editor-styles-wrapper.editor-styles-wrapper .hljs-meta{color:var(--code-3) !important}html.front-end .hljs-selector-pseudo,html.front-end .hljs-quote,html.front-end .hljs-template-tag,.editor-styles-wrapper.editor-styles-wrapper .hljs-selector-pseudo,.editor-styles-wrapper.editor-styles-wrapper .hljs-quote,.editor-styles-wrapper.editor-styles-wrapper .hljs-template-tag{color:var(--code-4) !important}html.front-end .hljs>mark.shcb-loc,.editor-styles-wrapper.editor-styles-wrapper .hljs>mark.shcb-loc{padding:.2rem 0 .2rem .2rem;display:block;background:var(--orange);text-indent:.2rem;translate:-0.4rem 0;border-radius:6px}html.front-end .hljs>mark.shcb-loc *,.editor-styles-wrapper.editor-styles-wrapper .hljs>mark.shcb-loc *{color:#000 !important}@view-transition{navigation:auto}html{--wp--style--global--content-size: 65ch;scroll-timeline-name:--html;scroll-timeline-axis:block}body{margin:2rem;position:relative;overflow-x:clip}@media(width < 600px){body{margin:1rem}}.content{max-width:min(100%,1050px);margin-inline:auto}.article-content{background:#fff;color:#000;border-radius:20px;position:relative;font-size:1.5rem;padding:3rem}@media(width < 600px){.article-content{padding:1.5rem;font-size:1.1rem}}.article-content>p:first-child::first-line{font-variant:small-caps;font-size:105%;letter-spacing:1px}.article-content :last-child{margin-block-end:0}body.single .article-content::after{content:"";position:absolute;width:300px;aspect-ratio:1;background:var(--orange);top:-120px;left:-80px;border-radius:50%;z-index:-1}.interview{display:block;margin-block-end:2rem}.speaking-lists h2{margin-block-start:5rem}.archive-article{margin-block-end:3rem}.month-list{columns:15ch auto}.month-list a:hover{color:var(--orange)}body{--scrollbar-foreground: var(--orange);--scrollbar-background: var(--paper);scrollbar-color:var(--scrollbar-foreground) var(--scrollbar-background)}body::-webkit-scrollbar{width:20px;height:20px}body::-webkit-scrollbar-thumb{background:var(--scrollbar-foreground);border-radius:100px}body::-webkit-scrollbar-track{border-left:1px solid var(--paper-highlight);background:var(--scrollbar-background)}.submit,.button,.pagination a{text-decoration:none !important;background:#000;color:#fff;box-shadow:inset 0 1px 2px -1px #fff;border-radius:40px;font-family:var(--font-family-mono);font-size:var(--font-size-sm);border:0;white-space:nowrap;padding:.3rem 2rem .4rem}.submit:focus,.submit:hover,.button:focus,.button:hover,.pagination a:focus,.pagination a:hover{text-decoration:none;box-shadow:inset 0 1px 2px -1px #fff,0 3px 3px rgba(0,0,0,.6)}.submit:active,.button:active,.pagination a:active{transform:translateY(1px);box-shadow:inset 0 1px 2px -1px #fff,0 2px 2px rgba(0,0,0,.75)}.site-header{max-width:min(100%,1050px);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2rem;margin:0 auto 2rem auto}@media(width < 600px){.site-header{grid-template-columns:1fr}.site-header .site-nav,.site-header .site-search{grid-column:1/-1}}.home-header-tile{container:home-header-tile/inline-size;grid-row:1/-1;align-self:start;background:var(--brown);max-width:350px;min-width:220px;display:grid;grid-template-columns:2fr 3fr;border-radius:20px;position:relative}.home-header-tile[data-active-dot="2"] .home-header-tile-name-chris,.home-header-tile[data-active-dot="2"] .home-header-tile-name-coyier{font-family:var(--font-family-mono);text-transform:uppercase}.home-header-tile[data-active-dot="2"] .home-header-tile-name-chris{transform:scaleY(-1)}.home-header-tile[data-active-dot="3"]::before{content:"Miranda Mulligan &";position:absolute;left:48cqi;top:10cqi;opacity:1;transition:2s;font-size:5cqi;mask-image:linear-gradient(to left, rgb(0, 0, 0) 90%, transparent);mask-size:130% 100%;mask-repeat:no-repeat;mask-position:-20px 0}@starting-style{.home-header-tile[data-active-dot="3"]::before{opacity:0;mask-position:-250px 0}}.home-header-tile[data-active-dot="3"] .home-header-tile-name{margin-left:23px;scale:.75}.home-header-tile[data-active-dot="4"]::before{content:"& Dave Rupert";position:absolute;left:51cqi;top:30cqi;font-size:5cqi}.home-header-tile[data-active-dot="4"] .home-header-tile-name{margin-top:-15cqi;margin-left:3cqi;scale:.78}.home-header-tile::after{content:"";position:absolute;top:-10px;right:-10px;width:100px;height:100px;background:linear-gradient(300deg, var(--orange), black);border-radius:20px;z-index:-1}@media(width < 600px){.home-header-tile::after{display:none}}.home-header-tile-photo img{border-radius:20px}.home-header-tile-name{line-height:.7;margin-left:-20px;display:grid;align-items:center}.home-header-tile-name a{text-decoration:none}.home-header-tile-name-chris{color:var(--orange);font-size:7.8cqi;font-variation-settings:"wght" 200;margin-left:11cqi}.home-header-tile-name-coyier{font-size:14.3cqi;font-variation-settings:"wght" 800,"slnt" -8;color:#fff}.home-header-dots{position:absolute;bottom:8px;right:8px}.home-header-dots>button{border:0;border-radius:50%;width:14px;height:14px;padding:0;font-size:10px;padding:3px;text-indent:-100px;overflow:clip;background:#fff;border:2px solid #fff;background-clip:content-box}.home-header-dots>button.active{border-color:var(--orange)}.site-nav{align-self:start;text-align:end;grid-column:2/-1;border-bottom:2px solid var(--orange);display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 1.5rem;grid-template-rows:min-content min-content}.site-nav>*{align-self:end}.site-nav p{color:var(--orange);grid-row:1/-1;text-transform:uppercase;font-family:var(--font-family-mono);font-weight:500;line-height:1.1;margin:0 0 .25rem 0 !important}.site-nav>a{display:inline-block;padding-block:.25rem;transition:.1s ease-in;position:relative;white-space:nowrap}.site-nav>a::before{content:"";display:inline-block;height:.4lh;aspect-ratio:1;border-radius:50%;background:var(--orange);margin:0 .5rem 0 0}.site-nav>a::after{content:"";display:block;height:1px;position:absolute;top:16px;left:0;width:50%;scale:0% 100%;z-index:-1;background:var(--orange);margin:0 0 0 .5rem;transition:.2s}.site-nav>a:hover::before{background:#fff}.site-nav>a:hover::after{scale:100% 100%}.site-search{grid-column:2/-1}.site-search .search-input{width:100%;background:#000;color:#fff;border:0;border-bottom:1px solid hsla(0,0%,100%,.303);font-family:var(--font-family-mono);padding:1rem 2rem;border-radius:50px}#the-footer-ok{margin-block-start:10rem;position:relative;text-align:center;padding:5rem 2rem 5rem}@media(width < 600px){#the-footer-ok{padding-inline:.5rem}}#the-footer-ok>a{display:inline-block;padding-inline-end:.2rem;padding-block-start:.3rem}#the-footer-ok>a:hover{color:var(--orange)}.footer-name{text-align:start;font-size:3rem;position:relative;width:fit-content;margin:0 auto 5rem;font-variation-settings:"wght" 700}.footer-name strong{display:block;border-bottom:3px solid var(--orange);margin-block-end:.5rem}.footer-name em{display:block;font-size:1rem;padding-left:80px;text-wrap:balance}.footer-name::after{content:"";position:absolute;bottom:-50px;left:-150px;background:var(--orange);width:230px;aspect-ratio:1.2/1;border-radius:50%;z-index:-1;animation:rotateMe linear;animation-timeline:--html}@keyframes rotateMe{100%{rotate:2turn}}.footer-input{font-family:var(--font-family-mono);width:15ch}.article-header{padding:4rem 0}.meta{color:var(--orange);font-family:var(--font-family-mono);font-weight:300;text-transform:uppercase;font-size:1rem;letter-spacing:.1rem}.meta:only-child{color:#fff}article{word-break:break-word}article h2:not(:first-child),article h3:not(:first-child){margin-block-start:3rem}article figure:not(:has(table)){border-radius:4px;margin-block:2rem !important}article figure:not(:has(table)) iframe,article figure:not(:has(table)) video,article figure:not(:has(table)) object,article figure:not(:has(table)) img{display:block;border-radius:8px}article figure:not(:has(table)) figcaption{text-align:left !important;margin:0 !important;display:block !important;margin-block-start:.5rem !important;max-width:300px}article figure:not(:has(table)).alignright{float:right;margin-right:-150px;margin-left:1rem}article figure:not(:has(table)).alignleft{float:left;margin-left:-150px;margin-right:1rem}article figure:not(:has(table)).alignwide{margin-left:-200px;margin-right:-200px}@media(width < 700px){article figure:not(:has(table)).alignright,article figure:not(:has(table)).alignleft{max-width:150px}article figure:not(:has(table)).alignright{margin-right:0;margin-left:1rem}article figure:not(:has(table)).alignleft{margin-left:0;margin-right:1rem}article figure:not(:has(table)).alignwide{margin-left:0;margin-right:0}}article a{text-decoration:underline;color:inherit;text-decoration-thickness:1px;text-underline-offset:2px}article a:hover{text-decoration-thickness:3px}article h1 a,article h2 a,article h3 a,article h4 a,article h5 a,article h6 a{text-decoration:none}article .wp-block-table{border-collapse:collapse;margin-block-end:1rem;word-break:normal;overflow:auto;font-size:90%}article .wp-block-table td,article .wp-block-table th{border:1px solid #000;padding:.5rem 1rem;line-height:1.1}article .wp-block-table:focus{outline:2px solid #000}article .cp_embed_wrapper{overflow:hidden;resize:horizontal;margin:0 auto 1rem}article .cp_embed_wrapper iframe{display:block}.wp-block-group{display:flow-root}.wp-block-columns{gap:1rem}.asks{margin-block-start:5rem;font-size:1rem;opacity:.8}html.front-end .comments-area{max-width:50ch;margin-inline:auto}html.front-end h3#comments{margin-block-start:5rem;text-transform:uppercase}html.front-end .commentlist{list-style:none;padding:0}html.front-end .comment,html.front-end .pingback,html.front-end .webmention{margin-block-end:1.5rem;padding:1.5rem;position:relative;background:var(--brown);color:#fff;border-radius:6px}html.front-end .comment a,html.front-end .pingback a,html.front-end .webmention a{text-decoration-color:hsl(var(--ink-highlight-hsl)/0.2)}html.front-end .comment .children,html.front-end .pingback .children,html.front-end .webmention .children{margin-block-start:3em;list-style:none}html.front-end .comment-author{font-variation-settings:"wght" 700;color:var(--orange);margin:0 0 .5rem 0}html.front-end .comment-author cite{text-transform:uppercase;font-style:normal;font-weight:bold}html.front-end .comment-author cite a{text-decoration:none !important}html.front-end .says{display:none}html.front-end .comment-meta{text-transform:uppercase;margin:.2rem 0;font-size:.8rem;letter-spacing:.1rem;margin-block-end:1rem;position:absolute;top:.2rem;right:.2rem;opacity:.75}html.front-end .comment-meta a{text-decoration:none !important}html.front-end .comment-body{font-size:var(--font-size-tiny)}html.front-end .comment-body p:not(:last-child){margin-bottom:.6rem}html.front-end .comment-respond{margin-block-start:5rem;font-size:var(--font-size-sm)}html.front-end .comment-reply-title{font-size:var(--font-size-sm);text-transform:uppercase}html.front-end .comment-form label{display:block}html.front-end .comment-form input[type=text],html.front-end .comment-form textarea{width:100%;display:block;padding:.5rem;font-family:var(--font-family-mono)}.lifelist{display:table;width:100%;list-style:none;margin:0 !important;padding:0 !important}.lifelist li{display:table-row}.lifelist li>*{display:table-cell;padding:.25rem 1.5rem 1rem 0}.timeline-type{white-space:nowrap;font-weight:bold}.timeline-date{white-space:nowrap}.home-grid{display:grid;grid-template-columns:10fr 6fr;gap:3dvw}@media(max-width: 700px){.home-grid{grid-template-columns:1fr}}.home-intro{background:var(--brown);padding:7%;border-radius:20px}.home-intro h2{font-family:var(--font-family-mono);text-transform:uppercase;font-size:.7rem;letter-spacing:2px;margin-block-start:0;margin-block-end:.25rem}.home-intro h2:not(:first-child){margin-block-start:3rem !important}.home-intro p{color:var(--orange);font-size:1.75rem;font-variation-settings:"wdth" 100,"wght" 250;text-wrap:pretty}.home-intro p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:oklch(1 0 0/.66)}.home-intro p a:hover{text-decoration-thickness:3px}.codepen-logo{filter:invert(1);height:.8lh !important;display:inline-block;vertical-align:middle;position:relative;top:-0.15rem;margin-inline-end:-0.35rem}.shoptalk-logo{height:.8lh !important;display:inline-block;vertical-align:middle;margin-inline:-1rem;position:relative;top:-0.1rem}.articles article.entry{container:entry/inline-size;background:var(--brown);padding:8%;border-radius:20px;margin:0 0 3dvw 0;position:relative}.articles article.entry h2,.articles article.entry .meta{text-align:end}.articles article.entry h2{font-size:min(12.5cqi,2rem);margin:0 0 .66rem 0}.articles article.entry .meta{margin:0 0 1rem 0;font-size:.8rem;color:var(--orange)}.articles article.entry .meta a{text-decoration:none}.articles article.entry :last-child{margin-block-end:0}.articles article.entry:nth-child(2)::after{content:"";position:absolute;bottom:-10px;right:-10px;width:100px;height:100px;background:linear-gradient(300deg, var(--orange), black);border-radius:20px;z-index:-1}/*# sourceMappingURL=style.css.map */