:root {
  --paper: #fbf5ec;
  --cream: #fffaf2;
  --ink: #12382c;
  --muted: #626760;
  --coral: #7773bd;
  --pink: #aaa6e5;
  --green: #12382c;
  --gold: #edf56e;
  --line: rgba(18, 56, 44, .2);
}

.site-header { background: rgba(251, 245, 236, .95); }
.hero-portrait::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(45vw, 520px);
  height: min(49vw, 555px);
  border-radius: 45% 55% 42% 58% / 58% 39% 61% 42%;
  background: var(--gold);
  transform: rotate(5deg);
}
.portrait-blob { z-index: 1; width: min(39vw, 450px); height: min(44vw, 500px); }
.portrait-frame { z-index: 2; box-shadow: 22px 22px 0 var(--gold); }
.contact { color: var(--ink); background: var(--gold); }
.contact .button:hover { box-shadow: 5px 5px 0 var(--coral); }
.behind { background: var(--ink); }
.dialog-close { background: rgba(18, 56, 44, .9); }

.diamond span {
  display: block;
  transform: rotate(-45deg);
  font: 54px Georgia, serif;
  letter-spacing: 0;
}

.comolli-art > span {
  font: 15px Georgia, serif;
  letter-spacing: .17em;
}

.site-header nav { gap: 18px; }
.project-open { display: block; text-decoration: none; }
.original-media img { object-fit: contain; background: #1c1f24; }
.dialog-role { margin: 0; color: #57524e; font-size: 15px; line-height: 1.5; }
.language-switch { display: flex; align-items: center; gap: 6px; }
.language { padding: 4px 2px; border: 0; border-bottom: 2px solid transparent; color: #77716b; background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.language.active { color: #1c1f24; border-bottom-color: #f16b5f; }

@media (max-width: 850px) {
  .language-switch { margin-top: 4px; }
  .hero-portrait::before { width: 365px; height: 410px; }
  .portrait-blob { width: 325px; height: 370px; }
}