:root {
  --paper: #f7f5f2;
  --ink: #111;
  --rule: rgba(17,17,17,.8);
  --m: clamp(1.25rem,5vw,5rem);
  --gap: clamp(4.5rem,10vw,9rem);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
body { margin: 0; background: var(--paper); }
img { display: block; width: 100%; height: auto; }
p, h2, figure { margin: 0; }
.catalogue { padding: 0 var(--m); }

.site-header {
  padding: clamp(2rem,6vw,5rem) 0 clamp(4rem,8vw,7rem);
}
.artist {
  font-size: clamp(1.05rem,1.5vw,1.35rem);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.project {
  padding: clamp(2rem,3vw,3rem) 0 calc(var(--gap) * 1.2);
}
.project-meta {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem,7vw,6rem);
  font-size: .72rem;
  opacity: .55;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.project-grid {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(18rem,1.1fr);
  gap: clamp(3rem,9vw,9rem);
  align-items: start;
}
.project h2 {
  max-width: 11ch;
  font-size: clamp(3rem,7vw,7.2rem);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.project-type {
  margin-top: clamp(1.4rem,2vw,2.2rem);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.description {
  max-width: 32rem;
  margin-top: clamp(4rem,8vw,8rem);
  font-size: clamp(1rem,1.25vw,1.22rem);
  line-height: 1.62;
}
.description p + p { margin-top: 1.1em; }
.project-visual {
  justify-self: end;
}
.project-visual img {
  max-height: 78vh;
  object-fit: contain;
  object-position: center top;
}
.square img { aspect-ratio: 1; object-fit: contain; }

/* Taille des visuels liée à la longueur du texte de chaque œuvre. */
.project-emm .project-visual { width: min(100%,45rem); }
.project-monde .project-visual { width: min(94%,38rem); }
.project-australo .project-visual { width: min(82%,34rem); }
.project-menage .project-visual { width: min(86%,35rem); }
.project-pipolaire .project-visual { width: min(96%,39rem); margin-left: 2rem; }

.site-footer {
  min-height: 32vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 1.2rem;
  padding: clamp(3rem,8vw,7rem) 0 clamp(2rem,4vw,4rem);
  font-size: .8rem;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.footer-contact { text-transform: none; }

@media (max-width: 850px) {
  .site-header { padding-bottom: 4rem; }
  .project-grid { grid-template-columns: 1fr; gap: 4rem; }
  .project h2 { max-width: 100%; }
  .description { margin-top: 3rem; }
  .project-visual,
  .project-emm .project-visual,
  .project-monde .project-visual,
  .project-australo .project-visual,
  .project-menage .project-visual,
  .project-pipolaire .project-visual {
    justify-self: end;
  }
  .project-emm .project-visual { width: 100%; }
  .project-monde .project-visual { width: 94%; }
  .project-australo .project-visual { width: 82%; }
  .project-menage .project-visual { width: 86%; }
  .project-pipolaire .project-visual { width: 96%; margin-left: 0; }
  .project-visual img { max-height: none; }
}

@media (max-width: 520px) {
  :root { --m: 1rem; }
  .site-header { padding-top: 2rem; padding-bottom: 3.5rem; }
  .project { padding-top: 1rem; }
  .project-meta { margin-bottom: 2.5rem; }
  .project h2 { font-size: clamp(2.7rem,15vw,4.7rem); }
  .description { font-size: 1rem; }
  .site-footer { min-height: 26vh; }
}

.project-australo .australo-title span { white-space: nowrap; }