:root {
  color-scheme: light;
  background: #faf9f6;
  color: #292824;
  font-family: Georgia, 'Times New Roman', serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 100px 56px 72px;
  display: grid;
  grid-template-columns: minmax(0, 630px) minmax(0, 230px);
  column-gap: 80px;
}
.intro { grid-column: 1; }
h1 {
  margin: 0 0 20px;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.6px;
}
p { margin: 0 0 22px; font-size: 16px; line-height: 1.75; }
.intro p { color: #66635b; margin-bottom: 0; }
#age { display: inline-block; font: inherit; white-space: nowrap; }
.age-digit { display: inline-block; width: 1ch; text-align: center; }
.age-decimal { display: inline-block; width: 0.5ch; text-align: center; }
.biography { grid-column: 1; margin-top: 42px; }
.biography > p:last-child { margin-bottom: 0; }
.juno-story { position: relative; }
a {
  color: inherit;
  text-decoration-color: #b4afa1;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:focus-visible { outline: 2px solid #66635b; outline-offset: 4px; border-radius: 1px; }
@media (hover: hover) { a:hover { text-decoration-color: currentColor; } }
.engraving {
  position: absolute;
  left: calc(100% + 100px);
  top: 0;
  width: 190px;
  margin: 0;
  pointer-events: none;
  user-select: none;
}
.engraving img { display: block; width: 100%; height: auto; aspect-ratio: 183.061737 / 229.441803; mix-blend-mode: multiply; }
footer { grid-column: 1; margin-top: 42px; }
footer p { font-size: 14px; color: #66635b; margin-bottom: 0; }
@media (max-width: 800px) {
  .page { padding: 64px 32px; column-gap: 36px; grid-template-columns: minmax(0, 1fr) 155px; }
  .engraving { left: calc(100% + 46px); width: 135px; }
}
@media (max-width: 600px) {
  .page { display: flex; flex-direction: column; padding: 46px 26px 44px; }
  h1 { font-size: 24px; margin-bottom: 18px; }
  p { font-size: 16px; line-height: 1.7; }
  .engraving { position: static; width: 140px; margin: 24px auto 32px; }
  .biography { margin-top: 32px; }
  footer { margin-top: 32px; }
}