/* 1. TOKENS */

:root {
	/* Type scale: Perfect Fourth */
	--size-080: .563rem;
	--size-090: .75rem;
	--size-100: 1rem;
	--size-150: 1.125rem;
	--size-200: 1.333rem;
	--size-300: 1.777rem;
	--size-400: 2.369rem;
	--size-500: 3.157rem;
	--size-700: 5.61rem;

	/* Spacing */
	--space-090: .5rem;
	--space-100: 1rem;
	--space-200: 1.5rem;
	--space-300: 2rem;
	--space-400: 3rem;
	--space-500: 4rem;
	--space-600: 6rem;
	--space-700: 8rem;

	/* Colors */
	--color-page-bg: #fff1cf;
	--color-text: #075b72;
	--color-accent: #dc8044;
	--color-date: #A33058;
	--color-border: #075b72;
	--color-grid: #554d43;
	--color-image-placeholder: #e1c69d;
	--color-image-border: #dc9a30;
	--color-footer-green: #9db88b;
	--color-footer-mid: #dce4c8;

	--masthead-angle: -5deg;

	/* Scaling: rem follows the window width.
	   The canvas is 375px on mobile and 1024px on desktop. */
	--frame: 23.4375rem;
	font-size: clamp(13px, calc(100vw / 23.4375), 24px);

	@media screen and (min-width: 1024px) {
		--frame: 64rem;
		font-size: clamp(16px, calc(100vw / 64), 26px);
	}

	/* Dark mode */
	.dark-mode {
		--color-page-bg: #082a33;
		--color-text: #fff1cf;
		--color-accent: #e8935a;
		--color-date: #f2c14e;
		--color-border: #fff1cf;
		--color-grid: #d8cfbb;
		--color-image-placeholder: #17414b;
		--color-image-border: #dc9a30;
		--color-footer-green: #1c4d47;
		--color-footer-mid: #12383d;
	}
}


/* 2. BASE */

body {
	overflow-x: hidden;
	background-color: var(--color-page-bg);
	color: var(--color-text);
	font-family: "Roboto Slab", serif;
	font-size: var(--size-100);
	line-height: 1.5;
	transition: background-color .3s ease, color .3s ease;

	/* Green fade down the left edge of the interview page */
	&:has(.interview-page) {
		@media screen and (min-width: 1024px) {
			background-image: linear-gradient(to right, var(--color-footer-green), var(--color-page-bg) 17rem);
			background-repeat: no-repeat;
		}
	}
}

main {
	max-width: var(--frame);
	margin-inline: auto;
}

a {
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;

	.dark-mode & {
		opacity: .8;
	}
}

/* color: transparent hides broken-image alt text; remove it once real images are in */
.interview__image,
.interview-page__portrait,
.interview-page__image {
	object-fit: cover;
	color: transparent;
}

button {
	font: inherit;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* 3. TOP BAR */

.top-bar {
	position: absolute;
	inset: 0 0 auto;
	max-width: var(--frame);
	margin-inline: auto;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	padding: var(--space-200) var(--space-300) 0;

	@media screen and (min-width: 1024px) {
		padding: calc(var(--space-300) + var(--space-090)) 4rem 0;
	}
}

/* Three lines drawn as three background gradients */
.top-bar__menu {
	width: var(--size-300);
	height: var(--size-200);
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image:
		linear-gradient(var(--color-accent), var(--color-accent)),
		linear-gradient(var(--color-accent), var(--color-accent)),
		linear-gradient(var(--color-accent), var(--color-accent));
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: 0 0, 0 50%, 0 100%;
	cursor: pointer;

	@media screen and (min-width: 1024px) {
		display: none;
	}
}

.top-bar__logo {
	grid-column: 2;
	justify-self: end;
	padding: .3em .7em;
	background-color: var(--color-text);
	color: var(--color-page-bg);
	font-family: "Advent Pro", "Arial Narrow", sans-serif;
	font-weight: bold;
	letter-spacing: .02em;
	text-transform: uppercase;
	transform: rotate(var(--masthead-angle));
	transition: background-color .2s ease;

	&:hover,
	&:focus-visible {
		background-color: var(--color-accent);
	}

	@media screen and (min-width: 1024px) {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		font-size: var(--size-200);
	}
}

/* Hidden on mobile until the menu button works */
.top-bar__nav {
	display: none;

	@media screen and (min-width: 1024px) {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		display: flex;
		gap: var(--space-400);
		font-weight: bold;
		text-transform: uppercase;
	}
}

/* Nav links: plain text with an underline that draws in on hover */
.top-bar__nav a,
.site-header__nav a {
	padding-bottom: .2em;
	background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 100% / 0 2px;
	transition: background-size .3s ease;

	&:hover,
	&:focus-visible {
		background-size: 100% 2px;
	}
}

/* Color mode button: fixed pill, bottom right. Its text is set by js/scripts.js */
.top-bar__mode {
	position: fixed;
	right: var(--space-200);
	bottom: var(--space-200);
	z-index: 10;
	padding: .3em .7em;
	border: 1px solid var(--color-border);
	background-color: var(--color-page-bg);
	color: var(--color-text);
	font-size: var(--size-090);
	text-transform: uppercase;
	cursor: pointer;
}

.top-bar__menu:focus-visible,
.top-bar__logo:focus-visible,
.top-bar__mode:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}


/* 4. LANDING PAGE: HEADER CARD */

.site-header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--size-090);
	width: fit-content;
	margin: 9.1rem auto 5.4rem;
	padding: var(--size-300);
	border: 1px solid var(--color-border);
	background-color: var(--color-page-bg);
	transform: rotate(var(--masthead-angle));

	@media screen and (min-width: 1024px) {
		gap: var(--size-100);
		margin: 5.1rem auto 5rem;
		padding: var(--size-400);
	}
}

.site-header__nav {
	display: flex;
	gap: var(--space-300);
	font-size: var(--size-080);
	font-weight: bold;
	letter-spacing: .03rem;
	text-transform: uppercase;

	@media screen and (min-width: 1024px) {
		gap: var(--space-400);
		font-size: var(--size-090);
	}
}

.site-header__title,
.site-header__tagline {
	text-align: center;
}

.site-header__title {
	color: var(--color-accent);
	font-family: "Advent Pro", sans-serif;
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .03rem;

	@media screen and (min-width: 1024px) {
		font-size: 4rem;
	}
}

.site-header__tagline {
	color: var(--color-date);
	font-family: "Ubuntu", sans-serif;
	font-size: var(--size-090);

	@media screen and (min-width: 1024px) {
		font-size: var(--size-100);
	}
}


/* 5. LANDING PAGE: COLLAGE */

/* Pulled up behind the header so the lines start above the masthead card.
   If lines.svg is too dark in dark mode, add a light-lined copy and swap it
   in with a .dark-mode .interviews-page rule. */
.interviews-page {
	margin: -19.3rem auto 0;
	padding: 19.3rem 0 0;
	background-image: url("../images/lines.svg");
	background-repeat: repeat-y;
	background-size: 34.45rem auto;
	background-position: 50% 0;

	@media screen and (min-width: 1024px) {
		margin-top: -23.9rem;
		padding: 23.9rem 0 5.9rem;
		background-size: 52.67rem auto;
	}
}

.interviews {
	position: relative;
	height: 55.55rem;
	margin: 6.08rem 0 11.72rem;
	overflow-x: clip;

	@media screen and (min-width: 1024px) {
		height: 52.1rem;
		margin: 8.85rem 0 0;
	}
}

.interview {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: var(--w);
	aspect-ratio: var(--ratio);
}

.interview__link,
.interview__image {
	width: 100%;
	height: 100%;
}

.interview__link {
	position: relative;
	display: block;
	border: 2px solid var(--color-image-border);
	background-color: var(--color-image-placeholder);
	box-shadow: 0 0 0 1px var(--color-border);
}

/* The date is centred on a point (--dx, --dy) and tilted by --dr */
.interview__date {
	position: absolute;
	z-index: 2;
	top: var(--dy);
	left: var(--dx);
	color: var(--color-date);
	font-family: "Advent Pro", sans-serif;
	font-size: var(--size-200);
	line-height: 1;
	white-space: nowrap;
	transform: translate(-50%, -50%) rotate(var(--dr));

	@media screen and (min-width: 1024px) {
		font-size: var(--size-400);
	}
}

/* Per card: position (--x, --y), width (--w), shape (--ratio) and date label */
.interview--one {
	--x: 20.9%; --y: 0rem; --w: 59.5%; --ratio: 288 / 353; --dx: 19%; --dy: 4.5%; --dr: -20deg;

	@media screen and (min-width: 1024px) {
		--x: 49.2%; --y: 0rem; --w: 28.9%; --ratio: 296 / 365; --dx: 19%; --dy: 5%; --dr: -20deg;
		z-index: 4;
	}
}

.interview--two {
	--x: -17.8%; --y: 11.13rem; --w: 60.3%; --ratio: 292 / 353; --dx: 78%; --dy: 94%; --dr: -15deg;

	@media screen and (min-width: 1024px) {
		--x: 21.9%; --y: 4rem; --w: 29%; --ratio: 297 / 506; --dx: 15%; --dy: 3%; --dr: -12deg;
		z-index: 2;
	}
}

.interview--three {
	--x: 56.4%; --y: 18.3rem; --w: 57.8%; --ratio: 280 / 353; --dx: 21%; --dy: 5%; --dr: -15deg;

	@media screen and (min-width: 1024px) {
		--x: 50.9%; --y: 21.5rem; --w: 36.8%; --ratio: 377 / 307; --dx: 84%; --dy: 90%; --dr: -14deg;
		z-index: 3;
	}
}

.interview--four {
	--x: 2.7%; --y: 29.84rem; --w: 73.1%; --ratio: 354 / 286; --dx: 87%; --dy: 80%; --dr: -15deg;

	@media screen and (min-width: 1024px) {
		--x: 12.1%; --y: 20rem; --w: 36.8%; --ratio: 377 / 307; --dx: 14%; --dy: 5%; --dr: -12deg;
		z-index: 3;
	}
}

.interview--five {
	--x: 35.3%; --y: 41.6rem; --w: 72.7%; --ratio: 352 / 287; --dx: 10%; --dy: 84%; --dr: -20deg;

	@media screen and (min-width: 1024px) {
		--x: 28.9%; --y: 35.6rem; --w: 42.2%; --ratio: 432 / 264; --dx: 85%; --dy: 94%; --dr: -15deg;
		z-index: 1;
	}
}


/* 6. INTERVIEW PAGE */

/* 6a. Page and intro */

.interview-page {
	padding: calc(var(--space-700) + var(--space-400) + var(--space-090)) var(--space-300) 0;
	margin-bottom: calc(var(--space-700) + var(--space-500));

	@media screen and (min-width: 1024px) {
		padding: 14.75rem 4rem 0 6.5rem;
		margin-bottom: calc(var(--space-700) * 2 + var(--space-300));
	}
}

.interview-page__intro {
	display: grid;
	grid-template-columns: 40% 1fr;
	column-gap: var(--space-200);
	grid-template-areas:
		"name     name"
		"subtitle subtitle"
		"details  bio"
		"portrait portrait";

	@media screen and (min-width: 1024px) {
		grid-template-columns: 1fr 37.5%;
		column-gap: 0;
		grid-template-areas:
			"name     name"
			"subtitle portrait"
			"details  portrait"
			"bio      portrait";
		align-items: start;
		padding-right: 5.5rem;
	}
}

/* Display type: the name and the pull quotes */
.interview-page__name,
.interview-page__quote-text {
	color: var(--color-accent);
	font-family: "Advent Pro", sans-serif;
	font-weight: 300;
	letter-spacing: .01em;
	line-height: 1.1;
}

.interview-page__name {
	grid-area: name;
	padding-inline: var(--space-100);
	font-size: var(--size-400);
	font-weight: 600;

	@media screen and (min-width: 1024px) {
		font-size: var(--size-700);
	}
}

.interview-page__subtitle {
	grid-area: subtitle;
	margin: var(--space-200) 0 0;
	padding-inline: var(--space-100);

	@media screen and (min-width: 1024px) {
		margin-top: var(--space-400);
		font-size: var(--size-300);
	}
}

.interview-page__details {
	grid-area: details;
	margin: var(--space-500) 0 0;
	padding: 0 var(--space-090) 0 var(--space-100);
	font-family: "Ubuntu", sans-serif;
	font-size: var(--size-090);
	line-height: 1.6;

	@media screen and (min-width: 1024px) {
		margin-top: var(--space-100);
		padding: 0 var(--space-100);
		font-size: var(--size-200);
	}
}

/* Shared body copy: the bio and the answers */
.interview-page__bio,
.interview-page__answer {
	color: var(--color-grid);
	font-family: "Ubuntu", sans-serif;
	font-size: var(--size-090);
	line-height: 1.6;
}

.interview-page__bio {
	grid-area: bio;
	margin: var(--space-500) 0 0;
	padding-inline: var(--space-090) 0;

	@media screen and (min-width: 1024px) {
		max-width: 25rem;
		margin-top: var(--space-600);
		padding-inline: var(--space-100);
		font-size: var(--size-200);
		line-height: 1.45;
	}
}

.interview-page__portrait {
	grid-area: portrait;
	width: 100%;
	margin-top: var(--space-500);
	aspect-ratio: 4 / 5;

	@media screen and (min-width: 1024px) {
		margin-top: var(--space-400);
		aspect-ratio: 11 / 12;
	}
}


/* 6b. Body: questions, projects, quotes */

.interview-page__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-500);
	margin-top: var(--space-500);
	padding-bottom: var(--space-600);
	border-bottom: 1px solid var(--color-accent);

	@media screen and (min-width: 1024px) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-500) var(--space-300);
		margin-top: calc(var(--space-700) + var(--space-600));
		padding-bottom: calc(var(--space-700) + var(--space-100));
		border-bottom: 0;
		background-image: linear-gradient(var(--color-accent), var(--color-accent));
		background-repeat: no-repeat;
		background-position: 40% 100%;
		background-size: 67.5% 1px;
	}
}

/* Desktop: every block spans both columns. A block's placement modifier
   (section 6c) sets --align, --width, --max-width and so on to move it. */
.interview-page__qa,
.interview-page__project,
.interview-page__quote {
	@media screen and (min-width: 1024px) {
		grid-column: 1 / -1;
		justify-self: var(--align, auto);
	}
}

.interview-page__qa {
	@media screen and (min-width: 1024px) {
		max-width: 36rem;
		padding-left: var(--space-100);
		border-left: 3px dotted color-mix(in srgb, var(--color-border) 35%, transparent);
	}
}

.interview-page__question {
	font-size: var(--size-100);
	font-weight: 600;
	line-height: 1.3;

	@media screen and (min-width: 1024px) {
		font-size: var(--size-150);
	}
}

.interview-page__answer {
	margin: var(--space-100) 0 0;

	@media screen and (min-width: 1024px) {
		font-size: var(--size-100);
		line-height: 1.5;
	}
}

/* Desktop: image in the right column, caption turned sideways on its left */
.interview-page__project {
	@media screen and (min-width: 1024px) {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: var(--space-090);
		width: var(--width, auto);
		margin-right: var(--margin-right, 0);
	}
}

.interview-page__image {
	width: 100%;
	aspect-ratio: 6 / 7;
	background-color: var(--color-image-placeholder);

	@media screen and (min-width: 1024px) {
		grid-column: 2;
		grid-row: 1;
		padding: var(--space-090);
		border: 1px solid var(--color-grid);
		background-clip: content-box;
		aspect-ratio: var(--image-ratio, 6 / 7);
	}
}

.interview-page__caption {
	margin: var(--space-100) 0 0;
	color: var(--color-date);

	@media screen and (min-width: 1024px) {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		margin: 0;
		white-space: nowrap;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}
}

/* The quote's margins add to the gap, so it gets more room than the rest */
.interview-page__quote {
	margin: var(--space-200) 0;
	text-align: center;

	@media screen and (min-width: 1024px) {
		margin: var(--space-400) 0;
		max-width: var(--max-width, none);
		text-align: var(--text-align, center);
	}
}

.interview-page__quote-text {
	font-size: var(--size-400);

	@media screen and (min-width: 1024px) {
		font-size: var(--size-500);
	}
}


/* 6c. Desktop placement, in page order 
   Modifier classes in the HTML.
   --align = side of the page, --width / --max-width = the block size,
   --image-ratio = the shape of a project's image. */

.interview-page__project--right { --align: end;   --width: 59%; --image-ratio: 3 / 2; }
.interview-page__project--left  { --align: start; --width: 36%; --image-ratio: 2 / 3; }
.interview-page__project--wide  { --align: end;   --width: 81%; --image-ratio: 4 / 3; --margin-right: 2.3%; }
.interview-page__project--tall  { --align: end;   --width: 54%; --image-ratio: 4 / 5; --margin-right: 5.7%; }

.interview-page__quote--right   { --align: end;   --max-width: 75%; --text-align: right; }
.interview-page__quote--left    { --align: start; --max-width: 92%; --text-align: left; }

/* Two in a row sit side by side, touching in the middle */
.interview-page__project--half {
	--align: end;
	--width: 93%;
	--image-ratio: 6 / 5;

	@media screen and (min-width: 1024px) {
		grid-column: auto;
	}
}

.interview-page__project--half + .interview-page__project--half {
	--align: start;
}


/* 7. FOOTER */

.site-footer {
	position: relative;
	z-index: 6;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--space-100);
	padding-block: var(--space-400) var(--space-100);
	padding-inline: max(var(--space-300), calc((100% - var(--frame)) / 2 + var(--space-300)));
	background: linear-gradient(to right, var(--color-page-bg) 55%, var(--color-footer-mid) 85%, var(--color-footer-green) 100%);

	@media screen and (min-width: 1024px) {
		padding-block: var(--space-500);
		padding-inline: max(var(--space-200), calc((100% - var(--frame)) / 2 + 5.5rem));
	}
}

.site-footer__contact {
	align-self: start;
	justify-self: start;
	padding: .3em .7em;
	background-color: var(--color-accent);
	color: var(--color-page-bg);
	font-weight: 500;
	transition: background-color .2s ease;

	&:hover,
	&:focus-visible {
		background-color: var(--color-text);
	}
}

.site-footer__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-200);
	font-size: var(--size-090);
	text-transform: uppercase;

	@media screen and (min-width: 1024px) {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(3, auto);
		gap: var(--space-200) var(--space-500);
		margin-right: var(--space-300);
		font-size: var(--size-100);
	}
}

.site-footer__nav a {
	font-weight: 400;
	letter-spacing: .03rem;
}

.site-footer__copyright {
	grid-column: 1 / -1;
	margin: var(--space-300) 0 0;
	padding-bottom: var(--space-100);
	border-bottom: 1px solid var(--color-accent);
}