:root {
  --bg: #050505;
  --text: #ecebe6;
  --dim: #8b8a85;
  --faint: #2b2b29;
  --accent: #c9a96e;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}
.lang {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: clamp(24px, 8vw, 120px);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--dim);
}
.lang a { color: inherit; text-decoration: none; }
.lang a:hover, .lang a:focus-visible { color: var(--text); }
.lang [aria-current] { color: var(--text); }
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12vh clamp(24px, 8vw, 120px) 4vh;
  position: relative;
}
.name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text);
}
.place {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--dim);
}
h1 {
  margin-top: clamp(48px, 9vh, 96px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 6.4vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 13em;
}
h1 em { font-style: italic; color: var(--accent); white-space: nowrap; }
.line {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--dim);
  max-width: 34em;
}
.rivers {
  display: block;
  height: clamp(90px, 16vh, 160px);
  margin-top: clamp(40px, 8vh, 80px);
  margin-left: calc(-1 * clamp(24px, 8vw, 120px));
  width: 100vw;
}
.rivers path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rivers .a { stroke: var(--accent); stroke-width: 1.25; }
.rivers .b { stroke: var(--faint); stroke-width: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rivers path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s cubic-bezier(.4,0,.2,1) forwards; }
  .rivers .b1 { animation-delay: .15s; }
  .rivers .a { animation-delay: .35s; animation-duration: 2.8s; }
  .rivers .b2 { animation-delay: .55s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}
footer {
  padding: 24px clamp(24px, 8vw, 120px) 32px;
  border-top: 1px solid var(--faint);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
footer a { color: inherit; text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--text); }