:root {
	--font-body: 24px;
	/* --font-body-v: "slnt" 1, "wdth" 56, "wght" 42; */
	--font-body-weight: 750;
	--font-body-color: #000;
	--font-body-color-secondary: rgba(0,0,0,0.5);
	--font-canvas-color: #fff;
	--font-body-ls: -0.0125em;

	--font-callout-headline: 40px;
	/* --font-callout-headline-v: "slnt" 1, "wdth" 64, "wght" 96; */
	--font-callout-p: 72px;
	/* --font-callout-p-v: "slnt" 1, "wdth" 24, "wght" 42; */
	--font-callout-note: 32px;
	--callout-min-height: 50vh;
	--callout-lh: 100%;

	--font-header1: var(--font-body);
	/* --font-header1-v: "slnt" 1, "wdth" 76, "wght" 64; */

	--font-header2: 12vw;
	/* --font-header2-v: "slnt" 1, "wdth" 56, "wght" 64; */
	--font-header2-weight: 750;
	--font-header2-lh: 100%;
	--font-header2-ls: -0.0375em;
	--font-header2-tt: none;
	--font-header2-color: var(--font-body-color);

	--font-header3: 64px;
	/* --font-header3-v: "slnt" 1, "wdth" 24, "wght" 64; */
	--font-header3-weight: 750;
	--font-header3-ls: -0.0125em;
	--font-header3-lh: 112.5%;

	--font-header4: var(--font-body);
	/* --font-header4-v: "slnt" 1, "wdth" 56, "wght" 64; */
	--font-header4-weight: 750;
	--font-header4-lh: 125%;

	--font-figcaption: var(--font-body);
	/* --font-figcaption-v: "slnt" 1, "wdth" 24, "wght" 64; */
	--font-figcaption-lh: 125%;

	--font-header6: 16px;
	/* --font-header6-v: "slnt" 1, "wdth" 76, "wght" 96; */
	--font-header6-weight: 900;
	--font-header6-lh: 125%;
	--font-header6-ls: 0.0125em;

	--link-color: blue;

	
	--padding-frame: 96px;
	--nav-height: calc(var(--padding-frame) * 1);
	--featured-background: #E8EAEE;

	--selection-border-color: #4597F7;
}

/* —— DESKTOP —— */
@media (max-width: 1728px) {
	:root {
		--font-body: 24px;

		--font-callout-headline: 32px;
		--font-callout-p: 56px;
		--font-callout-note: 32px;

		--font-header3: 48px;

		--padding-frame: 64px;
	}
}

/* —— TABLET —— */
@media (max-width: 1024px) {
	:root {
		--font-callout-headline: 24px;
		--font-callout-p: 40px;
		--font-callout-note: 24px;

		--font-header2: 15vw;

		--font-header3: 40px;

		--padding-frame: 48px;
	}
}

/* —— MOBILE —— */
@media (max-width: 640px) {
	:root {
		/* --font-body-v: "slnt" 1, "wdth" 56, "wght" 48; */
		
		--font-header2: 16vw;

		--font-callout-headline: 20px;
		--font-callout-p: 32px;
		--font-callout-note: 24px;

		--padding-frame: 24px;
	}
}


/* —— PORTRAIT —— */
@media (orientation: portrait) {
	:root {
		--callout-min-height: 80vh;
	}
}

/* —— DARK MODE —— */
@media (prefers-color-scheme: dark) {
	:root {
		--font-body-color: #fff;
		--font-canvas-color: #000;
		--featured-background: #1C2229;
		--link-color: #0047FF;
	}
}


* { margin:0; padding:0; border:0; font-size: inherit; line-height: 150%; letter-spacing: var(--font-body-ls); }
* {
	cursor: url('/pointer5.svg'), auto;
}
a, a *, a:hover, a:hover *,
button, button *, button:hover, button *,
.clickable, .clickable *, .clickable:hover, .clickable:hover *,
input, input *, input:hover, input:hover * {
	cursor: url('/pointer5hover.svg'), auto;
}

/* * {outline: dashed 1px red; } */
html { background-color:#fff; color: var(--font-body-color); }

/* —— LAYOUT —— */

body {
	font-size: var(--font-body);
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, system-ui, sans-serif;
	/* font-variation-settings: var(--font-body-v); */
	font-weight: var(--font-body-weight);
	
	height: 100vh;

	overflow-y: scroll;
	overflow-x: hidden;
	
	perspective: 1200px;
	transform-style: preserve-3d;
	
	background-color: var(--font-canvas-color);
}

main {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	transform-style: inherit;
	overflow-y: scroll;
	overflow-x: hidden;
	perspective: 1200px;
	height: 100%;
}

/* —— NAV —— */

nav.main, nav.secondary {
	height: var(--nav-height);
}

nav.main {
	position: fixed;
	top: var(--padding-frame);
	left: var(--padding-frame);
	z-index: 100;
	
	display: flex;
	flex-direction: row;
	align-items: center;

	align-self: stretch;

	& img {
		width: var(--nav-height);
		border-radius:100%;
	}
}



/* —— SECTIONS —— */

section, summary, footer, details {
	display: flex;
	flex-direction: column;

	position: relative;
	transform-style: preserve-3d;
	
	/* transform: rotateX(3deg); */

	&.centered { justify-content: center; align-content: center; align-items: center;}
	
	&.marginless {
		margin-inline: calc(var(--padding-frame) * -1);
	}
}

.perspective {
	perspective: 1200px;
}

section.slide, summary.slide, article.slide, footer.slide {
	padding: calc(var(--padding-frame) * 2) var(--padding-frame);
	gap: calc(var(--padding-frame) * 2);
}
section.slide.compact, summary.slide.compact, article.slide.compact, footer.slide.compact {
	gap: calc(var(--padding-frame) / 2);
}

section.cover {
	padding: var(--padding-frame) var(--padding-frame);
	justify-content: space-between;
	
	box-sizing: border-box;

	background-repeat: no-repeat;
	background-position: center center;

	@media (max-width: 640px) {
		background-size: 250vw;
		background-position: center 12.5vh;
	}

	position: relative;

	& .header2 {
		min-height: 50vh;
		align-content: center;
		text-align: center;
		
		transform-origin: 50% 50%;
		transform: translateZ(150px) rotateX(8deg) scale(0.925);
	}
}

section.cover#coaching { background-image: url("/projects/coaching/cover.webp"); }
section.cover#voices { background-image: url("/projects/voices/cover.webp"); }
section.cover#qaassignments { background-image: url("/projects/qaassignments/cover.webp"); }
section.cover#alchemy { background-image: url("/projects/alchemy/cover.webp"); }
section.cover#voci { background-image: url("/projects/voci/cover.webp"); }

section.callout {
	flex-direction: column;
	justify-content: center;
	
	min-height: var(--callout-min-height);
	gap: var(--font-body);
	max-width: 48ch;

	line-height: var(--callout-lh);
	/* font-variation-settings: var(--font-callout-p-v); */
	text-align: center;

	& h3 {
		font-size: var(--font-callout-headline);
		/* font-variation-settings: var(--font-callout-headline-v); */
		letter-spacing: var(--font-header3-ls);
		font-weight: var(--font-header3-weight);
		/* text-transform: uppercase; */
	}

	&, p.callout, &.callout p {
		font-size: var(--font-callout-p);
		/* font-variation-settings: var(--font-callout-p-v); */
	}

	& p.note {
		font-size: var(--font-callout-note);
	}
}

section.illustration {
	flex-direction: row;
	flex-wrap: wrap;

	gap: var(--padding-frame) var(--padding-frame);

	& > article {
		min-width: 24ch;
	}
}

section.duo {
	flex-direction: row;
	flex-wrap: wrap;

	gap:0;

	/* DESKTOP 
	flex: 1 2 0;
	flex: 1 2 0;
	*/

	& > section, & > article {
		flex: 1 2 0;
		justify-content: center;		
		min-width: 24ch;
	}

	& > figure {
		flex: 0 1 0;
		align-items: start;
		justify-content: center;
	}
}

.featured {
	background-color: var(--featured-background);
}

.padded {
	padding: var(--padding-frame)  var(--padding-frame);
}

/* —— ARTICLE —— */

article {
	display: flex;
	flex-direction: column;

	gap: var(--font-body);

	max-width: 56ch;
}


/* —— BUTTONS —— */

.button {
	display: inline-flex;
	white-space: nowrap;

	padding-inline: 0.5em;

	border: solid 2px var(--link-color);
	border-radius: 512px;

	color: var(--link-color);
	text-decoration: none;

	&:hover, &:active, .clickable:hover &  {
		background-color: var(--link-color);
		color: white;
	}
}



/* —— GENERAL FONT —— */

.note {
	opacity: 0.5;
}

.header1 {
	font-size: var(--font-header1);
	line-height: var(--font-header1-lh);
	/* font-variation-settings: var(--font-header1-v); */

	color: var(--font-header1-color);
}

.header2 {
	font-size: var(--font-header2);
	line-height: var(--font-header2-lh);
	letter-spacing: var(--font-header2-ls);
	/* font-variation-settings: var(--font-header2-v); */
	text-transform: var(--font-header2-tt);
	color: var(--font-header2-color);
}

.header3, input, button {
	font-size: var(--font-header3);
	line-height: var(--font-header3-lh);
	font-weight: var(--font-header3-weight);
	padding-block: 0.125em;

	& .note {
		line-height: inherit;
	}
}

.header4 {
	font-size: var(--font-header4);
	line-height: var(--font-header4-lh);
	/* font-variation-settings: var(--font-header4-v); */

	h3 + &, p + &, ul + & {
		margin-top: var(--font-body);
	}
}

.header6 {
	font-size: var(--font-header6);
	/* font-variation-settings: var(--font-header6-v); */
	line-height: var(--font-header6-lh);
	letter-spacing: var(--font-header6-ls);
	text-transform: uppercase;
}

/* span {
	line-height: inherit;
} */

nobr {
	line-height: inherit;
}

/* —— SENTENCE —— */

.sentence {
	display: flex;
	flex-wrap: wrap;

	flex-direction: row;
	align-items: center;
	gap: var(--font-body);

	&.centered { justify-content: center; align-content: center;}
}

/* —— LISTS —— */

ul {
	display: flex;
	flex-direction: column;
	gap: calc(var(--font-body) / 2);

	& li { list-style-type: none;	}

	&:not(.clean) li {
		padding-inline-start: 0.675em;
		
		margin-left: -0.325em;

		background-image: 
		url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' width='26' height='28' viewBox='0 0 26 28'><path fill='%233CFF00' d='M11.5155 1.75C11.5155 0.783569 12.2988 0 13.2655 0C14.2323 0 15.0155 0.783569 15.0155 1.75V9.23734C15.0155 10.0071 15.8489 10.4883 16.5155 10.1034L22.9999 6.35956C23.8367 5.87634 24.9071 6.16302 25.3902 7.00014C25.8733 7.83712 25.5867 8.90737 24.7499 9.39058L18.2656 13.1342C17.5989 13.5191 17.5989 14.4814 18.2656 14.8663L24.7493 18.6096C25.5867 19.0928 25.8733 20.163 25.3902 21C24.9071 21.8371 23.8367 22.1238 22.9993 21.6406L16.5155 17.8972C15.8489 17.5123 15.0155 17.9934 15.0155 18.7632V26.25C15.0155 27.2164 14.2323 28 13.2655 28C12.2988 28 11.5155 27.2164 11.5155 26.25V18.7635C11.5155 17.9937 10.6822 17.5126 10.0155 17.8975L3.5323 21.6406C2.6949 22.1239 1.6245 21.8371 1.14143 21.0001C0.658358 20.163 0.944898 19.0928 1.7823 18.6096L8.26605 14.8663C8.93273 14.4814 8.93273 13.5191 8.26606 13.1342L1.78173 9.39058C0.944898 8.90737 0.658358 7.83712 1.14143 7C1.6245 6.16302 2.6949 5.8762 3.53173 6.35956L10.0155 10.103C10.6822 10.4879 11.5155 10.0067 11.5155 9.23693V1.75Z'></path></svg>");
		background-repeat: no-repeat;
		background-position: 0 2px;
	}
}

/* —— GALLERY —— */

section.gallery {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	&.gapped {
		gap: var(--padding-frame);
	}

	&.equal > * {
		flex: 1;
	}

	&.described {
		align-items: baseline;
	}

	& video, & img {
		max-width: calc(100vw - (var(--padding-frame) * 2));
	}

	&.scrollable {
		flex-wrap: nowrap;
		overflow-x: scroll;

		&.overlapping figure {
			margin-inline: -2em;
		}

		& video, & img {
			max-width: calc(100vw - (var(--padding-frame) * 4));
		}
	}

	&.messy {
		align-items: center;

		transform-style: preserve-3d;
		transform-origin: top;
		transform: rotateX(7.5deg);
	}
}

/* —— FIGURE —— */

figure {
	display: flex;
	flex-direction: column;
	gap: calc(var(--font-body) * 2);

	&.gapped {
		gap: var(--padding-frame);
	}

	& figcaption {
		position: relative;
		padding-block-start: var(--font-figcaption);

		font-size: var(--font-figcaption);
		/* font-variation-settings: var(--font-figcaption-v); */
		line-height: var(--font-figcaption-lh);
		/* color: var(--font-body-color-secondary); */

		max-width: 56ch;

		& strong {
			font-weight: var(--font-body-weight);
			line-height: inherit;
		}

		&:before {
			position: absolute;
			top: 0;
			left: 0;

			content: "";

			width: calc(var(--font-body) * 6);
			height: 4px;

			background-color: var(--font-body-color);
		}
	}
}


/* —— PROCESS —— */

ul.process {
	display: flex;
	flex-direction: row;

	align-items: flex-start;

	gap: var(--padding-frame);

	& li {
		display: flex;
		flex-direction: column;
		position: relative;

		flex: 1;	
		gap: var(--font-body);

		& img {
			width: calc(var(--font-body) * 1.5);
		}
	}
}

@media (max-width: 1280px) {
	ul.process {
		flex-direction: column;
		gap: var(--font-body);
		max-width: 64ch;

		& li {
			max-width: 64ch;
			padding-inline-start: calc(var(--font-body) * 2);

			& img {
				width: var(--font-body);
				position: absolute;
				left: calc(var(--font-body) * 0);
			}
		}
	}
}

@media (max-width: 480px) {
	ul.process {gap: calc(var(--font-body) * 2);}
	ul.process li {gap: calc(var(--font-body) * 0.5); padding:0;}
	ul.process li img {position: static;}
}


/* —— QUOTE —— */
quote {
	max-width: 48ch;
	padding: calc(var(--font-body) / 2) var(--font-body);

	position: relative;

	background-color: var(--featured-background);
	border-radius: var(--font-body);

	&:before {
		position: absolute;
		width: 20px;
		height: 20px;
		bottom: 0px;
		left: -5.5px;
		content: "";
		z-index: -1;
		background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 17 17'><path fill='%23E8EAEE' d='M5 10.5C4.49857 13.5086 1.66667 16.3333 0 17C11.4817 17 16.5 11.5 17 0H5.5V4.5C5.5 5.5 5.5 7.5 5 10.5Z'></path></svg>");			
	}
	
}
@media (prefers-color-scheme: dark) {
	quote:before {
		background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 17 17'><path fill='%231C2229' d='M5 10.5C4.49857 13.5086 1.66667 16.3333 0 17C11.4817 17 16.5 11.5 17 0H5.5V4.5C5.5 5.5 5.5 7.5 5 10.5Z'></path></svg>");			
	}
}



/* —— DETAILS —— */
details {
	margin: 0;
	padding: 0;

	& a#additionalExplorations span:before { content: "Open Additional Explorations" }
}

details[open] {
	background-color: var(--featured-background);

	& a#additionalExplorations span:before { content: "Close Additional Explorations" }

	& .button {
		transform: translateZ(32px);
	}
}

/* —— 🐭 —— */


/* —— KEYVALUE —— */

ul.keyvalue {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	gap: 0.25em;
	
	& li {
		display: flex;
		flex-direction: column;

		flex: auto;
		white-space: nowrap;
		margin:0;
		padding: calc(var(--font-body) * 0.675) calc(var(--font-body) * 1.25);
		
		list-style-type: none;
		background-image: none;

		border: solid 2px var(--featured-background);
		/* background-color: var(--featured-background); */
		border-radius: 32em;
		
		
		& h6 {
			font-size: var(--font-header6);
			font-weight: var(--font-header6-weight);
			line-height: var(--font-header6-lh);
			letter-spacing: var(--font-header6-ls);
			text-transform: uppercase;
		}

		& p {
			font-size: var(--font-body);
			line-height: var(--font-figcaption-lh);
			/* white-space: nowrap; */
		}
	}
}

/* —— BUTTONS —— */

.tilted {
	transform: rotateX(15deg);
	transform-style: preserve-3d;

	& .clickable {
		transform-style: preserve-3d;
	}
	
	& .button {
		transition-property: transform;
		/* transition-duration: 256ms; */
		/* transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
		transition-duration: 2.85s;
    transition-timing-function: cubic-bezier(0, 1.65, 0, 1);
		box-sizing: border-box;
	}

	& .clickable:hover .button {
		transform: translateZ(32px);
	}
}

.tilted6 {
	transform: rotateX(6deg);
}

.tilted30 {
	transform: rotateX(30deg);
}

/* 3D hit-test fix: the flat footer plane sits at z=0 and intercepts
   pointer events aimed at the rotateX-tilted nav behind it. */
footer.slide {
	pointer-events: none;
}
footer.slide a.clickable,
footer.slide p {
	pointer-events: auto;
}


/* —— FORM —— */
input.button {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	border: solid 2px var(--featured-background);
	color: var(--font-body);
	
	.clickable:hover &, .clickable &:hover{
		background-color: var(--font-canvas-color);
		border-color: var(--link-color);
		color: var(--link-color);
	}

	&::placeholder {
		color: var(--featured-background);
	}
}

button {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	background-color: inherit;
}


/* ———————————————————————————
NAV PROJECTS
——————————————————————————— */


nav.projects ol {
	display: grid;
	grid-template-columns: 1fr 1fr;

	grid-column-gap: 8vw;
	grid-row-gap: 12vw;

	margin: 4vw;

	list-style-type: none;
}

@media(max-width: 600px) {
	nav.projects ol {
		grid-template-columns: 1fr;
	}
}

nav.projects ol:hover a {
	opacity: 0.5;
}


nav.projects a {
	display: flex;
	flex-direction: column;

	transition: transform 0.125s ease-in-out, opacity 0.125s ease-in-out;

	gap: 0.25em;
	line-height: 125%;
	
	color: var(--link-color);

}

nav.projects ol a:hover {
	opacity: 1;
	text-decoration: none;
	transform: translateY(-0.5em);
}

nav.projects ol a:active {
	opacity: 1;
	text-decoration: none;
	transform: translateY(0em);
}

nav.projects h4 {
	font-weight: var(--font-header4-w);
}

nav.projects p {
	font-weight: var(--font-body-w);
}

/* ———————————————————————————
DISPLAY
——————————————————————————— */


ul.display {
	display: flex;
	flex-direction: row;

	list-style-type: none;
	align-items: center;

	margin: 2em;
	gap: 2em;
}

ul.display li {
	display: flex;
	flex-direction: column;

	text-align: center;

	flex: 1;
	gap: 0.5em;
}

ul.display li img {
	max-width: 100%;
	background-image: none;
}

@media (max-width: 720px) {
	ul.display {
		flex-direction: column;
		margin-bottom: -1em;
	}
}