:root {
  --paper: #f5f1e7;
  --ink: #263126;
  --border: #586052;
  --display: 'Bodoni Moda', Georgia, serif;
  --body: 'Libre Caslon Text', Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--body); }
.splash {
  min-height: max(100svh, 56.28vw);
  background: var(--paper) url('assets/landscape-background.png') right bottom / 100% auto no-repeat;
  text-align: center;
  overflow: hidden;
}
.identity { padding: 5.65vw 20px 0; }
h1 {
  margin: 0;
  font: 600 clamp(3rem, 7.3vw, 11rem)/1.12 var(--display);
  letter-spacing: -.045em;
  transform: scaleX(.9);
}
.location {
  margin: .35vw 0 0;
  padding-left: .47em;
  font-size: clamp(1rem, 1.65vw, 2.25rem);
  line-height: 1.5;
  letter-spacing: .47em;
}
.entry { margin-top: 2.05vw; }
.welcome {
  margin: 0;
  font-size: clamp(1.25rem, 2.35vw, 3.25rem);
  font-style: italic;
  line-height: 1.5;
}
.languages { display: flex; justify-content: center; gap: 2vw; margin: 2.1vw 24px 0; }
.language {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 1.1vw; width: 15.55vw; min-width: 190px; min-height: 58px;
  padding: 1.2vw 1.55vw;
  border: 1px solid var(--border); border-radius: 6px;
  background: rgb(248 245 236 / 28%); color: var(--ink);
  font: 400 clamp(1.125rem, 1.52vw, 2rem)/1.35 var(--body);
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease;
}
.language:hover { background: rgb(255 253 247 / 80%); }
.language:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.language[aria-pressed='true'] { background: #e5e7db; box-shadow: inset 0 0 0 1px var(--ink); }
.flag { width: clamp(34px, 3.3vw, 64px); height: auto; aspect-ratio: 4/3; object-fit: contain; flex: 0 0 auto; }
.arrow { width: .65rem; height: 1.1rem; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 2000px) { .identity { padding-top: 6vw; } }
@media (max-width: 760px) {
  .splash { min-height: max(100svh, 880px); background-size: auto 440px; background-position: right bottom; }
  .identity { padding: 38px 18px 0; }
  h1 { font-size: clamp(2.8rem, 11vw, 4.5rem); letter-spacing: -.035em; line-height: 1.05; transform: none; }
  h1 span { display: block; }
  .location { margin-top: 22px; font-size: 1rem; letter-spacing: .33em; padding-left: .33em; }
  .entry { margin-top: 30px; }
  .welcome { margin: 0 14px; font-size: clamp(.95rem, 3.6vw, 1.5rem); line-height: 1.7; }
  .languages { flex-direction: column; align-items: center; gap: 12px; margin: 26px 24px 0; }
  .language { width: min(100%, 310px); padding: 14px 24px; min-height: 64px; gap: 20px; font-size: 1.2rem; background: rgb(248 245 236 / 90%); }
  .flag { width: 42px; }
}
@media (prefers-reduced-motion: reduce) { .language { transition: none; } }