: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 */

@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;
}
}