/*
Theme Name: Provdes
Theme URI: https://provdes.com/
Description: Custom child theme for Provdes.
Author: Sam Cranwell
Template: twentytwentyfive
Version: 0.1.0
Text Domain: provdes
*/


/* ==========================================================================
   PROVDES / FOUNDATION
   ========================================================================== */

:root {
	--provdes-paper: #f1f0eb;
	--provdes-ink: #161616;
	--provdes-muted: #777772;
	--provdes-rule: #c9c8c2;
	--provdes-signal: #ff5e57;

	--provdes-page-gutter: clamp(20px, 3vw, 48px);
	--provdes-section-gap: clamp(64px, 8vw, 140px);
	--provdes-grid-gap: clamp(16px, 2vw, 32px);

	--provdes-mono:
		"SFMono-Regular",
		Consolas,
		"Liberation Mono",
		monospace;

	--provdes-sans:
		Arial,
		Helvetica,
		sans-serif;

	--provdes-display:
		Arial,
		Helvetica,
		sans-serif;
}


html {
	background: var(--provdes-paper);
}

body {
	background: var(--provdes-paper);
	color: var(--provdes-ink);
	font-family: var(--provdes-sans);
	-webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   BASE
   ========================================================================== */

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

a {
	color: inherit;
}

img {
	max-width: 100%;
}


/* ==========================================================================
   PROJECT ARCHIVE
   ========================================================================== */

.provdes-project-archive {
	width: 100%;
	max-width: none;
	margin: 0;
	padding:
		clamp(32px, 4vw, 64px)
		var(--provdes-page-gutter)
		120px;
}


/* Archive header */

.provdes-project-archive__header {
	border-top: 1px solid var(--provdes-ink);
	padding-top: 10px;
	margin-bottom: clamp(56px, 8vw, 120px);
}

.provdes-project-archive__eyebrow {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--provdes-grid-gap);

	font-family: var(--provdes-mono);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.provdes-project-archive__eyebrow > span:first-child {
	grid-column: 1 / span 5;
}

.provdes-project-archive__eyebrow > span:last-child {
	grid-column: 9 / -1;
	text-align: right;
}


/* ==========================================================================
   INDIVIDUAL PROJECT
   ========================================================================== */

.provdes-project {
	position: relative;
	padding:
		clamp(24px, 3vw, 42px)
		0
		var(--provdes-section-gap);

	border-top: 1px solid var(--provdes-ink);
}


/* --------------------------------------------------------------------------
   Top metadata
   -------------------------------------------------------------------------- */

.provdes-project__topline {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--provdes-grid-gap);

	margin-bottom: clamp(32px, 5vw, 72px);

	font-family: var(--provdes-mono);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.provdes-project__id {
	grid-column: 1 / span 2;
}

.provdes-project__state {
	grid-column: 9 / -1;

	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.provdes-project__status {
	color: var(--provdes-signal);
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Main 12-column composition
   -------------------------------------------------------------------------- */

.provdes-project__body {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--provdes-grid-gap);
	align-items: start;
}


/* Text area */

.provdes-project__information {
	grid-column: 1 / span 5;
	position: relative;
	z-index: 2;
}


/* Image area */

.provdes-project__figure {
	grid-column: 6 / -1;
	position: relative;
}


/* Alternate project layout */

.provdes-project:nth-child(even) .provdes-project__information {
	grid-column: 8 / -1;
	order: 2;
}

.provdes-project:nth-child(even) .provdes-project__figure {
	grid-column: 1 / span 7;
	order: 1;
}


/* ==========================================================================
   PROJECT TITLE
   ========================================================================== */

.provdes-project__title {
	margin:
		0
		0
		clamp(50px, 8vw, 120px);

	font-family: var(--provdes-display);
	font-size: clamp(60px, 8.8vw, 170px);
	font-weight: 700;
	line-height: 0.78;
	letter-spacing: -0.07em;
	text-transform: uppercase;

	overflow-wrap: normal;
	word-break: normal;
}

.provdes-project__title a {
	color: inherit;
	text-decoration: none;
}

.provdes-project__title a:hover {
	color: var(--provdes-signal);
}


/* ==========================================================================
   CLASSIFICATION
   ========================================================================== */

.provdes-project__classification {
	margin-bottom: clamp(40px, 5vw, 72px);

	font-size: clamp(14px, 1.15vw, 18px);
	line-height: 1.15;
	text-transform: uppercase;
}

.provdes-project__classification > div:not(.provdes-project__label) {
	margin-bottom: 2px;
}

.provdes-project__label {
	display: block;

	margin-bottom: 10px;

	font-family: var(--provdes-mono);
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--provdes-muted);
}


/* ==========================================================================
   ENTRIES / UPDATED
   ========================================================================== */

.provdes-project__meta-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--provdes-grid-gap);

	padding-top: 12px;
	margin-bottom: 36px;

	border-top: 1px solid var(--provdes-rule);
}

.provdes-project__meta-grid > div {
	display: flex;
	flex-direction: column;
}

.provdes-project__meta-grid .provdes-project__label {
	margin-bottom: 6px;
}

.provdes-project__meta-grid span:last-child {
	font-family: var(--provdes-mono);
	font-size: 12px;
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.provdes-project__description {
	max-width: 38em;

	font-size: clamp(15px, 1vw, 18px);
	line-height: 1.55;
}

.provdes-project__description p {
	margin-top: 0;
}


/* ==========================================================================
   OPEN LINK
   ========================================================================== */

.provdes-project__open {
	display: inline-block;

	margin-top: 32px;
	padding-bottom: 4px;

	border-bottom: 1px solid currentColor;

	font-family: var(--provdes-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.provdes-project__open:hover {
	color: var(--provdes-signal);
}


/* ==========================================================================
   FIGURE / IMAGE
   ========================================================================== */

.provdes-project__figure a {
	display: block;
	overflow: hidden;
}

.provdes-project__image {
	display: block;
	width: 100%;
	height: auto;

	transition: transform 350ms ease;
}

.provdes-project__figure:hover .provdes-project__image {
	transform: scale(1.012);
}


/* Figure label */

.provdes-project__figure-label {
	position: absolute;
	left: 0;
	bottom: 0;

	padding: 9px 12px;

	background: var(--provdes-paper);
	color: var(--provdes-ink);

	font-family: var(--provdes-mono);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}


/* Revision */

.provdes-project__revision {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);

	font-family: var(--provdes-mono);
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--provdes-muted);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

	.provdes-project__information {
		grid-column: 1 / span 5;
	}

	.provdes-project__figure {
		grid-column: 6 / -1;
	}

	.provdes-project:nth-child(even) .provdes-project__information {
		grid-column: 8 / -1;
	}

	.provdes-project:nth-child(even) .provdes-project__figure {
		grid-column: 1 / span 7;
	}

	.provdes-project__title {
		font-size: clamp(52px, 9vw, 110px);
	}
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

	.provdes-project-archive {
		padding-left: 18px;
		padding-right: 18px;
	}

	.provdes-project-archive__eyebrow {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.provdes-project-archive__eyebrow > span:first-child,
	.provdes-project-archive__eyebrow > span:last-child {
		grid-column: auto;
	}

	.provdes-project__topline {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.provdes-project__id,
	.provdes-project__state {
		grid-column: auto;
	}

	.provdes-project__state {
		justify-content: space-between;
	}

	.provdes-project__body {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.provdes-project__information,
	.provdes-project__figure,
	.provdes-project:nth-child(even) .provdes-project__information,
	.provdes-project:nth-child(even) .provdes-project__figure {
		width: 100%;
		order: initial;
	}

	.provdes-project__title {
		font-size: clamp(58px, 18vw, 100px);
		line-height: 0.8;
		margin-bottom: 48px;
	}

	.provdes-project__figure {
		order: 2 !important;
	}

	.provdes-project__information {
		order: 1 !important;
	}

	.provdes-project__meta-grid {
		max-width: none;
	}

	.provdes-project__description {
		max-width: none;
	}
}