/* -----------------------------------------------------
Variables
-------------------------------------------------------- */

:root {
	--color-gray: #f5f5f5;
	--color-project-darkroom: #301070;
	--color-project-jcs: #ffd24c;
	--color-project-stacker: #3478f6;
	--color-accent-project: var(--color-gray); /* Reset inline per page, if neccessary */
	--gutter: 0.75rem;
	--border-thickness: 1.5px
}

/* -----------------------------------------------------
Reset
-------------------------------------------------------- */

html {
	box-sizing: border-box;
	font-size: 16px;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, video {
	margin: 0;
	padding: 0;
}

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

video {
	display: block; /* Gets rid of padding at bottom */
}

/* -----------------------------------------------------
Page structure
-------------------------------------------------------- */

html {
	height: 100%; /* For sticky footer */
}

main, .site {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--gutter);
	row-gap: 0; /* Control the vertical rhythm with margins and padding, instead */
	justify-items: stretch;
	margin-left: var(--gutter);
	margin-right: var(--gutter);
}

figure {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
	justify-items: stretch;
}

figure > div, /* Default figure grid to a single column */
.cols-1,
.cols-1-to-2,
.cols-1-to-3,
.ux-solution {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
	justify-items: stretch;
}

.cols-2,
.cols-2-to-3,
.cols-2-to-4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gutter);
	justify-items: stretch;
}

.cols-3,
.cols-3-to-4 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gutter);
	justify-items: stretch;
}

/* Can apply to images in a container or a single image. Need some better thought on this one. */
.phone-portrait img, img.phone-portrait {
	height: calc(100vh - 2 * var(--gutter));
	max-height: 1000px; /* Half of actual image size. Should I set this in html instead? */
	object-fit: contain;
}

video {
	/* height: calc(100vh - 2 * var(--gutter)); */
	max-height: min(100%, calc(100vh - 2 * var(--gutter)));
	background: var(--color-project-darkroom);
}

footer.site {
	position: sticky; /* For sticky footer */
	top: 100vh; /* For sticky footer */
}

/* -----------------------------------------------------
Typography, color, vertical rhythm
-------------------------------------------------------- */

body {
	background: #ffffff;
	color: #222222;
	color: black;
	font-family: neue-haas-grotesk-text, Helvetica, sans-serif;
	/* font-family: ibm-plex-serif; */
	font-weight: 400;
	line-height: 1.5;
	--baseline-adjustment: 0.375em; /* Half of the difference between line-height and font's cap height; needs recalculating whenever font-family or line-height changes */
	/* font-style: italic; */
}

h1, h2, h3, h4, h5, h6, strong, .figure-heading {
	font-weight: 500;
	font-weight: 600;
	font-weight: 700;
	font-weight: 800;
	color: black;
}

h1 {
	font-size: 1.25rem;
	/* text-transform: uppercase; */
	margin-top: calc(2.25rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

h2 {
	font-size: 1.25rem;
	/* text-transform: uppercase; */
	margin-top: 5.25rem;
	box-shadow: inset 0 calc(0px + var(--border-thickness)) 0 black,
				inset 0 calc(0px - var(--border-thickness)) 0 black;
	box-shadow: inset 0 calc(0px + var(--border-thickness)) 0 black;
	padding-top: calc(2.25rem - var(--baseline-adjustment) + var(--border-thickness));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
	/* padding-bottom: calc(0.75rem - var(--baseline-adjustment) + var(--border-thickness)); */
}

h3 {
	font-size: 1rem;
	margin-top: calc(2.25rem - var(--baseline-adjustment));
	/* margin-top: calc(5.25rem - var(--baseline-adjustment)); */
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

h4 {
	font-size: 1rem;
	margin-top: calc(2.25rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

h5 {
	font-size: 1rem;
	margin-top: calc(1.5rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

h6 {
	font-size: calc(1rem * 5 / 6);
	font-size: 1rem;
	margin-top: calc(1.5rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

p {
	margin-top: calc(2.25rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

h1 + p {
	/* font-size: 1.25rem; */
}

h3 + p,
h4 + p {
	/* margin-top: calc(1.5em - var(--baseline-adjustment)); */
}

h5 + p,
h6 + p {
	margin-top: calc(0.75rem - var(--baseline-adjustment));
}

ol,
ul {
	padding-left: 2.25rem;
	margin-top: 0; 	/* Don't subtract baseline-adjustment, or else there's weird margin effects, I think due to being in a grid */
	margin-bottom: 0; /* Don't subtract baseline-adjustment, or else there's weird margin effects, I think due to being in a grid */
}

li {
	margin-top: calc(1.5rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

li:first-child {
	margin-top: calc(2.25rem - var(--baseline-adjustment));
}

figcaption {
	font-size: calc(1rem * 5 / 6);
	/* font-size: 0.8rem; */
	/* line-height: 1.65; */
	/* font-style: italic; */
	/* font-weight: 300; */
	margin-top: calc(0rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
	/* color: #ff3c00; */
}

figure,
main > div {
	margin-top: 2.25rem;
	/* margin-top: 5.25rem; */
}

figure + figure,
figure + p,
figure + h3 {
	/* margin-top: 5.25rem; */
}

figure + figure {
	margin-top: 5.25rem;
}

a {
	color: inherit;
	text-decoration: none;
}

main a {
	color: black;
	/* font-weight: 500; */
	text-decoration: underline;
	text-underline-offset: 0.075em;
}

figcaption a {
	font-weight: 400;
}

/* The "a:hover h1" part below is to deal with the linked div in the footer. Is there a cleaner solution for this? */
a:hover, a:hover h1 {
	color: #ff4136;
}

.splash {
	/* font-weight: 500; */
	font-weight: 700;
	/* font-size: 2.25rem; */
	/* font-size: 24px; */
	/* font-size: calc(24px + (36 - 24) * ((100vw - 275px) / (600 - 375))); */
	font-size: clamp(1.5rem, (24px + (36 - 24) * (100vw - 375px) / (550 - 375)), 2.25rem);
	line-height: 1.25;
	/* line-height: 39px; */
	margin-top: calc(3.75rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

.ux-personas > div {
	background: var(--color-gray);
	padding: var(--gutter);
	padding: 2.25rem;
}

.ux-personas h4 {
	margin-top: calc(0rem - var(--baseline-adjustment));
}

.ux-personas ul {
	text-indent: -1.5em;
	list-style: none;
	margin-top: calc(1.5rem - var(--baseline-adjustment));
}

.ux-personas ul li {
	margin-top: calc(0.75rem - var(--baseline-adjustment));
}

.temp-persona {
	border-left: 3px solid black;
	padding-left: calc(1.5em - 3px);
	font-style: italic;
}

.ux-solution {
	/* margin-top: 5.25rem; */
}  

.ux-solution + .ux-solution {
	margin-top: 5.25rem;
}  

.ux-solution header p {
	font-weight: 500;
	color: black;
	/* text-transform: uppercase; */
	font-size: calc(1rem * 5 / 6);
}

img.white {
	box-shadow: 0 0.25rem 2rem #dddddd;	/* Placeholder */
}

/* This is cool! Great for drawings and collages that I don't want to crop real tightly. Need to figure out a standard. All percentages are based on the width of the parent item. */
img.temp-negative-margin { 
	/* max-width: 110%; */
	/* margin: -5%; */
}

/* Can apply to images in a container or a single image. */
.background-gray img, img.background-gray {
	background: var(--color-gray);
	/* box-shadow: 0 0.25rem 2rem #dddddd; */
}

/* Can apply to images in a container or a single image. */
.background-project img, img.background-project {
	background: var(--color-accent-project);
}

.jcs-instructions > div {
	gap: 3px 0;
}

.site {
	color: black;
}

header.site {
	display: flex;
	justify-content: space-between;
	padding-top: 1.5rem;
	box-shadow: inset 0 calc(0px - var(--border-thickness)) 0 black;
	padding-bottom: calc(0.75rem + var(--border-thickness));
	/* padding-bottom: calc(1.5rem + var(--border-thickness)); */
}

header.site > * {
	display: flex;
	gap: var(--gutter);
}

header.site * {
	/* font-weight: 500; */
	font-weight: 700;
	font-size: 1rem;
	/* font-size: calc(1rem * 5 / 6); */
}

header.site p {
	margin-top: calc(0.75rem - var(--baseline-adjustment));
}

footer.site {
	margin-top: calc(5.25rem + var(--border-thickness));
	box-shadow: 0 calc(0px - var(--border-thickness)) 0 black;
	padding-bottom: 5.25rem;
}

footer.site p, footer.site h1 {
	font-size: 0.75rem;
	padding-left: 1.5em;
	text-indent: -1.5em;
}

footer.site p {
	margin-top: calc(0.75rem - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

footer.site h1 {
	margin-top: calc(1.5em - var(--baseline-adjustment));
	margin-bottom: calc(0rem - var(--baseline-adjustment));
}

/* -----------------------------------------------------
Media Queries
-------------------------------------------------------- */

@media (min-width: 984px) { /* 1248px */

	:root {
		--gutter: 1rem;
		--gutter: 15px;
		/* font-size: 18px;	 */
	}

	main, .site {
		max-width: 960px;
		grid-template-columns: repeat(12, 1fr);
		margin-left: auto;
		margin-right: auto;
	}

	main > * {
		grid-column: 4 / -2; /* Default everything to "narrow", unless overridden below */
		--overhang: calc((100% - 7 * var(--gutter))/8 + var(--gutter));
	}

	figure.narrow {
		grid-column: 1 / -2;
		grid-template-columns: repeat(11, 1fr);
	}

	figure.narrow > div {
		grid-column: 4 / -1;
	}

	figure.narrow > figcaption {
		grid-column: 1 / 4;
		grid-row-start: 1;
		position: sticky;
		align-self: start;
		top: 2.25rem;
		padding-right: 0.5rem;
	}

	.wide {
		grid-column: 1 / -1;
	}

	figure.wide {
		grid-template-columns: repeat(2, 1fr); /* This defines the space for the figcaption */
	}

	figure.wide > div {
		grid-column: 1 / -1;
	}

	.extra-narrow {
		grid-column: 7 / -1;
	}

	figure.extra-narrow {
		grid-column: 1 / 7;
		grid-row-start: auto;
	}

	.cols-1-to-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.cols-1-to-3, 
	.cols-2-to-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.cols-2-to-4, 
	.cols-3-to-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	main > h1 {
		grid-column: 1 / 4;
	}

	main > h1, main > h1 + p {
		font-size: 1.25rem;
		line-height: 1.35;
		/* font-size: 1.3333rem; */
		/* line-height: 1.3125; */
		/* font-size: 2.25rem; */
		/* line-height: 2.5rem; */
		/* font-weight: 700; */
		/* font-size: calc(1rem * 4 / 3); */
	}

	main > h1 + p {
		/* grid-column-end: -1; */
	}

	main > h1 + * {
		margin-top: calc(2.25rem - var(--baseline-adjustment));
	}

	main > h2 {
		grid-column: 1 / 4;
		font-size: 1rem;
		padding-top: calc(2.25rem - var(--baseline-adjustment) + var(--border-thickness));
		box-shadow: inset 0 calc(0px + var(--border-thickness)) 0 black;
		padding-bottom: 0;
		margin-bottom: calc(0rem - var(--baseline-adjustment));
		margin-right: calc(0px - var(--gutter));
		padding-right: var(--gutter);
		padding-right: 2.25rem;
	}

	main > h2 + * {
		margin-top: 5.25rem;
		box-shadow: inset 0 calc(0px + var(--border-thickness)) 0 black;
		padding-top: calc(2.25rem - var(--baseline-adjustment) + var(--border-thickness));
		margin-right: calc(0px - var(--overhang));
		padding-right: var(--overhang);
	}

	figcaption::before, figcaption::after {
		font-style: normal;
		/* font-weight: 700; */
		/* font-weight: 800; */
		/* color: #555555; */
	}

	figure.wide > figcaption::before {
		content: "↑ ";
		/* content: "⬆ "; */
		content: "[↑] ";
		content: "[↑]";
		margin-right: 0.375em;
	}

	figure.narrow > figcaption::after {
		content: " →";
		/* content: " ⮕" */
		content: " [→]";
	}

	.project-info {
		grid-template-columns: repeat(2, 1fr);
	}

	.ux-solution {
		grid-template-columns: repeat(2, 1fr);
	}

	.ux-solution > :first-child {
		position: sticky;
		align-self: start;
		top: 2.25rem;
		margin-top: -2.25rem;
		padding-right: 1rem;
	}  

	.splash {
		/* grid-column: 4 / -2; */
		/* grid-column: 2 / -2; */
	}

}