@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@1,300&family=Noto+Serif+JP:wght@400&display=swap');

:root {
  color-scheme: dark;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  background: #080808;
  color: #e6e3df;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.title-area {
  position: absolute;
  bottom: calc(50svh + 48px);
  left: 50%;
  width: min(760px, calc(100% - 64px));
  transform: translateX(-50%);
  text-align: center;
}
h1 {
  margin: 0;
  font-family: 'Cormorant Infant', 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: clamp(34px, 5.5vw, 64px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1.japanese {
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 400;
  letter-spacing: .04em;
}
h1:focus { outline: none; }
main.descending {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 32svh;
  padding-bottom: 18svh;
}
.descending .title-area {
  position: static;
  width: min(760px, calc(100% - 16px));
  transform: none;
}
.arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(80px, 14svh, 160px);
  margin: 64px 0;
  color: #8b8884;
  font: 400 24px/1 serif;
  user-select: none;
}
button {
  max-width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #b8b5b1;
  font: 400 14px/1.8 'Noto Serif JP', 'Yu Mincho', serif;
  cursor: pointer;
  touch-action: manipulation;
  text-wrap: balance;
  -webkit-tap-highlight-color: transparent;
}
button:hover { color: #fff; }
button:focus-visible { outline: 1px solid #8b8884; outline-offset: 4px; }
#ending { margin: 20px 0 0; color: #8b8884; font-size: 12px; }
noscript { position: absolute; top: 60%; width: 100%; text-align: center; font-size: 12px; }
[hidden] { display: none !important; }