@font-face {
  font-family: "Inter Home";
  src: url("./inter-home-1f940873971f.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #efefef;
  --ink: #565656;
  --page-side: min(4.7395833333cqw, 91px);
  --page-top: min(9.5833333333cqw, 184px);
  --page-bottom: min(6.25cqw, 120px);
  --section-gap: min(2.2395833333cqw, 43px);
  --name-gap: min(4.0625cqw, 78px);
  --header-size: min(1.6666666667cqw, 32px);
  --caption-size: min(.8333333333cqw, 16px);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  container-type: inline-size;
  color: var(--ink);
  background: var(--paper);
  font-family: "Inter Home", Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--section-gap);
  width: min(100%, 1920px);
  height: max(100svh, min(56.25cqw, 1080px));
  margin-inline: auto;
  padding: var(--page-top) var(--page-side) var(--page-bottom);
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--header-size);
  line-height: 1.21875;
}

.name {
  display: flex;
  align-items: center;
  gap: var(--name-gap);
  margin: 0;
  font: inherit;
}
.surname { width: 1.875em; font-weight: 600; }
.given-name { font-weight: 300; white-space: pre; }
.studio { margin: 0; font-weight: 400; text-align: right; }

.work {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--section-gap);
  width: min(32.96875cqw, 633px);
  margin: 0;
}
.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
figcaption {
  margin: 0;
  font-size: var(--caption-size);
  font-weight: 200;
  line-height: 1.1875;
  text-align: right;
  white-space: pre;
}

.registration {
  position: absolute;
  inset: auto var(--page-side) 22px;
  text-align: center;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
.registration a { color: var(--ink); text-decoration: none; }
.registration a:hover { text-decoration: underline; }
.registration a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

@media (max-width: 900px) and (min-width: 601px) {
  :root { --header-size: 20px; --caption-size: 12px; }
}

@media (max-width: 600px) {
  :root {
    --page-side: 24px;
    --page-top: 64px;
    --page-bottom: 88px;
    --section-gap: 46px;
    --name-gap: 16px;
    --header-size: 16px;
    --caption-size: 12px;
  }
  .canvas { height: auto; min-height: 100svh; }
  .work { width: 100%; gap: 24px; }
  .surname { width: auto; }
  .registration { bottom: 22px; font-size: 11px; }
}