*{box-sizing:border-box}body{margin:0;background:white;color:#141414;font-family:Didot,'Bodoni 72','Times New Roman',serif}main{height:100vh;height:100svh;min-height:320px;display:grid;place-items:center}main:has(.mark) { height: auto; min-height: 100svh; padding: 16px; }
.mark {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 4vh, 44px);
  width: min(100%, 460px);
  padding: clamp(32px, 5vh, 54px) clamp(24px, 6vw, 64px);
  border: .5px solid #c59a42;
  border-radius: 12px;
}
img{display:block;width:clamp(136px,16vw,202px);height:auto}nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  width: max-content;
}
a{color:inherit;text-decoration:none}nav a{padding:10px 0}a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}.inside{text-align:center;padding:24px}.inside h1{font-size:48px;font-weight:400}.inside a{display:inline-block;margin-top:24px}.inside p{font-size:20px}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-300.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
body.montserrat nav a, body.montserrat .menu-caption {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}

@font-face {
  font-family: 'classico';
  src: url('/fonts/classico.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
body.classico nav a {
  font-family: 'classico', serif;
  font-weight: 700;
}

@font-face {
  font-family: 'geometrico';
  src: url('/fonts/geometrico.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}
body.geometrico nav a {
  font-family: 'geometrico', sans-serif;
  font-weight: 600;
}

nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: calc(clamp(23px, 3vw, 35px) * var(--label-scale));
  line-height: 1.12;
  -webkit-text-stroke: .0175em #c59a42;
  paint-order: stroke fill;
  text-shadow: 0 1px 3px rgb(0 0 0 / 16%);
  transition: color 140ms ease;
}
.name-link { flex-direction: column; }
.name-link > span {
  -webkit-text-stroke-width: .0175em;
  line-height: .78;
  line-height: calc(1cap + .0175em + 2px);
}

@media (max-height: 650px) {
  .mark img { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  nav a { transition: none; }
}


.menu-caption {
  text-shadow: 0 1px 2px rgb(0 0 0 / 16%);
  padding-bottom: 5px;
  position: relative;
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font: 600 11px/1.4 system-ui, sans-serif;
  letter-spacing: normal;
  color: #3a3223;
}

.mark nav a { position: relative; text-decoration: none; }
.mark nav a:is(:hover, :focus-visible, :active)::after {
  content: "";
  position: absolute;
  inset: auto 0 4px;
  height: 1px;
  background: currentColor;
  pointer-events: none;
}

.name-link .surname {
  display: flex;
  align-self: stretch;
  justify-content: space-between;
}


.menu-caption::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: #000;
  transform: scaleY(.5);
  transform-origin: bottom;
}
