:root {
  --void: #000;
  --deep: #080808;
  --glow: #1a1a1d;
  --ink: #f7f4ed;
  --soft-ink: #d8d3c9;
  --ash: #908b82;
  --hair: rgba(247, 244, 237, .15);
  --hair-strong: rgba(247, 244, 237, .42);
  --rail-space: clamp(8rem, 14vw, 12rem);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  color-scheme: dark;
  background: var(--void);
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse 76% 66% at 48% 44%, rgba(34, 34, 37, .72), transparent 70%),
    radial-gradient(ellipse 120% 100% at 48% 42%, var(--glow), var(--deep) 58%, var(--void) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.09) 0 .6px, transparent .8px),
    radial-gradient(circle at 72% 65%, rgba(255,255,255,.055) 0 .55px, transparent .75px),
    radial-gradient(circle at 42% 82%, rgba(255,255,255,.04) 0 .5px, transparent .7px);
  background-size: 91px 87px, 137px 129px, 173px 163px;
  mix-blend-mode: soft-light;
}

button, a { font: inherit; }
a { color: inherit; }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 50;
  padding: .65rem .9rem;
  color: #000;
  background: var(--ink);
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

.language-rail {
  position: fixed;
  top: 50%;
  right: clamp(1rem, 2.8vw, 2.5rem);
  z-index: 30;
  display: flex;
  max-height: calc(100dvh - 2rem);
  flex-direction: column;
  align-items: flex-end;
  gap: .76rem;
  overflow-y: auto;
  padding: .75rem .25rem .75rem 1rem;
  direction: ltr;
  scrollbar-width: none;
  transform: translateY(-50%);
  user-select: none;
}

.language-rail::-webkit-scrollbar { display: none; }

.lang-button {
  appearance: none;
  display: flex;
  min-height: 1.65rem;
  align-items: center;
  justify-content: flex-end;
  gap: .62rem;
  padding: .12rem 0;
  border: 0;
  color: var(--ash);
  background: transparent;
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
  opacity: .64;
  transition: color .28s ease, opacity .28s ease;
}

.lang-button:hover,
.lang-button:focus-visible,
.lang-button.is-active {
  color: var(--ink);
  opacity: 1;
}

.lang-button:focus-visible {
  border-radius: 2px;
  outline: 1px solid var(--hair-strong);
  outline-offset: 5px;
}

.lang-button .tick {
  display: block;
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: width .3s ease, opacity .3s ease;
}

.lang-button:hover .tick { width: 14px; opacity: .5; }
.lang-button.is-active .tick { width: 24px; opacity: .92; }
.lang-button .label { white-space: nowrap; }

.quote-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow-x: hidden;
  padding:
    clamp(3.5rem, 7vw, 5.8rem)
    calc(var(--rail-space) + clamp(1rem, 2vw, 2rem))
    clamp(7rem, 12vh, 8.5rem)
    clamp(2rem, 6vw, 5.2rem);
}

.quote-page::after {
  position: fixed;
  top: 9vh;
  bottom: 9vh;
  left: clamp(1rem, 3.2vw, 3rem);
  z-index: 0;
  width: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--hair), transparent);
}

.stage {
  position: relative;
  z-index: 2;
  width: min(100%, 68rem);
  isolation: isolate;
}

.chapter-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  color: rgba(247, 244, 237, .026);
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", cursive;
  font-size: clamp(18rem, 43vw, 34rem);
  font-weight: 400;
  line-height: .72;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.quote-card { width: 100%; margin: 0 auto; text-align: center; }

.top-mark {
  width: 1px;
  height: clamp(30px, 5vw, 48px);
  margin: 0 auto clamp(1.25rem, 3.4vw, 2.2rem);
  background: linear-gradient(to bottom, transparent, var(--hair-strong), transparent);
}

.eyebrow {
  margin: 0 0 clamp(1.45rem, 3vw, 2.1rem);
  color: var(--ash);
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-size: clamp(.7rem, 1.4vw, .82rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.dynamic-content { transition: opacity .22s ease, transform .22s ease; }
.is-swapping .dynamic-content { opacity: 0; transform: translateY(8px); }

.quote {
  max-width: 17em;
  margin: 0 auto;
  color: var(--ink);
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", cursive;
  font-size: clamp(2.45rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: .055em;
  text-wrap: balance;
  text-shadow: 0 0 42px rgba(247, 244, 237, .07);
}

.quote[data-lang="zh-Hant"] {
  font-family: "LXGW WenKai TC", "BiauKai", "KaiTi", cursive;
}

.quote[data-lang="ja"] {
  max-width: 22em;
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: clamp(2rem, 4.9vw, 3.9rem);
  line-height: 1.62;
}

.quote[data-lang="ko"] {
  max-width: 23em;
  font-family: "Nanum Brush Script", "Noto Serif KR", serif;
  font-size: clamp(2.15rem, 5.2vw, 4.1rem);
  line-height: 1.55;
}

.quote[data-lang="ar"] {
  max-width: 24em;
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-size: clamp(2.15rem, 5.1vw, 4rem);
  line-height: 1.72;
  letter-spacing: 0;
}

.quote[data-lang="en"],
.quote[data-lang="de"],
.quote[data-lang="es"] {
  max-width: 24em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.1rem, 5.1vw, 4.15rem);
  font-style: italic;
  line-height: 1.38;
  letter-spacing: .01em;
}

.quote.is-medium {
  max-width: 22em;
  font-size: clamp(1.9rem, 4vw, 3.35rem);
}

.quote.is-long {
  max-width: 30em;
  font-size: clamp(1.45rem, 3.15vw, 2.55rem);
  line-height: 1.52;
}

.seal {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  margin: clamp(1.6rem, 3.8vw, 2.6rem) auto 0;
  place-items: center;
  border: 1px solid var(--hair-strong);
  color: var(--soft-ink);
  font-family: "Ma Shan Zheng", "STKaiti", cursive;
  font-size: 1rem;
  line-height: 1;
}

.page-nav {
  position: fixed;
  right: calc(var(--rail-space) + 1rem);
  bottom: clamp(1.35rem, 3vw, 2.5rem);
  left: clamp(1.4rem, 4vw, 3.5rem);
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  color: var(--ash);
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-size: .82rem;
  letter-spacing: .12em;
}

.page-nav a {
  text-decoration: none;
  transition: color .2s ease;
}
.page-nav a:hover, .page-nav a:focus-visible { color: var(--ink); }
.page-nav .next { justify-self: end; }
.page-nav .contents { justify-self: center; }
.page-nav .disabled { visibility: hidden; }

.index-page { min-height: 100dvh; }

.index-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 76rem);
  margin: 0 auto;
  padding:
    clamp(4rem, 9vw, 8rem)
    calc(var(--rail-space) + clamp(1rem, 3vw, 2.5rem))
    clamp(5rem, 10vw, 8rem)
    clamp(1.25rem, 5vw, 4rem);
}

.index-hero {
  position: relative;
  isolation: isolate;
  margin: 0 auto clamp(3.5rem, 8vw, 6rem);
  text-align: center;
}

.index-ghost {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: -1;
  color: rgba(247,244,237,.028);
  font-family: "Ma Shan Zheng", "STKaiti", cursive;
  font-size: clamp(15rem, 36vw, 29rem);
  line-height: .72;
  transform: translate(-50%, -50%);
  user-select: none;
}

.series {
  margin: 0 0 1rem;
  color: var(--ash);
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-size: .78rem;
  letter-spacing: .34em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", cursive;
  font-size: clamp(4.2rem, 10vw, 7.8rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .08em;
}

.index-page[data-lang="zh-Hant"] h1 {
  font-family: "LXGW WenKai TC", "BiauKai", "KaiTi", cursive;
}

.index-page[data-lang="ja"] h1 {
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: clamp(3.8rem, 9vw, 6.8rem);
  letter-spacing: .04em;
}

.index-page[data-lang="ko"] h1 {
  font-family: "Nanum Brush Script", "Noto Serif KR", serif;
  font-size: clamp(4rem, 10vw, 7.2rem);
  letter-spacing: .03em;
}

.index-page[data-lang="ar"] h1 {
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-size: clamp(3.6rem, 9vw, 6.6rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.index-page[data-lang="en"] h1,
.index-page[data-lang="de"] h1,
.index-page[data-lang="es"] h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.4rem, 8.5vw, 6.6rem);
  font-style: italic;
  letter-spacing: .01em;
}

.chapter-label {
  display: inline-block;
  margin: 1.15rem 0 0;
  padding: .34rem .68rem .3rem;
  border: 1px solid var(--hair-strong);
  color: var(--soft-ink);
  font-family: "Noto Serif SC", serif;
  font-size: .72rem;
  letter-spacing: .18em;
}

.deck {
  max-width: 37rem;
  margin: 1.5rem auto 0;
  color: var(--ash);
  font-family: "Noto Serif SC", serif;
  font-size: clamp(.9rem, 1.8vw, 1.05rem);
  line-height: 1.8;
  letter-spacing: .06em;
}

.index-page[data-lang="zh-Hant"] .deck {
  font-family: "LXGW WenKai TC", "Noto Serif SC", serif;
}

.index-page[data-lang="ja"] .deck {
  font-family: "Noto Serif JP", serif;
}

.index-page[data-lang="ko"] .deck {
  font-family: "Noto Serif KR", serif;
}

.index-page[data-lang="ar"] .deck {
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.95;
  letter-spacing: 0;
}

.index-page[data-lang="en"] .deck,
.index-page[data-lang="de"] .deck,
.index-page[data-lang="es"] .deck {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  letter-spacing: .02em;
}

.reading-flow {
  width: min(100%, 66rem);
  margin: 0 auto;
  transition: opacity .22s ease, transform .22s ease;
}

.reading-flow.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

.continuous-text {
  margin: 0;
  color: var(--soft-ink);
  font-family: "Ma Shan Zheng", "STKaiti", serif;
  font-size: clamp(1.75rem, 3.25vw, 2.7rem);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .055em;
  text-align: start;
  unicode-bidi: plaintext;
}

.sentence {
  display: inline;
}

.sentence + .sentence::before {
  content: " ";
}

.reading-flow[data-lang="zh-Hant"] .continuous-text {
  font-family: "LXGW WenKai TC", "BiauKai", "KaiTi", cursive;
}

.reading-flow[data-lang="ja"] .continuous-text {
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: clamp(1.45rem, 2.65vw, 2.2rem);
  line-height: 2.05;
}

.reading-flow[data-lang="ko"] .continuous-text {
  font-family: "Nanum Brush Script", "Noto Serif KR", serif;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.95;
}

.reading-flow[data-lang="ar"] .continuous-text {
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  line-height: 2.1;
  letter-spacing: 0;
}

.reading-flow[data-lang="en"] .continuous-text,
.reading-flow[data-lang="de"] .continuous-text,
.reading-flow[data-lang="es"] .continuous-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 2.75vw, 2.25rem);
  font-style: italic;
  line-height: 1.75;
  letter-spacing: .01em;
}

.index-footer {
  margin-top: 2.5rem;
  color: var(--ash);
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-size: .8rem;
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 760px) {
  :root { --rail-space: 0rem; }
  .quote-page {
    padding: 3.2rem 1.25rem 9rem;
  }
  .language-rail {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: none;
    flex-direction: row;
    justify-content: center;
    gap: .25rem;
    overflow-x: auto;
    padding: .8rem .7rem calc(.8rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hair);
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(12px);
    transform: none;
  }
  .lang-button {
    min-width: 2.5rem;
    justify-content: center;
    padding: .45rem .5rem;
  }
  .lang-button .tick { display: none; }
  .lang-button .label { display: none; }
  .lang-button .short-label { display: inline; }
  .page-nav { right: 1.25rem; bottom: 4.8rem; left: 1.25rem; }
  .index-shell { padding: 4rem 1rem 7rem; }
  .continuous-text { line-height: 1.82; }
}

@media (min-width: 761px) {
  .short-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}