@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

#main *s  {  outline: 1px dotted black ; outline-offset: -1px ; }
*  { box-sizing: border-box ; font-optical-sizing: auto ;}

:root  {
	interpolate-size: allow-keywords;

	--gap: 	 1rem ; 
	--gap_m: -1rem ; 
	--gap-d: calc(var(--gap) * 2 ) ; 
	--gap-h: calc(var(--gap) / 2 ) ; 
	--gap-q: calc(var(--gap) / 4 ) ; 
	--gap-3q: calc((var(--gap) / 4) * 3 ) ; 

	--big: 		calc(var(--gap) * 6 ) ; 
	--big-h:	calc(var(--gap) * 12 ) ; 
	--width: 	1200px ;

	--bkg:	 		#f6f6f6 ;
	--txt:	 		#191919 ;
	--1st:			#F1D302 ;
	--2nd:			#00a7e1 ;
	--3rd:			#ee6055 ;

	--shd: 			linear-gradient(180deg,rgb(from var(--txt) r g b / 0.125) 0%, rgb(from var(--txt) r g b / 0) 100%) ;

	--bdy:			"Source Serif 4", serif;
	--bdy-w:		400;

	--hdr:			"Source Code Pro", monospace;
	--hdr-w:		400;

	--h1: 			2.369rem ;
	--h2: 			1.777rem ;
	--h3: 			1.333rem  ;

	--h1: 			2.827rem ;
	--h2: 			1.999rem;
	--h3: 			1.414rem  ;

	--h1: 			3.375rem ;
	--h2: 			2rem;
	--h3: 			1.5rem  ;
	
	--h1: 			clamp(2rem,  calc( 7.5dvw + 0.5rem),3.375rem );
	--h2: 			clamp(1.5rem,calc( 5dvw   + 0.5rem),2rem);
	--h3: 			clamp(1rem,  calc( 2.5dvw + 0.5rem),1.5rem)  ;
	--p: 			1.125em  ;


}


html  { scroll-behavior: smooth; }
body  { margin: 0 ; padding: 0 ; background: var(--bkg) ; color: var(--txt) ; font-size: var(--p) ; font-family: var(--bdy) ; font-weight: var(--bdy-w) ; line-height: 150% ; }

#cnt  { display: grid ; place-content: start ; place-items: center ;  grid-template: "head" min-content "menu" min-content "mast" min-content "main" min-content "more" min-content "foot" min-content / 100% ; grid-gap: 0 ; min-height: 100dvh ; min-width: 320px ;  }

#head  { grid-area: head ; }
#menu  { grid-area: menu ; }
#mast  { grid-area: mast ; }
#main  { grid-area: main ; }
#more  { grid-area: more ; }
#foot  { grid-area: foot ; }

:is(#head,#menu,#mast,#main,#more,#foot)  { 
	width: 100% ; display: flex ; flex-flow: column nowrap ; place-content: center ; place-items: center ;   
	.ins  { width: 100% ; max-width: 1200px ; display: block ; padding-inline: min(5dvw,var(--gap)) ; }
}

#head  { 
	background-image: var(--shd) ; background-size: 100% var(--gap-q) ; background-repeat: repeat-x ; background-color: rgb(from var(--txt) r g b / 0.05) ; color: var(--txt) ; text-align: center ; 
	.ins { display: grid ; grid-template: "flag h1 cv" auto "flag h2 cv" auto / var(--big) auto auto ; padding-block: var(--gap) ; gap: var(--gap-q) ;  }
	h1  { grid-area: h1 ; font-size: var(--h2) ; font-weight: 800 ; line-height: 100% ; margin: 0 ; padding: 0 ; text-align: left ; place-content: end ; }
	h2  { grid-area: h2 ; font-size: var(--h3) ; font-weight: 800 ; line-height: 100% ; margin: 0 ; padding: 0 ; text-align: left ; place-content: start; }
	ul  { grid-area: cv ; margin: 0 ; gap: var(--gap-h) ; display: flex ; place-items: end ; place-content: end; }
	.flag  { grid-area: flag ; display: flex ; aspect-ratio: 1 / 1 ;  margin-inline-end: var(--gap) ; box-sizing: content-box ; background-color: var(--bkg) ; }
	.flag img  { inline-size: 100% ; outline: 1px solid rgb(from var(--txt) r g b / 0.5 ) ; outline-offset: -1px ; display: block ;  }
	h1 a , 
	h2 > span , 
	ul li { 
		display: inline-block ; padding: 0; margin: 0 ; 
	}
	h1 a { 
		color: var(--txt) ; text-decoration: none ; cursor: pointer ; 
		&:hover {  text-decoration: underline ;  }
	}
	ul  { padding-block: 0 ; }

	ul li a {
		background-color: var(--bkg) ; padding-inline: var(--gap-h) ; 
		&:hover  { background-color: var(--1st) ;  }
		span  { display: flex ; flex-flow: column nowrap ;  gap: var(--gap-h) ; padding: 0 var(--gap-q) ; background: rgb(from var(--txt) r g b / 0.05) ; background-color: rgb(from var(--3rd) r g b / 10.5) ; color: var(--bkg) ; border-radius: var(--gap-q) ; inline-size: 2.75rem ; }
	}
}
@media screen and (width < 640px) {
	#head .ins { display: grid ; grid-template: "flag cv" auto "h1 h1" auto "h2 h2" auto / var(--big) auto  ; padding-block: var(--gap) ; gap: var(--gap-q) ;  }
}
#menu  { 
	background-image: var(--shd) ; background-size: 100% var(--gap-q) ; background-repeat: repeat-x ; background-color: var(--1st) ; color: var(--txt) ; 
	padding: 0 ; 
	.options--row { padding-inline-start: var(--big) ; }
	ul li.home  { display: none ; }
}
@media screen and (width < 480px) {
	#menu .options--row  { font-size: 1rem }
}
@media screen and (width < 640px) {
	#menu .options--row  { padding-inline-start: 0 ;  }
}
#mast  { 
	background-image: var(--shd) ; background-size: 100% var(--gap-q) ; background-repeat: repeat-x ; background-color: rgb(from var(--txt) r g b / 0.05) ; color: var(--txt) ; 
	blockquote  { position: relative ; font-size: var(--h1) ; line-height: 100% ; padding: var(--gap-d) ; padding-inline-start: var(--big) ; margin: 0 ; max-inline-size: 990px ; font-weight: 800;  text-shadow: -0.125rem -0.125rem rgb(from var(--bkg) r g b / 0.05 ) , 0.125rem 0.125rem rgb(from var(--bkg) r g b / 0.125 ) ; }
	blockquote::before  { position: absolute ; top: 1.5rem ; left: 0rem ; font-size: 7rem; content: "\201F" ; font-family: 'Times New Roman', Times, serif ; font-weight: 800; inline-size: calc( var(--big) - var(--gap) ) ; block-size: calc( var(--big) - var(--gap) ) ; line-height: 100% ; text-indent: 0.75rem ; outline: 1px solid rgb(from var(--txt) r g b / 0.125 ) ; outline-offset: -1px ; background-color: rgb(from var(--txt) r g b / 0.125 ) ;}
	blockquote span { font-size: 1rem ; line-height: 150% ; padding-block-start: 1rem ; }
	blockquote em { font-style: normal ; text-shadow: -0.125rem -0.125rem rgb(from var(--bkg) r g b / 0.125 ) , 0.125rem 0.125rem rgb(from var(--bkg) r g b / 0.25 ) ; }
}
.case-studies #mast {
	blockquote::before  { font-size: 5rem ; font-weight: 800 ; content: "+" ; text-indent: 1rem ;  }
}
@media screen and (width < 640px) {
	#mast  { 
		blockquote  { padding: var(--gap) 0 ; padding-inline-start: 0 ;  }
		blockquote::before  { position: static ; display: block ; margin-block-end: var(--gap) ; }
	}
}


#main  { 
	background-image: var(--shd) ; background-size: 100% var(--gap-q) ; background-repeat: repeat-x ; background-color: var(--bkg) ; color: var(--txt) ; 
	.ins .cnt   { 
		--img: calc(var(--big) * 3) ; 
		display: grid ; grid-template: " icon article . imgs--primary " auto " icon article . imgs--secondary " 1fr / calc( var(--big) - var(--gap) ) auto 0 var(--img) ; gap: var(--gap) ; position: relative ; padding-block: var(--gap-d) ;
		&::before  { grid-area: icon; font-size: 4rem; content: "..." ; font-family: 'Times New Roman', Times, serif ; font-weight: 800; inline-size: calc( var(--big) - var(--gap) ) ; block-size: calc( var(--big) - var(--gap) ) ; line-height: 100% ; text-indent: 1rem ; outline: 1px solid rgb(from var(--txt) r g b / 0.125 ) ; outline-offset: -1px ; background-color: rgb(from var(--txt) r g b / 0.125 ) ;}
		.article  { 
			grid-area: article ; 

			#control--portfolio ,
			#control--process ,
			#control--process--lower { 
				display: flex ; flex-flow: row wrap ; gap: var(--gap-h) ; place-content: start ; padding: var(--gap) 0 ; margin: 0 ; 
				li  { display: block ; padding: 0 ; margin: 0 ; }
				li.cv  { display: none ; } 
				li a { 
					display: inline-block ; padding: var(--gap-h) var(--gap) ; margin: 0 ; color: var(--txt) ; font-weight: 600 ; 
					color: rgb(from var(--txt) r g b / 0.875) ; 
					background-color: rgb(from var(--bkg) r g b / 0.125) ; border-radius: var(--gap-q) ; outline: 1px solid rgb(from var(--txt) r g b / 0.125) ; outline-offset: -1px ; text-decoration: none ; cursor: pointer ; 
					&:hover {  background: var(--bkg) ; color: var(--txt) ; outline-color: rgb(from var(--txt) r g b / 0.5) ; }
				}
				li.on a {  background-color: var(--1st)  ; }
				~ :is(.imgs,.txts) { display: none ; }
				~ h4  { display: none ; }
				~ h4:last-of-type  { display: inline-block ; }
				~ :is(.imgs,.txts).on  { display: flex ; }
				&:has(:nth-of-type(1).on) ~ :is(.imgs,.txts):nth-of-type(1) { display: flex ; }
				&:has(:nth-of-type(1).on) ~ h4:nth-of-type(1)   { display: inline-block ; }
				&:has(:nth-of-type(2).on) ~ :is(.imgs,.txts):nth-of-type(2) { display: flex ; }
				&:has(:nth-of-type(2).on) ~ h4:nth-of-type(2)   { display: inline-block ; }
				&:has(:nth-of-type(3).on) ~ :is(.imgs,.txts):nth-of-type(3) { display: flex ; }
				&:has(:nth-of-type(3).on) ~ h4:nth-of-type(3)   { display: inline-block ; }
				&:has(:nth-of-type(4).on) ~ :is(.imgs,.txts):nth-of-type(4) { display: flex ; }
				&:has(:nth-of-type(4).on) ~ h4:nth-of-type(4)   { display: inline-block ; }
				&:has(:nth-of-type(5).on) ~ :is(.imgs,.txts):nth-of-type(5) { display: flex ; }
				&:has(:nth-of-type(5).on) ~ h4:nth-of-type(5)   { display: inline-block ; }
				&:has(:nth-of-type(6).on) ~ :is(.imgs,.txts):nth-of-type(6) { display: flex ; }
				&:has(:nth-of-type(6).on) ~ h4:nth-of-type(6)   { display: inline-block ; }
				&:has(:nth-of-type(7).on) ~ :is(.imgs,.txts):nth-of-type(7) { display: flex ; }
				&:has(:nth-of-type(7).on) ~ h4:nth-of-type(7)   { display: inline-block ; }
				&:has(:nth-of-type(8).on) ~ :is(.imgs,.txts):nth-of-type(8) { display: flex ; }
				&:has(:nth-of-type(8).on) ~ h4:nth-of-type(8)   { display: inline-block ; }
				&:has(:nth-of-type(9).on) ~ :is(.imgs,.txts):nth-of-type(9) { display: flex ; }
				&:has(:nth-of-type(9).on) ~ h4:nth-of-type(9)   { display: inline-block ; }
				&:has(:nth-of-type(10).on) ~ :is(.imgs,.txts):nth-of-type(10) { display: flex ; }
				&:has(:nth-of-type(10).on) ~ h4:nth-of-type(10)   { display: inline-block ; }
			}
		
		}
		.article header  { display: flex ; flex-flow: row wrap ; gap: var(--gap-h) ; place-items: center start  ; place-content: center start ; }
		.article header h3  { order: 2 ; font-size: var(--h2) ; line-height: 100% ; font-weight: 800 ; margin-block: 0 ; padding: var(--gap-h)  ; color: rgb(from var(--txt) r g b / 0.875) ; background-color: rgb(from var(--txt) r g b / 0.125) ; outline-offset: -1px ; outline: 1px solid rgb(from var(--txt) r g b / 0.125); }
		.article h4  {  display: block ; font-size: var(--h1) ; line-height: 100% ; font-weight: 800 ; margin-block: var(--gap) ; padding: 0 ; color: rgb(from var(--txt) r g b / 0.875) ; }
		.article h5  { display: block ; font-size: var(--h2) ; line-height: 100% ; font-weight: 800 ; margin-block: var(--gap) ; padding: 0 ; color: rgb(from var(--txt) r g b / 0.875) ; }
		.article header .options--button-text  { order: 1 ;  margin: 0 ; padding: 0 ; place-self: start ; gap: 0 ; }
		.article header .options--button-text  { position: absolute; left: 2rem; top: 8rem;}
		.article header .options--button-text li a { 
			background-color: rgb(from var(--txt) r g b / 0.125) ; color: var(--txt) ; outline-color: rgb(from var(--txt) r g b / 0.125) ; margin-inline-end: 0 ; border-radius: 0 ; 
			.icon  { background-color: rgb(from var(--txt) r g b / 0) ; color: var(--txt) ;}
			.word  { display: none ; inline-size: 0 ; overflow: hidden ;  }
			&:hover {
				.icon  { background-color: rgb(from var(--txt) r g b / 0.875) ; color: var(--bkg)  ; }
				.word  { inline-size: auto ; }
			}
		}
		.txts  { flex-flow: column wrap ; gap: var(--gap-d) ; padding-block-end: var(--gap-d) ;  }
		.hide  { display: none ; } 		

		.imgs--primary { grid-area: imgs--primary ; display: grid ; place-items: start ;place-content: start ;  gap: var(--gap) ; }
		.imgs--secondary { grid-area: imgs--secondary ; display: grid ; place-items: start ; place-content: start ; gap: var(--gap) ; }
		.imgs--primary,
		.imgs--secondary  { grid-template: auto / 1fr ; place-items: stretch ;  }

	}
	.options--notes  { margin-block: var(--gap) 0 ; } 
}


.index #main .ins  { grid-template: " . cnt cnt cnt cnt " auto " . cnt cnt cnt cnt " auto / var(--big) var(--big) auto var(--big) var(--big) ; }
.index #main .ins .cnt   { 
	grid-template: "icon article " auto "icon article " auto / calc( var(--big) - var(--gap) ) auto  ; 
	.article  { margin-block-start: 0 ; }
	.imgs--primary { display: none ; }
	.imgs--secondary { display: none ; }
}


@media screen and (width < 1100px) {
	#main .ins .cnt  {
		--img: calc(var(--big) * 2) ; 
	}
}

@media screen and (width < 640px) {
	#main .ins .cnt  { grid-template: "icon ." "article article" auto "imgs--primary imgs--primary" auto "imgs--secondary imgs--secondary" auto / var(--big) auto ; }
	#main .ins .cnt .article header .options--button-text  { position: static ; }
	#main .ins .cnt .imgs--primary, 
	#main .ins .cnt .imgs--secondary  { grid-template: auto / 1fr 1fr ;  }
	.index #main .ins .cnt   { grid-template: "icon ." "article article" auto  / var(--big) auto  ; }
}

@media screen and (width < 360px) {
	#main .ins .cnt .imgs--primary, 
	#main .ins .cnt .imgs--secondary  { grid-template: auto / 1fr ;  }
}


#more  { 
	background-image: var(--shd) ; background-size: 100% var(--gap-q) ; background-repeat: repeat-x ; background-color: var(--1st) ; color: var(--txt) ; 
	.options--row  { padding-inline-start: 0 ; padding-block: var(--gap) ; }
	.options--row .contact  { display: none ; }
	.options--notes li a  { background-color: var(--bkg) ;} 
}

#foot  { 
	background-image: var(--shd) ; background-size: 100% var(--gap-q) ; background-repeat: repeat-x ; background-color: var(--txt) ; color: var(--bkg) ; padding-block: var(--gap-d) ;
	h4  { 
		font-size: var(--h1) ; line-height: 100% ; font-weight: 800 ; margin-block: 0 ; 
		span  { display: block ; font-size: var(--h3) ; }
	}
	.options--button-text   { grid-template: auto / 1fr ; } 
}



/*
Common Elements
*/

.img  { display: grid ;  gap: var(--gap-h) ; inline-size: 100% ; max-inline-size: 100% ; background-color: rgb(from var(--txt) r g b / 0.05) ; padding: var(--gap-h) ; outline: 1px solid rgb(from var(--txt) r g b / 0.125)  ; outline-offset: -1px ; }
.img img  { display: block ; margin: 0 auto ;  inline-size: min(100%,320px) ; outline: 1px solid rgb(from var(--txt) r g b / 0.25) ; outline-offset: -1px ; aspect-ratio: 1 / 1 ; object-fit: cover ; object-position: center top ; }
.img.sketch ,
.img.sketch img { outline: none ;}
.img.black img { filter: grayscale(1) contrast(110%) ;}
.img p  { margin-block: 0 ; padding: 0 ; font-size: 0.75rem ; line-height: 100% ; }
.imgs   { position: relative ; display: flex ; flex-flow: row nowrap ; overflow-y: hidden ; overflow-x: scroll ; scrollbar-color: var(--txt) var(--1st) ; scroll-snap-type: x mandatory ; margin-block-end: var(--gap) ;scroll-behavior: smooth ; outline: 1px solid rgb(from var(--txt) r g b / 0.125 ) ; outline-offset: -1px ;}
.imgs   {  inline-size: calc(var(--width) - (var(--big) ))  ; }
@media screen and (width < 640px) {
	.imgs { --big: 0px ; }
}
.imgs .img   { position: relative ; scroll-snap-align: center ;  padding-inline: var(--gap) ; }
.imgs .img img  { aspect-ratio: unset ; margin-block: var(--gap) ; inline-size: calc(var(--width) - (var(--big) + (var(--gap) * 2))) ; }
.imgs .img :is(.next,.prev)  { inline-size: calc( var(--gap-d) * 1.5 ) ; block-size: calc( var(--gap-d) * 1.5 ) ; display: block ; background: rgb(from var(--1st) r g b / 0.85 )  ; margin: 0 ; padding: 0 ; list-style-type: none ;  outline: 2px double rgb(from var(--txt) r g b / 0.125 )   ; outline-offset: -4px ; }
.imgs .img :is(.next,.prev):has( a )  { outline-color: rgb(from var(--txt) r g b / 0.85 ) ; }
.imgs .img .next  { position: absolute ; top: calc( 50% - 1.5rem ) ; right: var(--gap-h) ; border-radius: 5px 4px 1px 3px ; }
.imgs .img .prev  { position: absolute ; top: calc( 50% - 1.5rem ) ; left: var(--gap-h) ; border-radius: 2px 1px 6px 4px ; inline-size: calc( var(--gap-d) * 1.5 ) ; block-size: calc( var(--gap-d) * 1.5 ) ;  }
.imgs .img :is(.next,.prev) a  { inline-size: 100% ; block-size: 100% ; display: block ; }
.imgs .img .next a  { background: url(next.svg) 60% 55% / 75% no-repeat; }
.imgs .img .prev a  { background: url(prev.svg) 45% 55% / 75% no-repeat; }
.imgs .img :is(.next,.prev) a:hover  { background-color: rgb(from var(--txt) r g b / 0.125) ;}

.imgs:has(.img:last-of-type:nth-of-type(1)) {
	outline: none ; overflow: hidden ; inline-size: auto ;
	.img:last-of-type:nth-of-type(1) {
		--width: 100%; --big: 0 ; position: static ; display: block ;  margin: 0 ; padding: 0 ;  outline: 0px  ; 
		.next ,
		.prev  { display: none; }
		p  { left: var(--gap) ; }
		img  { inline-size: 100% ; } 
	}
}
.imgs .img p:has( label )   { 
	position: absolute ; display: grid ; left: calc( var(--gap-d) * 2.125 ) ; bottom: var(--gap) ; background: var(--bkg) ; margin: 0 ; padding: var(--gap) var(--gap-d) var(--gap)  calc(var(--gap) * 3);  list-style-type: none ;  outline: 2px double rgb(from var(--txt) r g b / 0.875 )  ; outline-offset: -4px ; place-items: center ; place-content: center ; border-radius: 4px 1px 5px 6px ;
	@media screen and (width < 640px) {
		left: var(--gap-h) ; 
	}
	.txt  { display: block ; max-inline-size: 24em ; text-overflow: clip; white-space: wrap ; line-height: 150% ;}
	label  { position: absolute  ; bottom: 0.375rem;  left: 0.375rem  ; inline-size: var(--gap-d) ; block-size: var(--gap-d) ; background: var(--1st) ; cursor: pointer ; background: url(more.svg) 50% 50% / 100% no-repeat; }
	label input  { display: none ; }
	&:has( label input:not(:checked) ) {
		label  { background: url(less.svg) 50% 50% / 100% no-repeat; }
		.txt {   text-overflow: ellipsis ; white-space: wrap ; }
	}
	&:has( label input:checked ) {
		.txt { text-overflow: ellipsis; white-space: nowrap; overflow: hidden ; place-items: start ; place-content: start ;}
	}
}

.artefact--item  {
	display: grid ; grid-template: auto / 1fr ; gap: var(--gap) ; list-style-type: none ; position: relative;
	margin: 0 ; padding: var(--gap) ; color: rgb(from var(--txt) r g b / 0.875) ; outline-offset: -1px ; outline: 1px solid rgb(from var(--txt) r g b / 0.05); 
	&.always  { 
		background-color: rgb(from var(--1st) r g b / 0.05) ; 
		h6 ,
		.notes::before ,
		.created::before  { background-color: rgb(from var(--1st) r g b / 0.875) ; }
	}
	&.often  { 
		background-color: rgb(from var(--2nd) r g b / 0.05) ;
		h6 ,
		.notes::before  { background-color: rgb(from var(--2nd) r g b / 0.125) ; }
		.created::before  { background-color: rgb(from var(--2nd) r g b / 0.875) ; }
	}
	&.rarely  { 
		h6 ,
		.notes::before   { background-color: rgb(from var(--3rd) r g b / 0.05) ; }
		.created::before  { background-color: rgb(from var(--3rd) r g b / 0.875) ; }
	}
	> ul  { margin: 0 ; padding: 0 ; list-style-type: none ; }
	> ul > li  { margin: 0 0 0 3rem ; padding: var(--gap-h)  ; list-style-type: none ; }
	> ul > li b  {  display: block; text-transform: uppercase; font-weight: 800; }
	h6  { font-size: var(--h2) ; line-height: 100% ; font-weight: 800 ; margin: var(--gap_m) 8rem 0 var(--gap_m) ; 
		display: inline-block; inline-size: fit-content; padding: var(--gap)  ; line-height: 100% ; outline: 1px solid rgb(from var(--txt) r g b / 0.5 ) ; outline-offset: -1px ; background-color: rgb(from var(--txt) r g b / 0.125) ;
	}
	.defined  { margin-inline-start: 0 ; margin-block: 0 var(--gap) ; padding: 0 ; }
	.defined b { display: none ; }
	.notes  { position: relative ; margin-block: 0 var(--gap-h) ; color: rgb(from var(--txt) r g b / 0.875 ) ; font-style: italic ; font-size: 0.875em ; }

	.notes b { /*display: none ; */ font-style: normal ;}
	.notes::before  { 
		position: absolute ; top: var(--gap-h)  ; left: -3rem ; font-size: 3rem ; content: "\201F" ; font-family: 'Times New Roman', Times, serif ; font-weight: 800 ; text-indent: 0.25rem ; 
		inline-size: 2.5rem ; block-size: 2.5rem ; line-height: 100% ; outline: 1px solid rgb(from var(--txt) r g b / 0.125 ) ; outline-offset: -1px ; background-color: rgb(from var(--txt) r g b / 0.125 ) ;
	}
	.description--tldr  {display: none}

	.defined   { display:block ; }
	.notes { display: block ; }
	.description--full { display: none ; }
	.description--best { display: none ; }
	.description--how { display: none ; }
	.description--created { display: none ; }
	.description--format  { display: none ; }
	.created-by { display: none ; }
	.contributions { display: none ; }
	.format    { display: grid ; grid-template-columns: 1fr 2fr  ; margin-block: 0 ; text-align: end; b  { text-align: start ; } }
	.created  { 
		position: absolute ; top: var(--gap-3q)  ; right: var(--gap-h) ; display: block ; height: 3rem ; background: transparent ;  display: block; text-transform: uppercase; font-weight: 800; 
		&::before  { content: '' ; block-size: var(--gap) ; aspect-ratio: 1 / 1 ; display: inline-block ; position: relative; top: calc( var(--gap-q) / 2 ); border-radius: 1px; ;}
		b  { display: none ; }
	 }

	.format  { display: none ; }
	.options--row  { margin-inline-start: 0 ; margin-block-start: var(--gap)  ; padding: 0 ; }
	.options--row .less   { display: none ; }
	&.show-description  {
		.options--row .more   { display: none ; }
		.options--row .less   { display: flex ; }

		.defined   { display:block ; }
		.notes { display: block ; }
		.description--tldr  {display: none}
		.description--full ,
		.description--best ,
		.description--how ,
		.description--created ,
		.description--format  { display: block;}

		.created-by { display: none ; }
		.contributions { display: none ; }

	}
}

.options--row  { 
	display: flex ; flex-flow: row wrap ; gap: var(--gap-q) ; place-content: start ; padding: var(--gap-h) 0 ; margin: 0 ; 
	li  { display: block ; padding: 0 ; margin: 0 ; }
	li.cv  { display: none ; } 
	li :is(span,a) { 
		display: inline-block ; padding: var(--gap-h) var(--gap) ; margin: 0 ; font-size: 1rem ; color: var(--txt) ; font-weight: 800 ; 
		background-color: rgb(from var(--bkg) r g b / 0.125) ; border-radius: var(--gap-q) ; outline: 1px solid rgb(from var(--txt) r g b / 0.125) ; outline-offset: -1px ; text-decoration: none ; cursor: pointer ; 
		&:hover {  background: var(--bkg) ; color: var(--txt) ; outline-color: rgb(from var(--txt) r g b / 0.5) ; }
	}
}

.options--notes   { 
	display: grid ; grid-template: auto auto / 1fr ; gap: var(--gap) ; margin: 0 ; padding: 0 0 var(--gap); list-style-type: none ;
	&:has(li:nth-of-type(2))  { 
		grid-template: auto auto / 1fr 1fr ; 
		li  { max-inline-size: revert ; }
		&.options--notes--front  { 
			grid-template-columns: 1fr 2fr 1fr ; grid-template-rows: auto ; grid-template-areas: "a b c"  ; gap: 0 ; 

			@media screen and (width < 640px) {
				grid-template-columns: 1fr 1fr ; grid-template-rows: auto ; grid-template-areas: "b a"  "b c " ; gap: 0 ; 
			}
			&:has(li:nth-of-type(4))  { 
				grid-template-areas: "a b d"  "a c d" ; 

				@media screen and (width < 640px) {
					grid-template-areas: "b a"  "d c " ; 
				}
			}
			li:nth-of-type(1)  { grid-area: a ; }
			li:nth-of-type(2)  { grid-area: b ; }
			li:nth-of-type(3)  { grid-area: c ; }
			li:nth-of-type(4)  { grid-area: d ; }
			li.img  { padding: var(--gap) ; border-block-end: var(--gap-h) solid var(--txt); } 
			li.img img {  outline: 1px solid var(--txt); outline-offset: -3px ; } 
		}
	}
	li   { margin: 0 ; padding: 0 ; list-style-type: none ; position: relative ; max-inline-size: 420px ; }
	li a  { 
		position: relative ; padding: var(--gap) var(--gap) var(--gap) calc( var(--gap-d) * 2 ) ; min-height: 4rem;
		color: var(--txt) ; display: block ; block-size: 100% ; font-size: 1rem ; line-height: 150% ; font-weight: 600 ; 
		background-color: rgb(from var(--bkg) r g b / 1) ; border-radius: 0 ; outline: 1px solid var(--txt) ; outline-offset: -1px ; text-decoration: none ; cursor: pointer ; border-block-end: var(--gap-h) solid var(--txt) ;
		&:hover  { text-decoration: underline ; text-decoration-thickness: 0.125rem ; } 
	}
	li a > span  { display: block ; text-transform: uppercase ; font-weight: 800 ;  }
	li a > span.for  { display: inline ; text-transform: lowercase ; font-weight: 400 ; padding-inline: 0.125em ; font-style: italic ; }
	li a > em  { display: inline ; text-transform: uppercase ; font-weight: 800 ; font-style: normal ;}
	li a > q  { display: block ;  }
	li a::before  { 
		position: absolute ; top: var(--gap)  ; left: var(--gap) ; font-size: 3rem ; content: "\201F" ; font-family: 'Times New Roman', Times, serif ; font-weight: 800 ; text-indent: 0.25rem ; 
		inline-size: var(--gap-d) ; block-size: var(--gap-d) ; line-height: 100% ; outline: 1px solid rgb(from var(--txt) r g b / 0.125 ) ; outline-offset: -1px ; background-color: rgb(from var(--txt) r g b / 0.125 ) ;
	}
	li.plus a::before  { font-size: 2rem ; content: "+" ; text-indent: 0.45rem ;  }
	li a .doodle  { padding: var(--gap) 0 0 0 ; }
	li a:has(.doodle)  { 
		padding-block-end: var(--gap-h)  ; margin-block-end: 50% ; 
		.doodle  { padding: var(--gap) 0 0 0 ; position: absolute ; bottom: var(--gap) ; left: var(--gap-d)  ; right: var(--gap-d)  ; }
	}
	li a .doodle img { aspect-ratio: 5 / 2.5 ; inline-size: 100% ; }
}
@media screen and (width < 640px) {
	.options--notes:has(li:nth-of-type(15))  { 
		gap: 0 ; 
		li:nth-of-type(odd) a { border-block-end: 0 ; }
		li:nth-of-type(even)  { margin-block-start: -1px;  padding-block-end: var(--gap-d) }
	}
	.options--notes:has(li:nth-of-type(2))  { grid-template: auto auto / 1fr ;  }
}
.options--list  {

	list-style-type: none; margin: 1rem 0 ; padding: 0 ; 
	li   { margin-block-end: 1rem ;  }
}

.options--button-text   { 
	display: grid ; grid-template: auto / 1fr ; gap: var(--gap-h) ;  padding: var(--gap) 0 ; margin: 0; 
	&:has(li ~ li)  { grid-template: auto auto / 1fr 1fr ;  }
	li  { list-style-type: none ; margin: 0; padding: 0; }
	li a { 
		display: inline-flex ; place-items: center ; gap: var(--gap-q) ; padding: var(--gap-h) ; margin: 0 var(--gap-h) 0 0 ; cursor: pointer ; 
		color: var(--txt) ; font-weight: 800 ; 
		background-color: var(--txt) ; color: var(--1st) ; border-radius: var(--gap-q) ; outline: 1px solid rgb(from var(--bkg) r g b / 0.125) ; outline-offset: -1px ; text-decoration: none ; cursor: pointer ; 
		&:hover { background-color: var(--1st) ; color: var(--txt) ; }
		.icon  { display:grid ; place-content: center ; place-items: center ; inline-size: var(--gap-d) ; block-size: var(--gap-d) ; padding-block-end: 0.05rem ; background-color: var(--1st) ; color: var(--txt) ; font-size: 1.5rem ; border-radius: var(--gap-q)  ; transform: rotate(180deg) ;}
	}
}

/*
Page Control
*/
#cnt.stories  .options--row li.stories a ,
#cnt.case-studies  .options--row li.case-studies a ,
#cnt.portfolio  .options--row li.portfolio a ,
#cnt.work  .options--row li.work a ,
#cnt.cv  .options--row li.cv a ,
#cnt.about  .options--row li.about a ,
#cnt.contact  .options--row li.contact a ,
#cnt.home  .options--row li.home a {  background: var(--bkg) ; color: var(--txt) ;  }

.case-study--larger  { display: none !important ; }

#portfolio  { padding-block-start: var(--gap) ;}
#portfolio ul { display: block ; margin: 0 ; padding: 0 ; list-style-type: none ; column-width: calc( var(--big) * 2.5 ) ; column-gap: var(--gap) ;}
#portfolio ul li  { display: block ; margin: 0 ; padding: 0 ; list-style-type: none ;  margin-block-end: var(--gap) ;}
#portfolio ul li img  {width: 100%}