* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: #171719;
  color: #eeeae5;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 940px; margin: auto; padding: 84px 48px 100px; }
header {
  max-width: 740px;
  margin: 0 auto 44px;
  padding-bottom: 30px;
  border-bottom: 1px solid #353235;
}
h1 {
  font-size: clamp(32px, 5.1vw, 58px);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 20px;
  text-wrap: balance;
}
.roles { font-size: 16px; line-height: 1.7; margin: 0 0 12px; color: #d3cdd1; }
.tagline { font-size: 13px; line-height: 1.7; color: #bba9b5; margin: 0; }
figure { max-width: 680px; margin: 0 auto 58px; }
#open-art {
  display: block;
  width: 100%;
  border: 7px solid #101011;
  padding: clamp(12px, 2.5vw, 25px);
  background: #29262a;
  box-shadow: 0 0 0 1px #50474e, 0 6px 10px #0007, 0 20px 30px -6px #000c, inset 0 0 0 1px #3b353b;
  cursor: zoom-in;
}
figure img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px #131214; }
article { max-width: 650px; margin: auto; }
article p { font-size: 17px; line-height: 1.85; color: #cec7cc; margin: 0 0 23px; }
article p:first-child { font-size: 22px; line-height: 1.65; color: #eeeae5; margin-bottom: 32px; }
article h2 {
  font-family: 'Outfit', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: .09em;
  margin: 48px 0 12px;
  color: #eeeae5;
  text-wrap: balance;
}
dialog { border: 1px solid #3a343a; padding: 65px 24px 24px; background: #121214; color: #eeeae5; max-width: 96vw; max-height: 96dvh; }
dialog::backdrop { background: #000e; }
dialog img { display: block; max-width: 90vw; max-height: 78dvh; width: auto; height: auto; margin: auto; }
#close { position: absolute; top: 20px; right: 24px; background: none; border: 0; font: 13px Helvetica, Arial, sans-serif; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #d3a6bf; outline-offset: 7px; }
::selection { background: #70556b; color: #fff; }
@media (max-width: 650px) {
  main { padding: 46px 7% 64px; }
  header { padding-bottom: 24px; margin-bottom: 34px; }
  h1 { margin-bottom: 18px; }
  .roles { font-size: 14px; max-width: 320px; }
  .tagline { font-size: 12px; max-width: 300px; }
  figure { margin-bottom: 40px; }
  #open-art { border-width: 5px; }
  article p { font-size: 16px; line-height: 1.8; margin-bottom: 21px; }
  article p:first-child { font-size: 20px; line-height: 1.65; margin-bottom: 28px; }
  article h2 { font-size: 14px; margin-top: 36px; }
  dialog { padding: 60px 10px 15px; }
}