:root {
  --orange: oklch(0.74 0.14 50);
  --orange-deep: oklch(0.62 0.16 42);
  --orange-soft: oklch(0.86 0.08 60);
  --cream: oklch(0.97 0.02 80);
  --cream-warm: oklch(0.94 0.03 75);
  --ink: oklch(0.24 0.04 60);
  --ink-soft: oklch(0.42 0.04 60);
  --ink-mute: oklch(0.58 0.03 60);
  --line: oklch(0.88 0.03 70);
  --max-w: 720px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--orange-soft);
  transition: border-color 0.15s ease, color 0.15s ease;
}
a:hover { border-color: var(--orange); color: var(--orange-deep); }

/* ---------- Home ---------- */
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  gap: 28px;
  position: relative;
  z-index: 1;
}

/* Background animation — gentle, low-stim drift of tiger motifs */
.bg-anim {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-anim svg {
  display: block;
  position: absolute;
  will-change: transform;
}
.bg-anim .b-face   { animation: drift 38s linear infinite, bob 6s ease-in-out infinite; opacity: 0.22; }
.bg-anim .b-paw    { animation: drift 46s linear infinite, bob 8s ease-in-out infinite; opacity: 0.18; }
.bg-anim .b-dot    { animation: drift 30s linear infinite, bob 5s ease-in-out infinite; opacity: 0.30; }
.bg-anim .b-stripe { animation: drift 54s linear infinite, bob 7s ease-in-out infinite; opacity: 0.20; }

/* Drift right-to-left then wrap. Each item gets its own delay/top via inline style. */
@keyframes drift {
  from { transform: translate(105vw, 0) rotate(var(--rot, 0deg)); }
  to   { transform: translate(-30vw, 0) rotate(var(--rot, 0deg)); }
}
@keyframes bob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: 14px; }
}

/* Pause animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg-anim svg { animation: none !important; opacity: 0.12 !important; }
}

footer { position: relative; z-index: 1; }

.home .logo {
  width: 180px;
  height: 180px;
}

.home h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(44px, 7vw, 64px);
  letter-spacing: -0.015em;
  margin: 4px 0 0;
  line-height: 1.05;
  font-variation-settings: 'SOFT' 100;
}

.home .domain {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: -8px;
}

.home .lede {
  max-width: 540px;
  font-size: 19px;
  color: var(--ink-soft);
  margin: 8px 0 0;
  text-wrap: pretty;
}

.home .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange-deep);
  background: var(--orange-soft);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ---------- Document pages ---------- */
.doc {
  flex: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px 24px 32px;
}

.doc .topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  font-size: 14px;
}
.doc .topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  color: var(--ink-soft);
}
.doc .topbar svg { width: 28px; height: 28px; }
.doc .topbar a:hover { color: var(--orange-deep); }

.doc h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 5vw, 44px);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.1;
}
.doc .meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}

.doc h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  margin: 40px 0 8px;
  letter-spacing: -0.005em;
}
.doc h3 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 24px 0 4px;
}
.doc p, .doc li {
  font-size: 16px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.doc ul {
  padding-left: 22px;
}
.doc ul li {
  margin-bottom: 6px;
}
.doc strong { color: var(--ink); font-weight: 700; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  font-size: 14px;
  color: var(--ink-mute);
  background: var(--cream);
}
footer .links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
footer a {
  border: none;
  color: var(--ink-soft);
  font-weight: 600;
}
footer a:hover { color: var(--orange-deep); }

footer .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }

/* Language switcher */
.lang {
  display: inline-flex;
  align-items: center;
  background: var(--cream-warm);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid var(--line);
}
.lang button {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
}

/* lang="zh" subtle adjustment */
html[lang="zh"] body {
  font-family: 'Nunito', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}
html[lang="zh"] .doc h1, html[lang="zh"] .home h1, html[lang="zh"] .doc h2 {
  font-family: 'Fraunces', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', serif;
}

@media (max-width: 520px) {
  .doc { padding: 36px 20px 24px; }
  .home { padding: 48px 20px; gap: 22px; }
  .home .logo { width: 144px; height: 144px; }
}