:root {
  color-scheme: dark;
  background: #232628;
  color: #dfdfd8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 2rem 0;
  display: grid;
  gap: 2.5rem;
}
.intro { align-self: center; min-width: 0; }
.intro > p, .intro > nav { width: min(100%, 420px); text-align: center; }
.intro > nav { justify-content: center; }
.mark { display: block; width: min(100%, 420px); height: auto; margin: 0; }
h1 { margin: 0 0 1.5rem; line-height: 1; }
p { margin: 0; color: #bfc4bb; font-size: 1.125rem; line-height: 1.7; }
nav { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; }
a { color: #afc9bc; text-decoration: underline; text-underline-offset: 5px; }
nav a { display: inline-flex; min-height: 44px; align-items: center; }
a:hover { color: #cbded3; }
a:focus-visible { outline: 2px solid #cbded3; outline-offset: 5px; }
figure { margin: 0; min-width: 0; }
.engraving { display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover; object-position: 50% 65%; border: 1px solid #69736b; }
figcaption { margin-top: .6rem; text-align: right; font-size: .8rem; line-height: 1.6; }
figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: #a5aea3; text-underline-offset: 3px; }
@media (min-width: 780px) {
  main { min-height: 100svh; width: min(1120px, calc(100% - 5rem)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5rem; padding: 3.5rem 0; }
  .engraving { height: min(60vh, 540px); max-height: none; }
}