/* stylelint-disable selector-class-pattern */
/* stylelint-disable no-descending-specificity */
/* stylelint-disable selector-id-pattern */
/* stylelint-disable custom-property-pattern */
/* stylelint-disable comment-empty-line-before */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
/* @import url('reset.css'); */
@import url('animations.css');
@import url('utils.css');

:root {
    /* MEDIA BREAKPOINTS: 350px, 500px, 600px, 920px, 1100px */
    /* --1: #033138; */
    --font1: 'Manrope', sans-serif;
    --b1: 1px rgb(255 255 255 / 15%) solid;
    --teal: #46b9bc;
    --salmon: 250, 120, 101;
    --cream: #ECE1AE;

    /* Brand Colors: */
    --b: hsl(185deg 50% 39%);
    /* turquoise blue */
    --bRGB: 50, 141, 149;
    --db: hsl(185deg 100% 21%);
    /* darker turquoise blue */
    --dbRGB: 0, 97, 106;
    --g: hsl(38deg 66% 52%);
    /* gold */
    --gRGB: 213, 153, 50;
    --dg: hsl(155deg 43% 17%);
    /* dark green */
    --dgRGB: 25, 63, 47;
    --e: hsl(64deg 41% 85%);
    /* eggshell */
    --eRGB: 231, 233, 203;

    /* off white */
    --yt: hsl(64deg 63% 92%);
    --ytRGB: 245, 247, 220;

    /* Backgrounds */
    --scratches: url('/bg/scratches-bg.png');
    /* speckles for body */
    --irongrip: url('/bg/iron-grip.png');
    /* dots for header */

    --divider1: url('../divider1.jpg');
    /* cropped business card, for HR */
    --divider2: url('../divider2.jpg');
    /* cropped business card, for HR */

    --bc1: url('/bc.webp');
    /* OG business card with lettermark */
    --bc2: url('/bc2.webp');
    /* business card v2, smallish, textured */
    --bc4: url('/bc4.webp');
    /* business card v3, with rake brush, larger */

    /* Shadows */

    --big-shadow: #000 0px 0px 60px -10px;
    --lil-shadow: 1px 1px 8px -1px var(--shadow-color, rgb(0 0 0 / 30%));
    /* --shadow-color:rgb(0 0 0 / 40%); */
    --lil-in-shadow: 1px 1px 5px var(--shadow-color, rgb(0 0 0 / 40%)) inset;
    /* inner shadow for small caption boxes */
    --big-in-shadow: inset 0 0 85px -5px var(--shadow-color, rgb(0 0 0 / 90%));
    /* inner shadow for big box */

    /* Dimensions and whatnot */

    --header-height: 62px;
    /* semi-transparent border width */
    --side-padding: 0;
}

#polypane-helper-btn {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
    background-clip: padding-box;
    box-sizing: border-box;
}

html {
    overscroll-behavior: none;
    scroll-behavior: smooth;
    scroll-padding: var(--header-height) 0 0;
}

body {
    --header-height-vis: calc(var(--header-height) - 3px);
    font-family: var(--font1);
    /* overscroll-behavior: none; */
    scroll-behavior: smooth;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--e);
    font-family: var(--font1);
    font-weight: 300;
    /* scroll-behavior: smooth;
    overscroll-behavior: none; */
    background-image: var(--scratches);
    background-attachment: fixed;
    background-color: #111;
    /* position: relative; */
    font-size: 16px;
    overflow-x: hidden;
}

/* LINKS */

a {
    color: var(--b);
    font-weight: 500;
    text-decoration: none;
    /* transition: 0.3s all; */
}

a:active,
button:active {
    /* outline:2px solid var(--b); */
}

a:focus-visible,
button:focus-visible {
    outline: var(--db) 2px solid;
    bordeR: none;
}

button:focus-visible {
    outline-offset: -2px;
}

/* @media (prefers-reduced-motion: no-preference) { */

a,
a img,
figure::after,
button,
figure {
    transition: 0.3s all;
}


button {
    transition: 0.15s all;
}


@media (hover:hover) {
    a:hover {
        color: var(--g);
    }
}

body::after {
    inset: 0;
    width: 101vw;
    height: 101vh;
    position: fixed;
    background-image: var(--scratches);
    content: "";
    background-color: #000;
    z-index: 9999999;
    pointer-events: none;
    transition: 0.5s opacity;
    /* display:none; */
}

.worksPage::after {
    display: none;
}


.hide,
#loading.hide,
.hide-screen::after {
    display: none;
    /* content-visibility: hidden; */
    opacity: 0;
}


.sparkle {
    color: var(--g);
    display: inline-block;
    transition: 0.3s all;
}

/* SITE HEADER */

header {
    background-image: var(--irongrip);
    position: fixed;
    top: 0;
    height: var(--header-height);
    background-color: #000;
    box-shadow: rgb(0 0 0 / 20%) 0 3px 5px -1px;
    border-bottom: rgb(0 0 0 / 50%) solid 3px;
    border-top: #111 solid 7px;
    width: 100%;
    z-index: 50000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    will-change: top;
}

header h1:hover a img,
header .h1:hover a img {
    transform: rotate(-10deg) scale(0.98);
}

header h1 a,
header .h1 a {
    display: flex;
    place-items: center center;
    font-weight: 600;
}

header h1 a img,
header .h1 a img {
    height: calc(42px);
    margin-right: 10px;
    width: auto;
    /* transition: 0.3s all; */
}

header ul li a {
    font-weight: 700;
}

header h1,
header .h1 {
    /* font-size: 1.75rem; */
    text-transform: lowercase;
    padding: 0 1rem;
    color: var(--1);
    font-size: clamp(1.1rem, calc(0.6rem + 1.9vw), 1.75rem);
}

header h1 a,
header .h1 a {
    color: var(--yt);
}

/* TOP NAVIGATION */

nav {
    display: grid;
    grid-auto-flow: column;
    align-content: center;
    gap: 2rem;
    height: 100%;
}

nav ul,
nav li {
    display: contents;
}

nav input,
nav label {
    display: none;
}

nav li a {
    font-size: 1rem;
    display: flex;
    color: var(--cream);
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px;
    text-decoration: none;
    align-content: center;
    transition: color 0.3s, box-shadow 0.3s, opacity 0.3s;
    white-space: nowrap;
    margin: 0 5px 4px;
    /* line-height:2; */
}

.current {
    box-sizing: border-box;
    color: var(--g);
    box-shadow: 0 -3px 0 -1px var(--e) inset;
    font-weight: 900;
}

@media (hover:hover) {

    header .h1 a:hover,
    header h1 a:hover {
        color: var(--g);
    }

    nav a:hover {
        box-shadow: 0 -5px 0 -1px #fff inset;
        color: var(--g);
    }

    nav a.current:hover {
        text-decoration: none;
    }
}

/*      BODY ELEMENTS   */

.wrapper {
    margin: 0;
    padding-top: var(--header-height-vis);
    min-height: 100svh;
}

.errorPage .wrapper,
.aboutPage .wrapper,
.resumePage .wrapper {
    display: grid;
    grid-template-rows: 1fr auto;
}

img {
    max-width: 100%;
    height: auto;
}

p,
ul li,
ol li {
    line-height: 1.9;
    /* font-size:1.2em; */
    /* font-weight:300; */
}

.wrapper .work p {
    line-height: 2;
}

code {
    color: var(--g);
    font-size: 0.9em;
}

/*      CONTAINERS      */

.black-box {
    /* background-color:#0005; */
    /* backdrop-filter: blur(7px); */
    background-color: vaR(--blk6);
    /* padding:4rem 22vw; */
    box-shadow: var(--big-in-shadow);
    --shadow-color: #000;
    /* animation:fade-in;
    animation-timeline: view();
    animation-range:cover; */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@supports (backdrop-filter:blur(7px)) {
    .black-box {
        background-color: transparent;
        backdrop-filter: blur(7px);
    }
}

.no-padding {
    padding: 0 !important;
}

@supports (animation-timeline: view()) {

    .wrapper h1,
    .wrapper .h1,
    h2,
    .h2 {
        --start-color: var(--dg);
        color: var(--start-color);
        animation: to-color forwards;
        animation-timeline: view();
        animation-range: cover -10% cover 100%;
    }

    @media (prefers-reduced-motion: no-preference) {

        .black-box p,
        .black-box ol,
        .black-box ul {
            opacity: 0;
            animation: fade-in forwards;
            animation-timeline: view();
            animation-range: cover -30% cover 130%;
        }
    }
}

.black-box:has(.auto-grid) {
    padding: 1rem;
}

/* .black-box .auto-grid {
} */

.transp-box {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.transp-box h2 {
    text-align: center;
    margin: 0 auto;
}

.spicy-box {
    background-image: var(--bc4);
    padding: 3vw;
    /* height:50lvh; */
    margin: 2lh 0;
    box-shadow: var(--big-shadow)
}

.fill-screen {
    min-height: calc(100svh - var(--header-height-vis));
    width: 100vw;
}

.split-vertical {
    display: grid;
    height: calc(100svh - var(--header-height-vis));
    grid-template-rows: auto 1fr;
}

.split-vertical>* {
    margin: 0;
}

.fill-screen .spicy-box {
    margin: 0;
}

.place-center {
    display: grid;
    align-items: center;
}

.column-grid-equal {
    grid-template-rows: auto auto;
    display: grid;
}

.spicy-box blockquote,
blockquote {
    padding: 3lh 2em;
    min-width: 60%;
    width: auto;
    background-color: #0009;
    bordeR: none;
    outline: rgba(var(--eRGB), 0.7) 1px solid;
    outline-offset: -12px;
    box-shadow: 0px 0px 50px -20px var(--dg);
}

.work blockquote {
    outline-color: #111;
    outline-offset: -5px;
    border: none;
}


/*      HEADERS     */

.wrapper h1,
.wrapper .h1,
h2,
.h2 {
    font-size: clamp(2.2em, calc(1em + 6vw), 5em);
    font-size: clamp(2.125rem,
            calc(1.080rem + 5.227vw),
            5rem);
    margin: 0.75lh 0 0.5lh 0;
    line-height: 1;
    /* width:max-content; */
    /* max-width: 100%; */
    margin: 0.5lh auto;
    position: relative;
    color: var(--yt);
}



.wrapper h1,
.wrapper .h1 {
    padding: 0.5em 0 0.15em;
}


.subheader {
    /* text-align:right; */
    display: flex;
    font-size: 0.75em;
    margin-top: -0.1lh;
    font-weight: 100;
    /* text-transform:uppercase; */
    opacity: 0.7;
    overflow: clip;
    height: 1.5lh;
    position: relative;
}

.subheader span {
    display: inline-block;
    /* position:absolute;
    bottom:0; */
    /* bottom:10px; */
    animation-delay: 0.2s;
    animation: slide-in forwards 0.7s;
    line-height: 1.4em;
}


@media screen and (orientation: landscape) {

    .homePage .subheader span,
    .projectPage .subheader span {
        animation-delay: 0s;
        animation: slide-in forwards;
        animation-timeline: view();
        animation-range: cover -15% cover 60%;
    }
}

.subheader .sparkle,
h1 .sparkle,
.h1 .sparkle {
    font-size: 0.6em;
    position: relative;
    left: 0.2em;
    top: 0.4em;
}

h1 .sparkle,
.h1 .sparkle,
h2 .sparkle,
.h2 .sparkle {
    top: -0.2em;
}

.sparkle:empty::after {
    content: "\2726";
}


h2:first-child,
.h2:first-child {
    margin-top: 0;
}

.work h2 {
    text-align: left;
    font-size: 1.8em;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-left: 5px double vaR(--g);
    padding-left: 1em;
}


h3,
.h3,
.work .h3 {
    background-color: var(--db);
    border: none;
    border: 1px solid rgb(var(--ytRGB), 0.8);
    display: inline-block;
    margin: 3.2rem 2rem 3.4rem;
    padding: 10px 5rem;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 200;
    letter-spacing: 0.2em;
    box-shadow: 2px 2px 0 0 #111, var(--g) 3px 3px 0 0, #000 0px 0px 60px -10px;
    color: var(--yt);
    line-height: normal;
    /* text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3); */
}


/* h3:nth-of-type(odd), */
section:nth-of-type(odd) h3,
/* .h3:nth-of-type(odd), */
section:nth-of-type(odd) .h3 {
    background-color: var(--dg);
    box-shadow: 2px 2px 0 0 #111, var(--g) 3px 3px 0 0;
}

#services h3 {
    display: block;
    margin: 2rem 2rem 1rem;
    padding: 10px 1rem;
}

#skills h3 {
    display: block;
}

.skills h3 {
    background-color: transparent;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    box-shadow:
        /*0px 4px 6px -6px rgba(0,0,0, 0.3),*/
        0 -4px 6px -6px rgb(255 255 255 / 30%) inset;
    border-bottom: 1px solid rgb(0 0 0 / 10%)
}

h4 {
    color: var(--g);
    border-bottom: solid 1px rgb(var(--gRGB), 0.4);
    padding: 1rem;
    margin: 1rem 2rem 2rem;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: -0.02em;
}

.duo h4 {
    text-align: left;
    border-bottom: none;
    font-size: 1.2em;
    margin: 0;
    padding: 1em 3em;
    letter-spacing: 0.1em;
    color: #fff;
}

.duo h4::before {

    content: "\2726\00A0";
    color: Var(--g);
    /* font-size:0.8em; */
    transform: scale(0.8);
    display: inline-block;
}

.duo h4:first-child {

    margin-top: 0;
}

blockquote,
.notice {
    /* border:1px solid rgb(255 255 255 / 70%);
    border-width:0px 1px 1px 0px; */
    background-color: var(--db);
    /* background-image:var(--scratches); */
    font-size: 1em;
    letter-spacing: 0.03em;
    font-weight: 300;
    margin: 2lh auto;

    text-align: center;
    padding: 2em 3em;
    /* transform:skew(-11deg); */
    border: transparent 1px double;
    border: 4px double #111;
    background-clip: border-box;
    /* box-shadow: 0px 0px 0px 1px #000 inset; */
    box-shadow: var(--big-shadow);
    max-width: 80%;
    /* text-shadow:1px 1px 3px rgb(0 0 0 / 50%); */
    /* letter-spacing:1px; */
    position: relative;
    color: #eee;
}

.work blockquote:first-child {
    margin-top: 0;
}

blockquote.goal::before {
    content: "GOAL";
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    /* position:absolute;
    inset:0.5em auto auto auto; */
    margin: 0 auto;
    display: block;
    position: relative;
    top: -0.5em;
}


/* blockquote::before {
    content:"";
    width:100%;
    height:100%;
    display:block;
    background-color:VaR(--db);
    opacity:0.3;
    position:absolute;
    top:10px;
    left:10px;
    z-index:-10;
} */

blockquote b {
    color: #eee;
    font-weight: 800;
    font-size: 1.1em;
    /* font-size:1.2em; */
}

b,
strong {
    color: #fff;
    font-size: 0.95em;
}

b,
strong,
b a,
strong a {
    font-weight: 700;
}

i,
em {
    color: #fff;
    font-weight: 400;
}

mark {
    padding: 1px 2px 1px 5px;
    margin-right: 2px;
    font-size: 0.95em;
    color: #fff;
    font-weight: 500;
    display: inline-block;
    background-color: transparent;
    position: relative;
    /* white-space:pre-wrap; */
    line-height: 1.5;
    color: #000;
    z-index: 5;
}

mark::before {
    z-index: -5;
    background-color: rgba(var(--gRGB), 0.9);
    transform: skew(-11deg);
    content: "";
    width: 99%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: inline-block;
}

.prose {
    font-weight: 300;
    font-size: 1em;
}

.prose p,
p.prose {
    margin: 0.5em auto;
    margin: 0 auto;
    margin-bottom: 1em;
    /* line-height:1.6; */
}

.prose li {
    margin-bottom: 0.3em;
    padding-left: 10px;
}

.prose ol ::marker {
    font-weight: 500;
}

.work .prose p,
.work p.prose,
.work ol,
.work ul {
    padding: 0.5em 3em 0.5em;
}


.prose p:not(:first-child)

/* p:not(:first-child).prose  */
    {
    margin-top: 0;
}

.duo:has(.prose) figcaption {
    text-align: left;
}

.duo .prose {
    max-width: 700px;
    margin: 0 auto;
}


/*      Big Links on Home Page */

.big-links {
    display: flex;
    padding: 3rem 2rem;
    /* height:100%; */
    align-items: center;
    gap: 1em;
    /* margin: 2rem auto 0; */
    justify-content: center;
    max-width: 1300px;
    letter-spacing: 0.2em;
    font-size: 1em;
}

.big-links>* {
    /* flex: 1 1 auto; */
    flex-grow: 1;
    max-width: 50%;
    display: grid;
    place-items: stretch;
    text-align: center;
    background-color: rgb(var(--dgRGB), 0.7);
    border: rgb(var(--ytRGB), 0.9) solid 1px;
    box-shadow: 2px 2px 10px #000;
    box-shadow: 2px 2px 0 0 #111, var(--g) 3px 3px 0 0;
}

.big-links a {
    display: block;
    width: 100%;
    text-transform: uppercase;
    color: var(--yt);
    padding: 0.75rem 3vw;
    font-weight: 500;
    text-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
}

/* 
@media (width < 601px) {
    .big-links {
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(133px, 1fr));;
    }
} */

/* 
.big-links a:last-child {
    flex-grow:0.5;
} */

/*      GRID        */

.auto-grid {
    display: grid;
    grid-auto-flow: row;
    --grid-col-min: 350px;
    --grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min), 1fr));
    padding: calc(var(--grid-gap) / 2) var(--grid-gap) var(--grid-gap);
    padding: var(--grid-gap);
    gap: var(--grid-gap);
    justify-items: stretch;
}

.works-list {
    --grid-col-min: 350px;
    --grid-gap: 20px;
}

.worksPage .auto-grid {
    --grid-col-min: 350px;
    --grid-gap: 1px;
    padding: 1px 0 0 0;
}

.worksPage figcaption {
    padding: 5px 18px;
    /* font-size:0.85em; */
    text-shadow: 0px 0px 2px #000b;
    color: #fff;
}



/*      GRID ITEM "pile"    */

.pile {
    display: grid;
    grid-template-areas: "pile";
}

.pile>* {
    grid-area: pile;
}

.pile img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.pile figcaption {
    pointer-events: none;
}


.avatar {
    margin: 0 var(--side-padding);
    max-width: 400px;
    height: auto;
    outline: 1.5px solid #111;
    outline-offset: -1em;
}


/* FEATURE GRID ON HOME PAGE */


.feature-grid {
    --grid-gap: 2px;
    --grid-col-min: 350px;
    padding: 0;
    /* background-color:rgb(255 255 255 / 5%); */
    grid-auto-flow: dense;
}

.feature-grid .pile,
.worksPage .pile {
    max-height: 75vh;
    overflow: clip;
}

.feature-grid .pile {
    /* background-color:#0002; */
}

.feature-grid .pile img {
    opacity: 0.9;
}

.feature-grid .pile:last-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
}

.feature-grid .pile:last-child a {
    display: grid;
    place-items: end;
}

.feature-grid .pile:last-child img {
    object-fit: contain;
    height: 100%;
    max-height: 40vh;
    transform-origin: bottom right;
    width: auto;
}

.feature-grid .pile:last-child figcaption,
.feature-grid .pile:last-child:hover figcaption {
    color: #000;
    text-shadow: none;
    background-color: var(--e);
    opacity: 0.8;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 3px;
    padding: 0.5em 1.6em 0.6em 2em;
    place-self: start center;
    margin: 2em auto;
    outline: var(--e) solid 1px;
    outline-offset: 2px;
    border: none;
}

@media (hover:hover) {

    .feature-grid .pile:last-child:hover figcaption {
        opacity: 1;
        background-color: var(--yt);
        outline: var(--g) 1px solid;
        outline-offset: 5px;
    }

    .big-links a:hover {
        background-color: rgb(var(--gRGB), 0.7);
        /* background-color:rgba(var(--gRGB), 0.5); */
        color: #fff;
        /* transform: skew(-5deg); */
    }

    @media (prefers-reduced-motion: no-preference) {

        body {
            --hover-scale: scale(1.02);
        }

        .worksPage .pile:hover img,
        aside .pile:hover img {
            transform: var(--hover-scale);
        }


        .feature-grid .pile:hover .sparkle {
            transform: scale(0.7);
        }

        .feature-grid .pile:hover sup.sparkle {
            transform: scale(1.3);
        }

        .feature-grid .pile:hover a img {
            transform: var(--hover-scale);
            opacity: 1;
        }

        .feature-grid .pile:last-child:hover figcaption {
            --hover-scale: scale(1.05);
            transform: var(--hover-scale);
        }
    }

    /* REDUCED MOTION TRUE!!!! */

    @media (prefers-reduced-motion: reduce) {

        .worksPage .pile:hover img,
        aside .pile:hover img {
            border-image: fill 0 linear-gradient(#0003, #000);

        }

        .feature-grid .pile:hover a img {
            transform: var(--hover-scale);
            border-image: fill 0 linear-gradient(#0003, #000);
            opacity: 1;
        }

    }

    /* .feature-grid .pile::after {
        content: "";
        display: block;
        background-color: rgb(0 0 0 / 60%);
        opacity: 15%;
        backdrop-filter: contrast(110%);
        grid-area: pile;
        pointer-events: none;
    }

    .feature-grid>.pile:hover::after {
        opacity: 0;
        background-color: transparent;
        backdrop-filteR: none;
    } */

}

@media (width > 700px) {
    .feature-grid .pile:nth-of-type(3) {
        grid-column: span 2;
        grid-row: span 2;
        max-height: none;
    }

    .feature-grid .pile:nth-of-type(3)::after {
        background-color: rgb(0 0 0 / 10%);
    }
}

.feature-grid .pile a {
    display: block;
    width: 100%;
    height: 100%;
}

.pile figcaption {
    box-shadow: var(--lil-shadow);
    place-self: start start;
    /* pointer-events: none; */
    backdrop-filter: blur(7px);
    background-color: rgb(0 0 0 / 55%);
    /* border:5px rgb(0 0 0 / 70%) solid; */
    border: 1px solid transparent;
    border: var(--b1);
    color: var(--e);
    padding: 9px 14px;
    /* opacity: 0.8; */
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000c;
    letter-spacing: 1px;
    transition: 0.3s all;
    margin: 10px;
    z-index: 10;
    background-clip: padding-box;
}


.pile:hover figcaption,
.feature-grid .pile:nth-of-type(3) figcaption {
    border: var(--b1);
    border-color: var(--yt4);
    color: #fff;
    /* background-color: rgb(0 0 0 / 65%); */
    opacity: 1;
}

.feature-grid .pile:not(:hover):nth-of-type(3) figcaption {
    background-color: rgb(0 0 0 / 55%);
}

img.splash {
    max-height: 40vh;
    max-height: 60lvh;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    width: 100%;
    box-shadow: var(--big-shadow);
}

img.strip {
    max-height: 4rem;
    object-fit: cover;
    width: 100%;
    display: block;
    height: auto;
}

.welcome {
    display: block;
    margin: 0;
}

.work-splash {
    background-color: var(--blk6);
    max-height: calc(100vh - 60px);
    box-shadow: var(--big-in-shadow);
    padding-top: 0px;
    margin: 0;
}

@supports (backdrop-filter:blur(7px)) {
    .work-splash {
        background-color: transparent;
        backdrop-filter: blur(7px);
    }
}



.work-splash video,
.work-splash img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    object-fit: contain;
}

/*      LISTS AND STUFF         */

.prose ul {
    padding: 0 0 0 1em;
    list-style-type: "\2726";
    font-weight: 400;
}

.prose ul li::marker {
    display: inline-block;
    font-size: 0.8em;
    color: vaR(--g);
    content: "\2726\00A0\00A0";
    padding-right: 10px;
    width: 2em;
}

.prose ol li::marker {
    color: var(--g);
    padding-right: 5px;
    display: inline-block;
}

/*      Contact Form | Inputs | Form elements       */

form {
    display: flex;
    flex-flow: column nowrap;
    gap: 1em;
    padding: 2em 0;
    margin-bottom: 4em;
}

form *+label {
    margin-top: 10px;
}

form input,
form textarea,
form button,
form input:autofill {
    font-family: inherit;
    font-size: 0.9rem;
    display: block;
    border: none;
    background-color: #333;
    border-radius: 4px;
    padding: 10px 20px;
    flex: 1 1 100%;
    color: var(--yt);
}


form input:-internal-autofill-selected {
    background: #555 !important;
}

form textarea {
    min-height: 10lh;
}

form button {
    max-width: 80%;
    /* margin:1em auto; */
    text-shadow: 1px 1px 3px rgb(0 0 0 / 30%);
    flex: 1 1 auto;
}

form label {
    padding: 0 1em;
    font-size: 1.1em;
}

form input:focus-visible,
form input:focus,
form textarea:focus-visible,
form textarea:focus {
    background-clip: border-box;
    outline: 1px solid var(--dg);
    outline-offset: 3px;
    /* border: 4px double #000; */
    background-color: rgb(var(--dgRGB), 1);
}

button {
    flex: 0 1 auto;
    margin: 0 auto;
}

@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 45deg;
}

#contact button,
.cta {
    margin-top: 2em;
    color: var(--yt);
    padding: 1lh 2em;
    width: 200px;
    background-image: var(--bc2);
    background-size: cover;
    /* background-color:var(--db); */
    background-position: center center;
    font-size: 0.9em;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 50px;
    /* border-radius:0; */
    font-weight: 800;
    box-sizing: border-box;
    --angle: 45deg;
    outline: 3px solid transparent;
    bordeR: none;
    outline: 1px solid #111;
    outline-offset: -3px;
}

#contact button:hover,
#contact button:focus-visible {
    color: #fff;
    --angle: 270deg;
    filter: brightness(1.2);
    outline-offset: -6px;
    cursor: pointer;
    background-color: VaR(--g);
    /* box-shadow:vaR(--big-shadow); */
}

label {
    display: block;
}

hr {
    background-image: var(--bc4);
    background-size: cover;
    width: 100%;
    border: rgba(255, 255, 255, 0.05) solid 1px;
    border-width: 0 0 1px 0;
    background-clip: border-box;
    height: 60px;
    opacity: 1;
    /* margin:-3px 0; */
    box-shadow: var(--lil-shadow);
    /* , 0 -4px 0 -2px #000 inset; */
    /* display:grid;
    grid-template-areas: "pile";
    position:relative;
    z-index:-1; */
    overflow: visible;
}

article>*:last-child .black-box::after {
    content: "";
    display: block;
    height: 8vh;
    height: 8em;
    box-shadow: none;
    border: none;
}


/* BACK TO TOP BUTTON */


.b2t {
    text-align: center;
    opacitY: 0.8;
    width: 100%;
    position: absolute;
    text-transform: uppercase;
    bottom: calc(100% + 2rem);
    z-index: 112;
}

.b2t a {
    color: VaR(--yt);
    padding: 10px 20px;
    outline-offset: -3px;
    outline: 1px solid #111;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    background-color: var(--db);

    &:hover {
        background-color: VaR(--g);
        color: #111;
    }
}


#related {
    /* padding:2em 0 0;  */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    padding: 1.3em 1em;
    background-color: rgb(0, 0, 0, 0.5);
    content-visibility: auto;
    contain-intrinsic-height: 50svh;
}

.related-projects {
    position: relative;
    background-size: cover;
    background-image: var(--bc2);
    --shadow-color: var(--dg);
}

.related-projects h2 {
    margin: 0 auto;
    /* color:#111; */
    color: var(--e);
    font-size: 2.8em;
    font-weight: 200;
    letter-spacing: 0.15em;
    padding: 0;
    background-size: cover;
    animation: none;
    text-transform: uppercase;
}

.related-projects h2 a {
    display: block;
    color: inherit;
    font: inherit;
    padding: 1.5lh 10px;

    &:hover {
        color: #fff;
        backdrop-filter: brightness(1.2);
    }
}


.related-projects .sparkle {
    color: var(--yt);
    display: inline-block;
    font-size: 0.6em;
    position: relative;
    top: -0.2lh;

}

#related figure {
    overflow: clip;
}

#related figure img {
    max-height: 45vh;
    display: block;
    box-shadow: var(--lil-shadow);
}

/* 
hr::after {
    /* background:#0004; */
/* box-shadow: 0 4px 4px -4px rgb(0 0 0 / 50%) inset, 0 -4px 4px -4px rgb(255 255 255 / 20%) inset; */
/* grid-area: pile;
    content:"";
    backdrop-filter:blur(20px);
    opacity:0.8;
}  */

.delim {
    padding: 0 3px;
}

/*      FOOTER      */

footer {
    color: #eee9;
    font-size: 0.9em;
    padding: 1rem;
    line-height: 1.7;
    text-align: center;
    /* border-top: transparent 1px solid; */
    background-color: #000;
    background-image: var(--irongrip);
    box-shadow: 0 -4px 4px -4px rgb(0 0 0 / 50%) inset, 0 4px 4px -4px rgb(255 255 255 / 20%) inset;
    z-index: 5;
    position: relative;
}

footer .copy {
    color: var(--e);
}

.disclaimer {
    opacity: 0.6;
}

.italic {
    font-style: italic;
}

.work {
    text-align: center;
}

.text-center p,
.prose.text-center {
    text-align: center;
}

.work img:not(.strip) {
    max-height: calc(100vh - 70px);
    max-height: calc(100lvh - 60px);
    width: auto;
    max-width: 100%;
}

.prose,
dl,
ol,
ul {
    text-align: left;
}


div.sidebar-left {
    gap: 1lh;
    display: grid;
    grid-template-columns: 1fr 2fr;
}



div.sidebar-right {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.tldr dd span {
    display: block;
    /* flex:1 1 400px; */
}

.trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}

.trio img {
    max-width: 33%;
    height: auto;
}

.trio .prose {
    /* flex:2 1 auto; */
}

dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    min-width: 300px;
}

.tldr {
    container: tldr / inline-size;
}

.tldr dl {
    background-image: var(--scratches);
    box-shadow: inset #111 0px 0px 200px 20px, var(--big-shadow);
    background-color: #111;
    margin: 0 2rem;
    padding: 1em;
    font-size: 0.9em;
    gap: 10px 0;
    border: #333 solid 1px;
}

.work dl ul li,
.work dl ul {
    margin: 0;
    padding: 0;
}


.tldr dl ul {
    margin-left: 0.75em;
}


@container tldr (max-width:500px) {

    .tldr dl {
        margin: 0 1.4rem;
        padding: 10px;
        grid-gap: 10px 0;
    }

}


dt:not(:last-of-type),
dd:not(:last-of-type) {
    border-bottom: #333 solid 1px;
}

dt,
dd {
    padding: 5px 5px 15px 5px;
}

dt {
    color: var(--b);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

dd {
    /* font-size:0.9em; */
    line-height: 1.6;
}

.wrapper .work ul li {
    list-style-type: none;
    list-style-type: "\2726";
    padding-left: 0.5em;
    margin-left: -3px;
}



.wrapper .work dl ul li::marker {
    color: var(--g);
    color: rgba(var(--gRGB), 0.8);
    font-size: 0.7em;
    content: "\2726\00A0\00A0\00A0"
}

.tags {
    /* font-size:0; */
    background: #111;
    padding: 0.5em var(--side-padding);
    font-size: 1.2em;
}

.tags span {
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 0.2em;
}

.tags span:not(:last-child)::after {
    content: "\2726";
    color: var(--g);
    font-weight: 500;
    font-size: 0.8em;
    position: relative;
    top: -1px;
    padding: 0 0.5em;
    display: inline-block;
}

button:hover {
    cursor: pointer;
    color: var(--g);
}

search {
    border: 1px solid #333;
    border-width: 1px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    background-color: #111;
    width: 100%;
    gap: 1px;
    background-color: #333;
    margin-bottom: -2px;
}

search button {
    all: unset;
    background-color: #111;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    flex: 1 1 auto;
    text-align: center;
    padding: 1.4em 0.5em 1.7em;
    transition: 0.2s all;
}

search button.active {
    background-color: vaR(--db);
    color: #fff;
    /* background-image:url("../divider1.jpg"); */
    background-size: cover;
    ;
    /* background-position:center center; */
}

search *+button {
    /* border-left:1px solid #333; */
}

.duo {
    --gap: 1em;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: var(--gap);
    /* align-items: center; */
}

.duo img {
    max-width: 100%;
    height: auto;
    max-height: 95vh;
    width: auto;
    object-fit: contain;
}

.work figure {
    display: grid;
    align-items: start;
    grid-template-rows: min-content auto;
    gap: 10px;
}

.work figure:has(>*:only-child) {
    grid-template-rows: min-content;
}

.work *:not(.duo, .duo-equal, .trio)>figure:not(:first-of-type) {
    padding-top: 2em;
}

.work figcaption {
    order: -1;
    border-bottom: #333 solid 1px;
    padding: 5px 10px;
    font-style: italic;
    letter-spacing: 0.03em;
    font-weight: 200;
    /* text-align:left; */
    color: var(--yt);
}

.work figure img {
    margin: 0 auto;
}

.work .black-box:has(figure),
.black-box:has(.prose:first-child) {
    padding: 2em 0;
}

.duo-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.even-col {
    display: flex;
}

.even-col>* {
    flex-basis: 100%;
}

*:has(>.window) {
    --grid-gap: 1em 2em;
}

.window {
    padding: 2em 0;
}

.window figure {
    scrollbar-gutter: stable;
    max-height: calc(80svh - var(--header-height-vis));
    max-width: 350px;
    overflow-y: scroll;
    outline: 12px solid rgba(var(--bRGB), 0.1);
    /* outline-offset:1em; */
    scrollbar-color: var(--db) #111;
    scrollbar-width: thin;
    place-self: center;
    gap: 0;
    margin: 1em 2em;
}

.window figcaption {
    position: sticky;
    bordeR: none;
    top: 0;
    background-color: vaR(--blk8);
}

.window figcaption::after {
    display: block;
    font-style: normal;
    font-size: 0.5em;
    letter-spacing: 5px;
    content: "SCROLL";
    padding-top: 5px;
    opacity: 50%;
}

.work .window img {
    width: 100%;
    padding-right: 10px;
    max-height: none;
    background-color: #000;
    height: auto;
    display: block;
}

.h-captcha {
    margin: 1em auto;
    outline: 0;
}

.h-captcha iframe {
    bordeR: none;
    outline: 3px #333 solid;
    outline-offset: -2px;
}

.h-captcha iframe:hover {
    outline-color: #222;
}

@media screen and (width <=1100px) {

    .prose,
    .prose p,
    p.prose,
    .work .prose p,
    .prose ul,
    .prose ol {
        font-size: 1em;
    }



    .big-links {
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
    }

    .big-links a {
        padding: 1em;
        font-size: 0.8em;
    }

    header h1,
    header .h1 {
        /* overflow: hidden; */
        white-space: nowrap;
        padding: 0;
    }
}

@media screen and (width < 920px) {
    body {
        --side-padding: 2rem;
        --header-height: 3rem;
        /* --header-height-vis:calc(var(--header-height) - 3px); */
    }

    /* .wrapper {
        padding-top: var(--header-height-vis);
    } */

    .subheader {
        height: 1.7lh;
    }

    blockquote {
        font-size: 1em;
        padding: 2em var(--side-padding);
    }

    .tags {
        font-size: 0.9em;
        padding: 10px var(--side-padding);
    }

    .duo,
    .duo-equal,
    div.sidebar-left {
        grid-template-columns: auto;
        grid-gap: 2em;
    }

    .work .black-box {
        padding: 2em 0;
    }

    /* .work h2 {
        margin-left:2rem;
    } */

    h3,
    .h3,
    .work .h3,
    .work h3 {
        padding: 10px 1.5rem;
        margin: 2rem 1rem;
    }

    header {
        height: var(--header-height);
        width: 100vw;
        padding: 0 10px;
    }

    header h1 a img,
    header .h1 a img {
        height: calc(var(--header-height) - 20px);
        margin: auto 10px auto 0;
    }

    nav {
        position: relative;
        align-content: center;
    }

    nav label {
        display: block;
    }

    nav label::after {
        content: ".";
        color: transparent;
        display: block;
        background-image: url('/menu.svg');
        background-size: 1.6rem auto;
        background-repeat: no-repeat;
        background-position: center center;
        width: 2.5rem;
        height: 100%;
        transition: all 0.6s;
    }

    input:checked~label::after {
        background-image: url('/close.svg');
        background-size: 2.1rem auto;
        transform: rotate(-270deg);
    }

    #close {
        opacity: 0.8;
    }

    nav ul {
        box-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        position: absolute;
        top: 100%;
        right: -10px;
        display: flex;
        flex-flow: column nowrap;
        min-width: 220px;
        transition: max-height 0.5s, opacity 0.6s, background-color 0.5s;
    }

    #hamburger:checked~ul {
        display: block;
        height: auto;
        max-height: 4840px;
        opacity: 1;
        background-color: rgb(0 0 0 / 90%);
    }

    nav li {
        display: block;
        opacity: 0;
        padding: 0;
        transition: 0.6s all;
        transition-delay: 0.3s;
    }


    nav li a {
        font-size: 1.1rem;
        margin: 0;
        padding: 1rem 1.5rem;
    }

    nav input:checked~ul li {
        transition-delay: 0s;
        opacity: 1;
    }

    div.prose,
    section.prose,
    .wrapper h1.transp-box {
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
    }

    .prose ul,
    .prose ol,
    .prose p,
    .work .prose p {
        padding: 10px 0 10px;
    }

    .avatar {
        max-width: 300px;
        margin: -1rem auto 0;
        display: block;
        outline-offset: -1rem;
    }

    footer {
        font-size: 0.75em;
        line-height: 1.7;
        text-align: left;
    }

    span.copy {
        opacity: 0.7;
    }

    .duo,
    #related,
    .trio {
        grid-template-columns: 1fr;
    }


    .related-projects h2 {
        font-size: 2rem;
        font-weight: 300;
    }

    .wrapper h1,
    .wrapper .h1 {
        padding: 1.3rem;
        /* font-size:clamp(1.4rem, 1.8rem + 2vw, 3rem); */
    }

    h1 .subheader,
    .h1 .subheader {
        height: auto;
    }



    /* MIN WIDTH MEDIA QUERY */
    @media screen and (width < 600px) {



        .big-links {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }


        .big-links>* {
            /* max-width:250px; */
        }


        form input,
        form textarea,
        form input:autofill,
        form input:focus,
        form input:focus-visible,
        form textarea:focus,
        form textarea:focus-visible {
            border-radius: 0;
            border-width: 4px 0;
        }


        blockquote {
            margin: 1em 0;
            width: auto;
            max-width: none;
            padding: 1.5em 1em;
        }

    }

}

/* 500px OR LESS */
@media screen and (width < 500px) {

    body {
        font-size: 16px;
        --side-padding: 1.4rem;
    }

    .auto-grid {
        padding: 0;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    div.prose,
    section.prose {
        /* padding:0 var(--side-padding); */
    }


    .black-box:has(.prose:first-child) {
        padding: 1em 0;
    }

    .work h2 {
        margin-left: 0rem;
    }

    .prose ul,
    .prose ol,
    .prose p,
    .work .prose p,
    blockquote {
        line-height: 1.8;
    }

    blockquote,
    blockquote::before {
        font-size: 0.9em;

    }

    .prose ul,
    .prose ol {
        padding: 10px 1em;
    }

    .subheader {
        height: 2.1lh;
        font-size: 0.6em;
        line-height: 1.2;
    }

    .subheader span {
        line-height: 1.7;
    }

    dd {
        font-size: 0.9em;
    }


    .big-links>* {
        max-width: 370px;
    }

    .wrapper h1,
    .wrapper .h1,
    h2,
    .h2 {
        color: var(--yt);
    }


    search button {
        font-size: 0.75em;
        letter-spacing: 0.02em;
        padding: 10px 5px;
    }
}

/* 300px OR LESS */
@media (width < 349px) {
    html {
        overscroll-behavior: auto;
    }

    .auto-grid {
        grid-template-columns: 1fr;
    }

    header h1 a span,
    .h1 a span {
        display: none;
    }

    header h1 a::after,
    header .h1 a::after {
        content: ".com"
    }
}

/* GIANT SCREENS */

@media screen and (min-width:1749px) {

    /* .feature-grid .pile:nth-child(3) {
        grid-row:span 1;
        grid-column: span 1;
    } */

    .feature-grid {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }

    .feature-grid .pile:last-child {
        grid-row: span auto;
    }

    .feature-grid .pile:last-child figcaption,
    .feature-grid .pile:last-child:hover figcaption {
        place-self: center;

    }
}