/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/@layer objects{.o-portfolio-content-visibility{contain-intrinsic-size:3000px;content-visibility:auto}}@layer components{.c-screenshots{margin-inline-end:auto;margin-inline-start:auto;max-width:var(--max-width-2);width:90%}.c-screenshots,.c-screenshots__container{position:relative}.c-screenshots img{margin-block-end:var(--spacing-l-1);width:100%}.c-screenshots a,.c-screenshots p{color:var(--colour-grey-light)}.c-screenshots p{max-width:26rem}article+article{padding-block-start:var(--spacing-l)}.c-screenshots-multi-column-text{display:grid;gap:var(--spacing-l);grid-template-columns:1fr 1fr;width:70%}.c-screenshots-modules{display:grid;gap:var(--spacing-l-1);grid-template-columns:1fr 1fr 1fr;width:unset}.c-screenshots__text{padding-block-end:var(--spacing-l-1)}.c-screenshot-tags ul{padding-block-end:0;padding-block-start:var(--spacing-s-0);padding-inline-start:0}article:last-child .c-screenshots:last-child img:last-child{margin-block-end:0}.c-screenshots h2{text-transform:uppercase}.c-screenshot-tags{color:#fff}.c-screenshot-tags ul{display:inline-block;line-height:1;list-style:none}.c-screenshot-tags li{display:inline-block;font-size:.975em;line-height:.9;text-transform:uppercase}.c-screenshot-tags li:not(:first-child):before{content:"/ ";content:"/ "/""}@media (max-width:1219px){.c-screenshots__no-mobile{display:none!important}.c-screenshots__text{padding-inline:var(--spacing-s-0)}.c-screenshots__text:has(.c-screenshot-tags){text-align:center}.c-screenshots__text:has(.c-screenshot-tags) p{margin-inline:auto}article+article h2{padding-block-start:var(--spacing-l)}}@media (min-width:600px) and (max-width:1219px){.c-screenshots__text{padding-block-end:var(--spacing-l);text-align:center}.c-screenshots__text p{margin-inline:auto;max-width:34rem}.c-screenshots__text:has(h3) p{max-width:30rem}.c-screenshot-tags ul{margin-inline:auto;max-width:25rem}}@media (min-width:1024px){.c-screenshots img{box-shadow:0 20px 50px rgba(0,0,0,.8)}}@media (min-width:1220px){article+article{padding-block-start:var(--spacing-l-2)}.c-screenshots{display:grid;gap:var(--spacing-l-2);grid-template-areas:"content sidebar";grid-template-columns:75fr 25fr}.c-screenshots__sidebar{grid-area:sidebar}.c-screenshot-tags li{display:inline-block}.c-screenshots h2,.c-screenshots__text:not(:only-child) h3:first-child{padding-block-start:var(--spacing-l-4)}.c-screenshots__no-mobile+.c-screenshots__no-higher-mqs h3:first-child,.c-screenshots__no-mobile+h3{padding-block-start:0}.c-screenshots img{margin-block-end:var(--spacing-l-4)}article:last-child .c-screenshots:last-child img:last-child{margin-block-end:var(--spacing-l)}img.c-screenshots__compressed{margin-block-end:var(--spacing-l-2)}.c-screenshots--full:has(picture+.c-screenshots__text) img{margin-block-end:var(--spacing-l)}.c-screenshots--full:has(+.c-screenshots--full) img{margin-block-end:var(--spacing-l-2)}}@media (min-width:1220px) and (max-width:1419px){.c-screenshots__no-lower-mqs{display:none!important}.c-screenshots__no-lower-mqs-visible{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}}@media (min-width:1220px) and (max-width:1899px){.c-screenshots__no-medium-mqs{display:none!important}.c-screenshots__no-medium-mqs-visible{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}.c-screenshots--full .c-screenshots__text{padding-block-end:var(--spacing-l-3)}}@media (max-width:1899px){.c-screenshots-double-spread__higher-mqs{display:none}}@media (min-width:1900px){.c-screenshots{font-size:.77em}.c-screenshots:not(.c-screenshots--full){gap:var(--spacing-l);grid-template-columns:85fr 15fr;margin-block-end:var(--spacing-l)}.c-screenshots h2{padding-block-end:var(--spacing-m)}.c-screenshots img{margin-block-end:var(--spacing-l-3)}.c-screenshots-double-spread{display:grid;gap:var(--spacing-l);grid-template-columns:65fr 35fr}.c-screenshots-double-spread img{margin-block-end:var(--spacing-l)}.c-screenshots-double-spread__higher-mqs,.c-screenshots>.c-screenshots-double-spread>picture+div,.c-screenshots>.c-screenshots-double-spread>picture+picture{margin-block-start:var(--spacing-l-2)}.c-screenshots__push-down-higher-mqs{padding-block-start:var(--spacing-l-2)}.c-screenshots__no-higher-mqs{display:none!important}.c-screenshots__no-higher-mqs-visible{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}}}@layer modifiers{.c-screenshots--full *{grid-column:1/-1}.c-screenshots--full .c-screenshots__text p{max-width:var(--max-width-reading-long)}.c-screenshots--full .c-screenshots__text h3{padding-block-start:0!important}.c-screenshots--full:has(+.c-screenshots--full) img{margin-block-end:var(--spacing-m)}@media (min-width:1220px){.c-screenshots--mobile-main{grid-template-columns:25fr 75fr}.c-screenshots--full{grid-gap:initial;grid-template-columns:none}}@media (min-width:1900px){.c-screenshots--mobile-main:not(.c-screenshots--full){gap:var(--spacing-l);grid-template-columns:15fr 85fr}}}@layer components{:root{--colour-purple-light:#f5f2fc;--colour-purple-light-alpha:rgba(141,115,226,.09);--colour-purple-light-alpha-extra:rgba(141,115,226,.04)}.c-idx-background{background:var(--colour-purple-light)}.c-portrait{background:var(--colour-purple-light-alpha);overflow:hidden}}@layer modifiers{.c-portrait--episode{position:relative;width:calc(var(--portrait-width)*.29)}.c-portrait--episode img{--filter-episode:grayscale(100%) contrast(var(--filter-contrast,125%));filter:var(--filter-episode)}.c-portrait--episode .u-texture{opacity:.8}.c-portrait--episode-glitch{width:calc(var(--portrait-width)*.3)}}@layer components{:root{--glitch-width:100%;--glitch-height:100%;--gap-horizontal:10px;--gap-vertical:5px;--time-anim:3s;--delay-anim:1s;--blend-mode-1:none;--blend-mode-2:none;--blend-mode-3:none;--blend-mode-4:overlay;--blend-mode-5:overlay;--blend-color-1:transparent;--blend-color-2:transparent;--blend-color-3:transparent;--blend-color-4:var(--colour-purple);--blend-color-5:var(--colour-pink)}.c-glitch-animation{height:var(--glitch-height);left:0;overflow:hidden;top:0;width:var(--glitch-width)}.c-glitch-animation__img{--contrast-increase:10%;--filter-episode:grayscale(100%) contrast(calc(var(--filter-contrast, 125%) + var(--contrast-increase)));background-blend-mode:var(--blend-mode-1);background-color:var(--blend-color-1);background-position:50% 0;background-repeat:no-repeat;background-size:contain;filter:var(--filter-episode);height:calc(100% + var(--gap-vertical)*2);left:calc(var(--gap-horizontal)*-1);position:absolute;top:calc(var(--gap-vertical)*-1);transform:translateZ(0);width:calc(100% + var(--gap-horizontal)*2)}.c-glitch-animation__img:nth-child(n+2){animation-delay:var(--delay-anim);animation-duration:var(--time-anim);animation-iteration-count:20;animation-timing-function:linear;opacity:0}.c-glitch-animation__img:nth-child(2){animation-name:glitch-anim-1;background-blend-mode:var(--blend-mode-2);background-color:var(--blend-color-2)}.c-glitch-animation__img:nth-child(3){animation-name:glitch-anim-2;background-blend-mode:var(--blend-mode-3);background-color:var(--blend-color-3)}@keyframes glitch-anim-1{0%{clip-path:polygon(0 2%,100% 2%,100% 5%,0 5%);opacity:1;transform:translate3d(var(--gap-horizontal),0,0)}2%{clip-path:polygon(0 15%,100% 15%,100% 15%,0 15%)}4%{clip-path:polygon(0 10%,100% 10%,100% 20%,0 20%)}6%{clip-path:polygon(0 1%,100% 1%,100% 2%,0 2%)}8%{clip-path:polygon(0 33%,100% 33%,100% 33%,0 33%)}10%{clip-path:polygon(0 44%,100% 44%,100% 44%,0 44%)}12%{clip-path:polygon(0 50%,100% 50%,100% 20%,0 20%)}14%{clip-path:polygon(0 70%,100% 70%,100% 70%,0 70%)}16%{clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%)}18%{clip-path:polygon(0 50%,100% 50%,100% 55%,0 55%)}20%{clip-path:polygon(0 70%,100% 70%,100% 80%,0 80%)}21.9%{opacity:1;transform:translate3d(var(--gap-horizontal),0,0)}22%,to{clip-path:polygon(0 0,0 0,0 0,0 0);opacity:0;transform:translateZ(0)}}@keyframes glitch-anim-2{0%{clip-path:polygon(0 3%,100% 3%,100% 3%,0 3%);opacity:1;transform:translate3d(calc(var(--gap-horizontal)*-1),0,0)}5%{clip-path:polygon(0 5%,100% 5%,100% 20%,0 20%)}7%{clip-path:polygon(0 20%,100% 20%,100% 20%,0 20%)}9%{clip-path:polygon(0 40%,100% 40%,100% 40%,0 40%)}11%{clip-path:polygon(0 52%,100% 52%,100% 59%,0 59%)}13%{clip-path:polygon(0 60%,100% 60%,100% 60%,0 60%)}15%{clip-path:polygon(0 75%,100% 75%,100% 75%,0 75%)}17%{clip-path:polygon(0 65%,100% 65%,100% 40%,0 40%)}19%{clip-path:polygon(0 45%,100% 45%,100% 50%,0 50%)}20%{clip-path:polygon(0 14%,100% 14%,100% 33%,0 33%)}21.9%{opacity:1;transform:translate3d(calc(var(--gap-horizontal)*-1),0,0)}22%,to{clip-path:polygon(0 0,0 0,0 0,0 0);opacity:0;transform:translateZ(0)}}}@layer utilities{.u-texture{background-image:url(/img/portfolio/idx/distressed.jpg);background-repeat:no-repeat;background-size:cover;opacity:.8}}@layer components{.c-portrait img{margin-block-end:0}.c-idx-background{position:relative}@media (min-width:1900px){.c-portrait:before{background:var(--colour-purple-light-alpha-extra);content:"";height:90%;position:absolute;width:100%;z-index:1}}}@layer modifiers{.c-portrait--episode{--portrait-width:51%;position:absolute;top:23%;z-index:2}.c-portrait--episode img{box-shadow:none}.c-portrait--episode{padding-block-end:var(--spacing-m)}.c-portrait--mobile-container,.c-portrait--mobile-container-short{margin-inline-start:7%}@media (min-width:1024px){.c-portrait--episode{--portrait-width:55%;top:23%}.c-portrait--mobile-container,.c-portrait--mobile-container-short{--portrait-width:147%;top:20.5%}.c-portrait--mobile-container-short{top:7%}}@media (min-width:1900px){.c-portrait--episode{top:18em}.c-portrait--mobile-container,.c-portrait--mobile-container-short{--portrait-width:145%;top:11.5em}.c-portrait--mobile-container{padding-block-end:calc(var(--spacing-m) - 2%)}.c-portrait--mobile-container-thin{padding-block-end:calc(var(--spacing-m) - 5%)}.c-portrait--mobile-container-wide{top:13em}.c-portrait--mobile-container-thin{top:3em}}}