/* Layout: one left-aligned column, vertically centred; the wordmark leaves violet afterimages behind it. */
:root {
  --ground: #0d0c11;
  --ink: #c9c6d4;
  --dim: #7f7c8c;
  --faint: #4a4756;
  --ghost: #9d7bff;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --cjk: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", "MS Mincho", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
}
main {
  min-height: 100%;
  display: grid;
  align-content: center;
  padding-block: 64px;
  padding-inline: max(16px, 8vw);
}
.col { display: grid; gap: 40px; max-width: 40rem; }

.mark {
  position: relative;
  margin: 0;
  font-weight: 700;
  font-size: clamp(56px, 16vw, 132px);
  line-height: 1;
  letter-spacing: -0.04em;
  padding-left: 0.26em;
}
.mark span { display: block; }
.mark .echo {
  position: absolute; inset: 0 0 0 0.26em;
  color: var(--ghost);
  pointer-events: none;
  user-select: none;
}
.mark .e1 { opacity: .42; transform: translateX(-0.12em); animation: drift1 1.6s cubic-bezier(.2,.7,.2,1) both; }
.mark .e2 { opacity: .12; transform: translateX(-0.26em); animation: drift2 2.4s cubic-bezier(.2,.7,.2,1) both; }
.mark .solid { position: relative; }
@keyframes drift1 { from { transform: translateX(0); opacity: .9; } }
@keyframes drift2 { from { transform: translateX(0); opacity: .6; } }

.entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
  color: var(--dim);
  border-left: 1px solid var(--faint);
  padding-left: 20px;
}
.entry .kanji { font-family: var(--cjk); font-size: 28px; line-height: 1.1; color: var(--ink); grid-row: span 2; }
.entry .reading { color: var(--ink); }
.entry .pos { font-style: italic; }
.entry p { margin: 0; grid-column: 2; min-width: 0; }

.soon { margin: 0; color: var(--ink); }
.soon::after {
  content: "";
  display: inline-block;
  width: .6em; height: 1.1em;
  margin-left: .35em;
  vertical-align: -0.2em;
  background: var(--ghost);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

footer { color: var(--faint); font-size: 12px; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .mark .echo, .soon::after { animation: none; }
}