:root {
  --paper: #f4efe4;
  --paper-deep: #e7d2ae;
  --ink: #27231e;
  --muted: #7d756a;
  --text-soft: #574f45;
  --strip: clamp(42px, 6vw, 84px);
  --line: rgba(55, 49, 42, 0.15);
  --grid: rgba(55, 49, 42, 0.08);
  --accent: #b6532a;
  --accent-soft: rgba(182, 83, 42, 0.12);
  --serif: "Source Serif 4", "Noto Serif SC", serif;
  --sans: "DM Sans", "Noto Sans SC", sans-serif;
}

:root[data-theme="dark"] {
  --paper: #171613;
  --paper-deep: #25211c;
  --ink: #eee7dc;
  --muted: #a69e92;
  --text-soft: #a69e92;
  --line: rgba(238, 231, 220, 0.16);
  --grid: rgba(238, 231, 220, 0.07);
  --accent: #e17a4d;
  --accent-soft: rgba(225, 122, 77, 0.14);
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-weight: 300; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: var(--accent); color: #fff; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 78px; padding: 0;
  display: flex; justify-content: flex-start; align-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
}
.site-header::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--strip); background: var(--paper-deep); border-right: 1px solid var(--line); }
.header-tools { position: relative; width: var(--strip); display: flex; justify-content: center; align-items: center; gap: 8px; }
.lang-button { width: 17px; height: 17px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line); font: 600 9px/1 "Noto Serif SC", serif; cursor: pointer; transition: box-shadow .25s, transform .25s; }
:root[lang="en"] .lang-button { font: 600 10px/1 "Source Serif 4", serif; }
.lang-button:hover { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); transform: scale(1.05); }
.lang-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-button { width: 17px; height: 17px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line); padding: 0; cursor: pointer; transition: border-color .25s, background .25s, transform .25s; }
.theme-button:hover { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); transform: scale(1.05); }
.theme-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.taiji { position: relative; display: block; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--ink); border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, var(--paper) 50%); transition: transform .55s ease; }
.taiji::before, .taiji::after { content: ""; position: absolute; left: 50%; width: 50%; height: 50%; border-radius: 50%; transform: translateX(-50%); box-sizing: border-box; }
.taiji::before { top: 0; background: var(--ink); border: 2.5px solid var(--paper); }
.taiji::after { bottom: 0; background: var(--paper); border: 2.5px solid var(--ink); }
.taiji.is-dark { transform: rotate(180deg); }

.hero { min-height: 100svh; position: relative; overflow: hidden; overflow: clip; display: grid; place-items: start center; padding: calc(40svh - 40px) clamp(24px, 8vw, 120px) 80px; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
main { position: relative; }
main::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: var(--strip); background: var(--paper-deep); border-right: 1px solid var(--line); pointer-events: none; }
.hero-map { position: absolute; inset: 0; opacity: .38; pointer-events: none; }
.contour { position: absolute; display: block; border: clamp(4px, .6vw, 9px) solid var(--line); border-radius: 50%; }
.contour-a { width: 110vw; height: 54vw; left: -25vw; top: 18%; transform: rotate(-13deg); }
.contour-b { width: 75vw; height: 105vw; right: -42vw; top: -15vw; transform: rotate(27deg); }
.contour-c { width: 55vw; height: 45vw; left: 16vw; bottom: -31vw; }
.hero-copy { position: relative; width: 100%; min-width: 0; }
/* The title rides up to the header and stays there while the passage scrolls on. */
.hero-signature { position: sticky; top: 24px; z-index: 60; }
.hero-word { white-space: nowrap; }
.hero .hero-name-zh { display: inline-block; vertical-align: -.04em; margin-left: .3em; width: .6em; height: .6em; background: currentColor; -webkit-mask: url("assets/name-zh-seal-shuowen.png") center / contain no-repeat; mask: url("assets/name-zh-seal-shuowen.png") center / contain no-repeat; }
.hero-divider { position: absolute; left: 50%; bottom: -26px; width: clamp(90px, 13vw, 180px); height: 2px; border-radius: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.role { margin: 0; font: 400 clamp(15px, 1.8vw, 24px)/1.3 "Pinyon Script", cursive; text-shadow: .3px 0 currentColor, -.15px 0 currentColor; }
.typed { min-height: 30px; margin: 52px auto 0; color: var(--text-soft); font: 400 clamp(16px, 1.6vw, 22px)/1.3 "Pinyon Script", cursive; text-shadow: .25px 0 currentColor; }
.typed p { margin: 0; }
.typed-rest { color: transparent; text-shadow: none; }
:root[lang="zh-CN"] .typed { width: min(30em, 100%); text-align: justify; text-align-last: left; }
:root[lang="zh-CN"] .typed p { text-indent: 2em; }
.typed-passage { margin-top: 1em !important; }
:root[lang="zh-CN"] .role { font: 500 clamp(13px, 1.45vw, 19px)/1.5 "Noto Serif SC", serif; letter-spacing: .08em; text-shadow: none; }
:root[lang="zh-CN"] .typed { font: 400 clamp(12px, 1.2vw, 16px)/1.8 "Noto Serif SC", serif; letter-spacing: .08em; text-shadow: none; }

@media (max-width: 620px) {
  :root { --strip: 38px; }
  .site-header { height: 66px; }
  .header-tools { flex-direction: column; gap: 10px; }
  .theme-button, .lang-button { width: 14px; height: 14px; }
  .lang-button { font-size: 7.5px; }
  :root[lang="en"] .lang-button { font-size: 8.5px; }
  .taiji::before, .taiji::after { border-width: 2px; }
  .hero { padding-inline: 56px 20px; }
  .hero-signature { top: 20px; }
}

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