*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --text: rgba(255, 255, 255, 0.96);
  --text-soft: rgba(255, 255, 255, 0.78);
  --link: var(--text);
  --mesh-blue: #7a99c2;
  --mesh-lavender: #b8a6c9;
  --mesh-pink: #d6a8b3;
  --page-pad: clamp(1.75rem, 5vw, 3.5rem);
  /* uniform gap between grid tracks; main column is flanked by 1fr for centering */
  --gap-col: clamp(2.5rem, 5vw, 4.5rem);
  --main-col-width: minmax(0, 36rem);
  /* Typography (aligned with home / who page) */
  --font-heading: clamp(1.75rem, 1.4rem + 1.5vw, 2.35rem);
  /* Same as former .hero-name__meta (0.45 × heading scale) */
  --font-name: clamp(0.79rem, 0.63rem + 0.68vw, 1.06rem);
  --font-lead: 1.05em;
  --line-heading: 1.2;
  --line-body: 1.65;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  font-weight: 400;
  line-height: var(--line-body);
  color: var(--text);
  background: #1a1f2e;
}

.page {
  --bg-blur: clamp(48px, 8vw, 88px);
  min-height: 100vh;
  padding: var(--page-pad);
  display: grid;
  grid-template-columns:
    minmax(0, 12rem)
    minmax(0, 11rem)
    minmax(0, 1fr)
    var(--main-col-width)
    minmax(0, 1fr);
  grid-template-areas: "signoff nav . main .";
  column-gap: var(--gap-col);
  row-gap: 0;
  align-content: start;
  align-items: start;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--mesh-lavender);
  background-image:
    radial-gradient(
      80% 60% at 15% 20%,
      color-mix(in oklab, var(--mesh-blue) 85%, white) 0%,
      transparent 55%
    ),
    radial-gradient(
      70% 55% at 85% 35%,
      color-mix(in oklab, var(--mesh-pink) 88%, white) 0%,
      transparent 50%
    ),
    radial-gradient(
      90% 70% at 50% 100%,
      color-mix(in oklab, var(--mesh-lavender) 75%, var(--mesh-pink)) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 120% 80% at 40% 50%,
      color-mix(in oklab, var(--mesh-lavender) 92%, white),
      color-mix(in oklab, var(--mesh-blue) 45%, var(--mesh-lavender))
    );
  background-size: 140% 140%;
  background-position: 20% 30%;
}

.page::before,
.page::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(var(--bg-blur));
  will-change: auto;
}

/* Soft blue-violet drift (top-left) */
.page::before {
  width: min(120vmin, 52rem);
  height: min(120vmin, 52rem);
  top: -25%;
  left: -20%;
  background: radial-gradient(
    circle at 42% 48%,
    color-mix(in oklab, var(--mesh-blue) 72%, white),
    color-mix(in oklab, var(--mesh-lavender) 35%, transparent) 52%,
    transparent 68%
  );
  opacity: 0.85;
}

/* Rose-lavender drift (bottom-right) */
.page::after {
  width: min(130vmin, 56rem);
  height: min(130vmin, 56rem);
  bottom: -30%;
  right: -25%;
  background: radial-gradient(
    circle at 55% 45%,
    color-mix(in oklab, var(--mesh-pink) 68%, white),
    color-mix(in oklab, var(--mesh-lavender) 38%, transparent) 50%,
    transparent 70%
  );
  opacity: 0.78;
}

.page > * {
  position: relative;
  z-index: 1;
}


.col--signoff {
  grid-area: signoff;
}

.col--nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-height: calc(100vh - var(--page-pad) * 2);
}

.col--main {
  grid-area: main;
  position: relative;
  width: 100%;
  padding-bottom: 6rem;
}

.signoff {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

.signoff__hanzi {
  font-weight: 700;
  font-size: 1.35em;
  margin-left: 0.35rem;
  line-height: 1;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nav-list a {
  color: var(--link);
  text-decoration: none;
  font-weight: 400;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.nav-list a[aria-current="page"] {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.nav-list--social {
  margin-top: auto;
}

.nav-footnote {
  margin: 0;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
  font-weight: 400;
  max-width: 9rem;
  line-height: 1.4;
}

/* Primary title: index name line + Creations / Books h1 — same scale, italic */
.hero-name,
.page-title {
  margin: 0 0 0.75rem;
  font-size: var(--font-name);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.hero-name__han {
  display: block;
  margin-bottom: 0.2em;
}

.hero-name__meta {
  display: block;
  font-size: 1em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.hero-name__pinyin {
  margin-right: 0.65em;
  text-transform: none;
}

.hero-name__est {
  font-variant-numeric: tabular-nums;
}

/* Intro line under the main title (who tagline + section ledes) */
.tagline,
.page-lede {
  margin: 0 0 1.75rem;
  font-size: var(--font-lead);
  line-height: 1.55;
  color: var(--text);
}

.section-divider {
  border: 0;
  border-top: 2px dotted rgba(255, 255, 255, 0.3);
  margin: 0 0 1.75rem;
}

.prose {
  color: var(--text-soft);
  font-size: 1em;
  line-height: var(--line-body);
}

.prose p {
  margin: 0 0 1.1em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.creation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.creation-list__item {
  margin: 0;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.creation-list__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.creation-list__title {
  margin: 0 0 0.4rem;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--line-body);
  color: var(--text);
}

.creation-list__desc {
  margin: 0;
  color: var(--text-soft);
  font-size: 1em;
  line-height: var(--line-body);
}

.book-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.book-list li {
  margin: 0;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: normal;
  line-height: var(--line-body);
  color: var(--text-soft);
}

.accent-figure {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  width: min(11rem, 38vw);
  aspect-ratio: 3 / 2;
  border-radius: 0.65rem 0.65rem 0 0;
  background: rgba(255, 255, 255, 0.88);
  display: grid;
  place-items: center;
  color: #111;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.accent-svg {
  width: 55%;
  height: auto;
}

@media (max-width: 900px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "signoff"
      "nav"
      "main";
    row-gap: 2.5rem;
  }

  .col--signoff {
    grid-area: signoff;
  }

  .col--nav {
    grid-area: nav;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem 2.5rem;
  }

  .nav-list--social {
    margin-top: 0;
  }

  .nav-footnote {
    width: 100%;
    max-width: none;
    margin-top: 0;
    order: 3;
  }

  .col--main {
    grid-area: main;
    padding-bottom: 8rem;
  }

  .accent-figure {
    right: var(--page-pad);
    bottom: var(--page-pad);
  }
}


@view-transition {
  navigation: auto;
}