:root {
--bg: #f4f1ea;
--text: #1f1d1a;
--muted: rgba(31, 29, 26, 0.6);
}

* {
box-sizing: border-box;
}

html {
font-size: 16px;
}

body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: Arial, Helvetica, sans-serif;
}

.homepage {
overflow-x: hidden;
}

/* HEADER */

.site-header {
position: fixed;
top: 2.2rem;
left: 0;
right: 0;
z-index: 20;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 3rem;
}

.site-title,
.site-link {
text-decoration: none;
color: var(--text);
font-size: 0.8rem;
letter-spacing: 0.22em;
line-height: 1;
}

.site-title {
font-weight: 600;
}

.site-nav {
display: flex;
gap: 2rem;
}

.site-title:hover,
.site-link:hover {
opacity: 0.6;
}

/* CANVAS */

.canvas {
position: relative;
width: 100%;
min-height: 160vh;
}

/* ARTWORKS */

.artwork {
position: absolute;
display: block;
text-decoration: none;
color: var(--text);
}

.artwork-image {
display: block;
width: 100%;
height: auto;
transition: transform 0.25s ease;
}

.artwork:hover .artwork-image {
transform: translateY(-6px);
}

/* CAPTIONS */

.artwork-caption {
margin-top: 10px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}

.artwork:hover .artwork-caption {
opacity: 1;
transform: translateY(0);
}

.artwork-title {
margin: 0;
font-size: 0.84rem;
line-height: 1.35;
letter-spacing: 0.03em;
}

.artwork-year {
margin: 0.15rem 0 0 0;
font-size: 0.78rem;
line-height: 1.3;
color: var(--muted);
}

/* POSITIONS — LAPTOP FIRST */

.artwork--sweat-lack {
width: min(42vw, 650px);
left: 10%;
top: 22vh;
}

.artwork--whale {
width: min(28vw, 650px);
right: 12%;
top: 48vh;
}

/* TABLET */

@media (max-width: 1100px) {
.site-header {
padding: 0 2rem;
}

.artwork--sweat-lack {
width: min(38vw, 400px);
left: 9%;
top: 24vh;
}

.artwork--whale {
width: min(23vw, 220px);
right: 10%;
top: 50vh;
}
}

/* MOBILE HOMEPAGE */

@media (max-width: 780px) {
.homepage {
overflow: auto;
}

.site-header {
top: 1.4rem;
padding: 0 1.2rem;
}

.site-title,
.site-link {
font-size: 0.74rem;
letter-spacing: 0.16em;
}

.site-nav {
gap: 1rem;
}

.canvas {
height: auto;
min-height: 100vh;
padding: 6rem 1.2rem 2rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}

.artwork {
position: static;
width: 100%;
max-width: 620px;
margin: 0 auto;
}

.artwork-caption {
opacity: 1;
transform: none;
}
}

/* -------------------- */
/* PROJECT PAGE */
/* -------------------- */

body.project-page {
background: #f4f1ea;
color: #1f1d1a;
}

.project {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 140px 40px 180px;
}

/* intro */

.project-intro {
max-width: 520px;
margin: 0 auto 42px;
}

.project-intro h1 {
margin: 0;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1.25;
}

.project-year {
margin: 10px 0 0 0;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.55;
}

/* text */

.project-text {
max-width: 470px;
margin: 0 auto 110px;
transform: translateX(-24px);
}

.project-text::before {
content: "";
display: block;
width: 42px;
height: 1px;
background: rgba(31, 29, 26, 0.25);
margin-bottom: 24px;
}

.project-text p {
margin: 0;
font-size: 1rem;
line-height: 1.85;
letter-spacing: 0.01em;
}

/* images */

.project-image {
margin-bottom: 120px;
}

.project-image img {
display: block;
width: min(52vw, 640px);
max-width: 100%;
height: auto;
}

/* first image slightly larger */

.project-image:first-of-type img {
width: min(58vw, 720px);
margin-left: auto;
margin-right: auto;
}

/* zig-zag layout */

.project-image:nth-of-type(odd) img {
margin-left: 8%;
margin-right: auto;
}

.project-image:nth-of-type(even) img {
margin-left: auto;
margin-right: 8%;
}

/* mobile */

@media (max-width: 900px) {

.project {
padding: 110px 20px 120px;
}

.project-intro,
.project-text {
max-width: 100%;
transform: none;
}

.project-image img,
.project-image:first-of-type img {
width: 100%;
margin-left: auto;
margin-right: auto;
}

.project-image {
margin-bottom: 60px;
}

}