/* ****************************** */
/* List of articles               */
/* ****************************** */
.article_previews {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;

	--default-accent-colour: #8fff85;
}
.article_preview {
	display: flex;
	text-decoration: none;
	color: black;
	width: 100%;
	margin-bottom: 4em;
	outline: none;
}
.article_preview:hover{
	color: black;
}
.article_preview .preview_image{
	width: 55%;
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 16 / 10;
	position: relative;
	transition: transform 0.05s ease-out; 
}
.article_preview img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 50;
	position: relative;
	transition: transform 0.15s ease-in-out;
}
.article_preview .preview_image .img_shadow{
	content: "";
	display: block;
	inset: 0;
	position: absolute;
	z-index: 10;
	background-size: cover;
	background-position: center center;
	opacity: 0.85;
	transition: transform 0.15s ease-out; 
}
.article_preview .preview_image .img_shadow .blend_color{
	content: "";
	display: block;
	inset: 0;
	position: absolute;
	background: var(--default-accent-colour);
	mix-blend-mode: color;
}

.article_preview .preview_image video{
	position:absolute;
	left:0;
	top:0;
	height:100%;
}
.article_preview .preview_text{
	justify-content: center;
	display: flex;
	flex-direction: column;
	margin: 0 1.5em 0 2em;
}
.article_preview .title_holder{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column;
}
.article_preview h2 {
	font-size: 1.9em;
	margin: 0.5em 1em 0 0;
	line-height: 1.35em;
	font-weight: 600;

	--shadow-size: 8px;
}
.article_preview h2 span{
	background: var(--default-accent-colour);
	box-shadow: var(--shadow-size) 0 0 var(--default-accent-colour), calc(-1 * var(--shadow-size)) 0 0 var(--default-accent-colour);
   box-decoration-break: clone;
	line-height: 1.35em;
	padding:2px 0;
}

.article_preview p{
	margin-bottom: 0;
	max-width: 45ch;
	font-size: 1.35em;
	line-height: 1.2em;
}

.article_preview .read-more span{
	text-decoration: none;
	padding: 0.2em 0.4em 0.2em 0;
	display: inline-block;
	transition: all 0.15s ease-in-out;
	text-underline-offset: 0.25em;
}
.article_preview:hover .read-more span{
	text-decoration: underline;
}

/* Make the 3rd article onwards smaller again... */

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

	.article_preview:nth-child(n+3){
		width: 45%;
		flex-direction: column;
		margin-bottom: 2.5em;
	}

	.article_preview:nth-child(n+3) .title_holder{
		align-items: center;
		flex-direction: row;
	}

	.article_preview:nth-child(2n+4){
		margin-top: 2.5em;
	}

	.article_preview:nth-child(n+3) .preview_image{
		width: 100%;
		margin-left: 0em;
		aspect-ratio: 16 / 10;
		transition: filter 0.15s ease-in-out;
	}
	.article_preview:nth-child(n+3):hover .preview_image{
		filter: grayscale(0%);
	}
	.article_preview:nth-child(n+3) .preview_text{
		margin: 1.2em 0 1em 0;
		z-index: 100;
	}
	.article_preview:nth-child(n+3) h2{
		font-size: 1.4em;
		width: 100%;
		margin-top: 0em;
		text-align: center;
	}
	.article_preview:nth-child(n+3) h2 span{
		box-shadow: none !important;
		background: none !important;
	}
	.article_preview:nth-child(n+3) p{
		max-width: none;
		font-size: 1.2em;
	}
	.article_preview:nth-child(n+3) .read-more{
		text-align: center;
	}
}

/* Media styles */

@media screen and (max-width: 800px) { 
	.article_preview{flex-direction: column; margin-bottom: 3em;}
	.article_preview .preview_image, .article_preview:nth-child(n+2) .preview_image{
		width: 100%;
		margin-left:0;
		min-height: 5em;
	}
	.article_preview .preview_text{margin:1em 0;}
	.article_preview h2{font-size: 1.5em;}
	.article_preview p{max-width: none;}
	.article_preview:nth-child(n+3) .read-more span{text-decoration: underline;}

}



/* ****************************** */
/* Main page of text              */
/* ****************************** */

.article{
	font-size: 1.2em;
	max-width: 80ch;
	margin: -160px auto 0; /* to compensate for header translations */
	z-index: 100; /* to avoid links scrolled to top of viewpoint from sitting behind article_header_white_logo */
	position: relative;
}
.article.plain-header-article{margin-top:auto;}
section.article{
	margin-top: auto; /* For when we want to force an article block */
}

.article_big_lead p{
	font-size: 1.4em;
	line-height: 1.4em;
	max-width: 80%;	
}

p, ul, ol{
	line-height: 1.3em;
}
h1{
	font-size: 2.5em;
	text-align: left;
	margin: 1.8em 0 0;
	line-height: 1.4em;
}
.spaced_out{
	margin:2em 0 1em;
	font-size: 2em;
	line-height: 1.5em;
}
h2{
	margin:2em 0 1em;
}
h3.date{
	font-size: 0.8em;
	text-align: left;
	text-transform: uppercase;
	font-weight: 300;
	margin: 0.5em 0 3em;
}

figure{
	width: 100%;
	margin: 1em 0 1.7em;
	display: flex;
	flex-wrap: wrap;
}
figure img{
	display: block;
	max-width: 100%;
	margin: 0 auto;
	/* Line below fixs safari stretching bug */
	/* https://stackoverflow.com/a/64108625/10240581 */
	height: intrinsic;
}
figure.multiple img{
	margin: 0;
	width: 25%;
	flex-grow: 1;
}

/* Special groupings */
figure.multiple.last-full-width img:last-of-type{
	width: 100%;
	margin: 5px 0 0 0;
}

figure video{
	width: 100%;
	height: intrinsic;
}


figure .youtube_video{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
figure .youtube_video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

figure img:not(:first-of-type){
	margin-left: 5px;
}
figcaption {
	margin: 0.5em 0 0 0;
	font-size: 0.8em;
	padding: 0.3em 0 0.7em;
	display: inline-block;
	border-top: 1px solid #aaa;
	order: 10;
}
figcaption:empty{
	display: none;
}
figure:after{
	content: "";
	width: 100%;
	order: 1; /* Use this element to force figcaption to new line */
}



/* Name highlighting for interview pages   */

.interview-transcript p{padding-left: 6em; box-sizing: border-box;}
.interview-transcript mark + p{margin-top:-1.4em;}

.interview-transcript mark{
	border-radius: 3px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8em;
	transform: translateY(-0.1em);
	display: inline-block;
	background: transparent;
}
.interview-transcript mark.george{color: #000; }
.interview-transcript mark.david{color: #1c6aa3;}
.interview-transcript mark.catherine{color:#b35049;}

.interview-transcript mark.george + p, .interview-transcript mark.george + p + p, .interview-transcript mark.george + p + p + p, .interview-transcript mark.george + p + p + p + p{font-weight: 500; color:rgba(0,0,0,0.75);}

@media screen and (max-width: 800px){
	.interview-transcript p{padding-left: inherit;}
	.interview-transcript mark + p{margin-top:0.7em;}
	.interview-transcript mark.george{display:none;}
}


/* ****************************** */
/* Code and syntax highlighting   */
/* ****************************** */

pre{
	position: relative;
}
code{
	font-size: 0.85em;
	tab-size: 2;
	background: grey;
	background: rgba(0,0,0,0.1);
	padding: 0.1em 0.2em;
	border-radius: 5px;
}

.copy-link{
	position:absolute;
	top: 0;
	right: 0;
	display: block;
	background:hsl(0,0%,0%);
	color: white;
	text-decoration: none;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 700;
	border-bottom-left-radius: 5px;
	border-top-right-radius: 4.5px;
}
.copy-link:hover, .copy-link:active{
	background:hsl(0,0%,100%);
	color: black;
}


pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: a11y-dark
  Author: @ericwbailey
  Maintainer: @ericwbailey

  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
*/.hljs{background:#2b2b2b;color:#f8f8f2}.hljs-comment,.hljs-quote{color:#d4d0ab}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ffa07a}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5ab35}.hljs-attribute{color:gold}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#abe338}.hljs-section,.hljs-title{color:#00e0e0}.hljs-keyword,.hljs-selector-tag{color:#dcc6e0}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}



/* ****************************** */
/* Videos                         */
/* ****************************** */

.videos_panel{
	display: flex;
	flex-wrap: wrap;
}
.videos_panel video{
	width: 100%;
}
.video_3 figure {
	width: calc(33% - 0.666em);
	margin-right: 1em;
}
.video_3 figure:nth-of-type(3n){
	margin-right: 0em;
}
.video_4 figure {
	width: calc(25% - 0.75em);
	margin-right: 1em;
	margin-bottom: 0.5em;
}
.video_4 figure:nth-of-type(4n){
	margin-right: 0em;
}

@media screen and (max-width: 800px) { 
	.video_3 figure {width:calc(50% - 0.5em);}
	.video_3 figure:nth-of-type(3n){margin-right:1em;}
	.video_3 figure:nth-of-type(2n){margin-right:0em;}

	.video_4 figure {width:calc(50% - 0.5em);}
	.video_4 figure:nth-of-type(4n){margin-right:1em;}
	.video_4 figure:nth-of-type(2n){margin-right:0em;}
}

 
@media screen and (max-width: 1200px) { 
	.header-logo{left: auto;}
	header{display:flex;}
	
	header::after{display:none;}
	.article_header_white_logo{display:none;}
	.article{margin-top: -80px;}
}

@media screen and (max-width: 1000px) { 
	header, .article{margin-left:2.5em; margin-right:2.5em;}
}

@media screen and (max-width: 800px) { 
	header{justify-content: space-between;}
	.header-image{aspect-ratio: 1000 / 400;}
}
@media screen and (max-width: 600px) { 
	header{flex-direction: column;}
	header, main, .article, footer{ margin-left:25px; margin-right:25px;}
	main .article{margin-left:0; margin-right:0;}
	.article h1{line-height: 1.2em;}

	.article_big_lead p{max-width:100%;}

}


/* ******************************************** */
/* Workshops */
/* ******************************************** */

.new-tag{
	position: relative;
}
.new-tag::before{
	content: "New";
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.8em;
	padding: 0.15em 0.5em;
	border-radius: 0.5em;
	background: #c5ff25;
	box-shadow: 0px 0px 15px #c5ff25;
	transform: rotate(-4deg);
	display: inline-block;
	margin-right: 0.5em;
	position: absolute;
	left: -4em;
}
.new-tag-indent, .new-tag{
	margin-left: 3em;
}
@media screen and (max-width: 650px) {
	.new-tag-indent, .new-tag{margin-left: 0em;}
	.new-tag{margin-top:3em;}
	.new-tag::before{left:0em; top:-3em;}
}

.workshop-mailing-list-form{
	font-size: 1.4em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.workshop-mailing-list-form input[type="email"],
.workshop-mailing-list-form button[type="submit"]{
	font-family: var(--body-font);
	font-weight: 300;
	font-size: 0.8em;
	padding: 0.3em 0.5em;

}
.workshop-mailing-list-form input[type="email"]{
	margin-bottom: 0.2em;
	width: min(100%, 300px);
}
.workshop-mailing-list-form button[type="submit"]{
	background: hsl(0,0%,7%);
	color: white;
	cursor: pointer;
	border: 3px solid transparent;
}

.workshops-contact-email{font-weight: 400;}

.workshop-mailing-list-form.has-sending button[type="submit"]:after{
	animation: 0.8s linear dots infinite;
	content: "";
}

@keyframes dots{
	0% 	{content: ".";}
	50% 	{content: "..";}
	100% 	{content: "...";}
 }


.workshop-mailing-list-form .subscribe-success, .workshop-mailing-list-form .subscribe-error{
	font-size: 0.85em;
	line-height: 1em;
	max-width: 80%;
	padding: 0.5em 0.5em;
	margin-top: 0;
	border: 2px solid;
	background-color: hsla(76, 100%, 57%, 55%);
	border-color: hsl(76, 100%, 57%);
}
.workshop-mailing-list-form .subscribe-error{
	background-color: hsla(51, 100%, 57%, 55%);
	border-color: hsl(51, 100%, 57%);
}
.workshop-mailing-list-form .subscribe-error::before{content: '⚠️ ';}

.workshop-mailing-list-form:not(.has-success) .subscribe-success{display: none;}
.workshop-mailing-list-form.has-success input, .workshop-mailing-list-form.has-success button{display: none;}
.workshop-mailing-list-form:not(.has-error) .subscribe-error{display: none;}

.courses{display: flex; justify-content: space-between; margin-top: 3.5em;}
.course{
	width: 46%;
	--h2-highlight: rgb(30,30,30);
	--shadow-size: 8px;
}

@media screen and (max-width: 800px) {
	.courses{flex-direction: column;}
	.course{width:100%;}
	.course:nth-of-type(n+2){margin-top:3em;}
}

.course img{max-width: 100%; display: block;}

.course h2{
	color: white;
	font-size: 1.8em;
	font-weight: 600;
	margin-top: 0.5em;
	margin-left: var(--shadow-size);
	margin-bottom: 0.6em;
	max-width: 80%;
}
.course h2 span{
	background: var(--h2-highlight);
	box-shadow: var(--shadow-size) 0 0 var(--h2-highlight), calc(-1 * var(--shadow-size)) 0 0 var(--h2-highlight);
	box-decoration-break: clone;
	line-height: 1.35em;
	padding: 2px 0;
}
.course h3{
	font-size: 1.3em;
	font-weight: 300;
	margin: 0;
}
.course p{
	font-size: 1.2em;
}
.course .workshop-action{
	background: hsl(0,0%,96%);
	color: black;
	font-family: 'Poppins', sans-serif;
	border: 1px solid hsl(0,0%,88%);
	text-decoration: none;
	padding: 0.3em 0.6em 0.3em 2em;
	margin: 1.5em auto 1.5em auto;
	display: block;
	position: relative;
	width: max-content;
	transition: all 0.15s ease-in-out;
}

@media screen and (max-width: 799px) {
	.course .workshop-action{margin-right:0; margin-left:1.5em;}
}

.course .workshop-download::before{
	content: "";
	position: absolute;
	left: -23px;
	background: url('/images/pages/workshops/pdf-icon.svg') no-repeat left 50%;
	width: 50px;
	height: 50px;
	top: -10px;
	background-size: contain;
	transition: all 0.15s ease-in-out;
}
.course .workshop-action:hover{
	background: hsl(0,0%,7%);
	color: white;
}
.course .workshop-action:hover::before{
	transform: translateX(3px);
}



/* ******************************************** */
/* Talks */
/* ******************************************** */


.talks-page{font-size: 1.2em;}

.talks-intro-image{width:100%; display:block; margin: 2em 0 1em;}
.talks-intro-lead{font-size: 1.2em;}

.talks-logos{max-width: 50ch; width:100%; display:block;}

.selected-talks{display: flex;}
.selected-talks figure{width: calc(33% - 8px); margin-top:0px;}
.selected-talks figure:not(:last-of-type){margin-right: 4px;}
.selected-talks figcaption{border-top: none; font-size: 1em;}
.selected-talks .where-when{font-size: 0.8em;}

@media screen and (max-width: 800px) { 
	.selected-talks{flex-direction: column;}
	.selected-talks figure{width:100%;}
	.selected-talks figure:not(:last-of-type){margin-right: 0px;}
}


.talks-page .left-align-block{max-width: 80ch;}

dl{display: inline-block;}
dt{margin-bottom:0.1em; position: relative;}
dt > a, dd > a{color: black;}
dd{margin-left: 0; margin-bottom:1.2em; font-size:0.8em; line-height: 1.4em;}

dt.year-break{
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid hsl(0, 0%, 90%);
}

dt.talk-logo, dt.talk-logo + dd{margin-left: 55px;}

dt.talk-logo::before{content:""; position: absolute; width: 55px; height:55px; background-repeat: no-repeat; background-position: left top; display:block; left:-55px; background-size: 36px 36px; background-blend-mode: overlay; opacity:1;}

dt.talk-logo[data-company=pti]::before{background-image:url('/images/pages/talks/logos/pti.png');}
dt.talk-logo[data-company=university-of-bristol]::before{background-image:url('/images/pages/talks/logos/university-of-bristol.png');}
dt.talk-logo[data-company=parsons]::before{background-image:url('/images/pages/talks/logos/parsons.png');}
dt.talk-logo[data-company=evonetix]::before{background-image:url('/images/pages/talks/logos/evonetix.png');}
dt.talk-logo[data-company=imperial]::before{background-image:url('/images/pages/talks/logos/imperial.png');}
dt.talk-logo[data-company=delft]::before{background-image:url('/images/pages/talks/logos/delft.png');}
dt.talk-logo[data-company=wowtech]::before{background-image:url('/images/pages/talks/logos/wowtech.png');}
dt.talk-logo[data-company=ixda]::before{background-image:url('/images/pages/talks/logos/ixda.png');}
dt.talk-logo[data-company=skydio]::before{background-image:url('/images/pages/talks/logos/skydio.png');}
dt.talk-logo[data-company=huckletree]::before{background-image:url('/images/pages/talks/logos/huckletree.png');}
dt.talk-logo[data-company=ux-oxford]::before{background-image:url('/images/pages/talks/logos/ux-oxford.png');}
dt.talk-logo[data-company=each-other]::before{background-image:url('/images/pages/talks/logos/each-other.png');}
dt.talk-logo[data-company=fitc]::before{background-image:url('/images/pages/talks/logos/fitc.png');}
dt.talk-logo[data-company=data]::before{background-image:url('/images/pages/talks/logos/data.png');}
dt.talk-logo[data-company=sow]::before{background-image:url('/images/pages/talks/logos/sow.png');}
dt.talk-logo[data-company=wearedevelopers]::before{background-image:url('/images/pages/talks/logos/wearedevelopers.png');}