/* ============================================================
   Zheng Zhu — academic website
   Design system: warm ivory paper, ink serif display, copper accent,
   generative "arithmetic dynamics" hero art.
   ============================================================ */

@font-face { font-family: "Manrope"; src: url("manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Playfair"; src: url("playfair.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Ibarra Real Nova"; src: url("ibarra-real-nova-600.woff2?v=20260802-2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "GeistMono"; src: url("geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "MaShanZheng"; src: url("ma-shan-zheng.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #181a1d;
  --paper: #f8f1e8;
  --body: #38342e;
  --muted: #6d6154;
  --accent: #a86f3c;
  --accent-deep: #8a542e;
  --line: rgba(24, 26, 29, 0.14);
  --serif: "Playfair", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --name-serif: "Ibarra Real Nova", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --serif-cn: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "GeistMono", "SF Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--paper); }
body {
  background:
    radial-gradient(circle at 80% -4%, rgba(168, 111, 60, 0.13), transparent 34rem),
    linear-gradient(180deg, #faf3ea, var(--paper));
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--paper); }

.wrap { width: min(100% - clamp(40px, 8vw, 96px), 1240px); margin-inline: auto; }
.research .wrap, .teaching .wrap { width: min(100% - clamp(40px, 6vw, 96px), 1680px); }
.home {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
}
.home .wrap { width: min(100% - clamp(40px, 6vw, 128px), 1920px); }
.home main { display: grid; flex: 1; }
.home footer.site { padding-block: 24px 28px; }

.skip-link {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 10;
  transform: translateY(-110%);
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; padding: 10px 16px;
}
.skip-link:focus { transform: none; }

/* ---------- Header ---------- */
header.site {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 84px; padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 12px; white-space: nowrap;
  font-family: var(--name-serif); font-weight: 600;
  font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -0.02em; line-height: 1;
}
.wordmark .cn { font-family: "MaShanZheng", cursive; font-weight: 400; font-size: 0.88em; }
nav.primary { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
nav.primary a {
  position: relative;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--body); padding-block: 6px;
}
nav.primary a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms ease;
}
nav.primary a:hover { color: var(--accent-deep); }
nav.primary a:hover::after,
nav.primary a[aria-current="page"]::after { transform: scaleX(1); }
nav.primary a[aria-current="page"] { color: var(--accent-deep); }

/* ---------- Home: introduction, Julia set, and current work ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(24px, 3svh, 56px);
}
/* faint dot lattice behind the copy column */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(168, 111, 60, 0.20) 1px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(100deg, #000 8%, transparent 52%);
  mask-image: linear-gradient(100deg, #000 8%, transparent 52%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; min-width: 0; }
.hero-copy { min-width: 0; }
.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  color: var(--accent-deep);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: clamp(22px, 3.4vh, 34px);
}
.eyebrow > span { white-space: nowrap; }
h1.name { display: flex; flex-direction: column; gap: clamp(2px, 0.8vh, 10px); }
h1.name .en {
  font-family: var(--name-serif); font-weight: 600;
  font-size: clamp(54px, min(9.4vw, 15svh), 160px);
  line-height: 0.98; letter-spacing: -0.032em;
}
h1.name .cn {
  font-family: "MaShanZheng", cursive;
  font-size: clamp(42px, min(6vw, 10svh), 96px); line-height: 1.06;
  color: var(--ink);
}
.intro {
  margin-top: clamp(26px, 4vh, 42px); max-width: 33ch;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(19px, min(2.15vw, 2.85svh), 27px); line-height: 1.45; letter-spacing: -0.012em;
}
.intro em { color: var(--accent-deep); font-style: normal; }
.hero-art {
  grid-column: 2; grid-row: 1;
  width: min(100%, 68svh, 820px); justify-self: center;
  pointer-events: none;
  --julia-bg: #f8f1e8; --julia-fg: #8a542e;
}
.hero-art canvas {
  display: block; width: 100%; aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 80%);
  mask-image: radial-gradient(circle, #000 58%, transparent 80%);
}

/* ---------- Current work: numbered, hairline only ---------- */
.home-current {
  position: relative;
  margin-block-start: clamp(48px, 6.5svh, 72px);
  border-top: 1px solid var(--ink);
}
.current {
  display: grid; grid-template-columns: 1fr;
}
.current .area {
  display: flex; align-items: center; gap: 14px;
  padding-block: clamp(12px, 1.5svh, 18px); padding-inline: 0;
  border-top: 1px solid var(--line);
}
.current .area:first-child { border-top: 0; }
.current .area + .area { padding-inline-start: 0; }
.current .num {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--accent-deep); letter-spacing: 0.06em;
}
.current .area span:last-child {
  font-family: var(--serif); font-size: clamp(15px, 1.25vw, 19px); line-height: 1.4;
}
.k {
  color: var(--accent-deep);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}

.text-link {
  display: inline-flex; gap: 10px; align-items: center; margin-top: 26px;
  padding-bottom: 5px; border-bottom: 1px solid var(--accent);
  color: var(--accent-deep); font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- Interior pages ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(30px, 4.5vh, 48px) clamp(28px, 5vh, 52px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(168, 111, 60, 0.16) 1px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(260deg, #000 4%, transparent 46%);
  mask-image: linear-gradient(260deg, #000 4%, transparent 46%);
  pointer-events: none;
}
.page-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(42px, 5.6vw, 76px); line-height: 1.04; letter-spacing: -0.032em;
  max-width: 18ch;
}
.research .page-hero, .teaching .page-hero {
  padding-block: clamp(32px, 3vw, 48px) 28px;
}
.research .page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(160px, 18vw, 260px);
  gap: 24px clamp(24px, 3vw, 48px); align-items: center;
}
.research-intro { min-width: 0; }
.research .page-title, .teaching .page-title {
  max-width: none;
  font-size: clamp(34px, 5.2vw, 76px);
}
.research-art {
  width: 100%; justify-self: end;
  --tree-line: #8a542e; --tree-hot: #a86f3c;
}
.research-art svg { display: block; width: 100%; aspect-ratio: 6 / 5; }
.research .section-head, .teaching .section-head { margin-top: 16px; }
.page-title .cn { font-family: "MaShanZheng", cursive; font-weight: 400; font-size: 0.62em; margin-left: 0.18em; }
.page-lede {
  margin-top: clamp(16px, 2.6vh, 26px); max-width: 52ch;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22.5px); line-height: 1.5; letter-spacing: -0.01em;
  color: var(--body);
}
.page-body { padding-bottom: clamp(40px, 6vh, 64px); }

/* section heading row used on interior pages */
.section-head { margin: clamp(40px, 7vh, 72px) 0 18px; }
.section-head .k { display: block; margin-bottom: 14px; }
.section-head h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.025em;
}

/* ---------- About ---------- */
.about-layout {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 88px); align-items: start;
}
.portrait { position: relative; max-width: 420px; }
.portrait img {
  display: block; width: 100%; height: auto;
  filter: saturate(0.88) contrast(0.99);
  box-shadow: 0 18px 44px -20px rgba(24, 26, 29, 0.4);
}
.portrait figcaption {
  margin-top: 20px; color: var(--muted);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.prose p { max-width: 60ch; color: var(--body); font-size: 16.5px; line-height: 1.85; }
.prose p + p { margin-top: 18px; }
.prose a {
  color: var(--accent-deep);
  border-bottom: 1px solid rgba(168, 111, 60, 0.45); padding-bottom: 1px;
}
.prose a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.prose .k { display: block; margin-bottom: 18px; }

.facts { margin-top: clamp(34px, 5vh, 52px); border-top: 1px solid var(--ink); }
.facts .row {
  display: grid; grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  gap: 18px; padding: 15px 0 16px;
  border-bottom: 1px solid var(--line);
}
.facts .fk {
  color: var(--accent-deep);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; padding-top: 3px;
}
.facts .fv { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; }
.facts .fv a { border-bottom: 1px solid rgba(168, 111, 60, 0.55); padding-bottom: 1px; }
.facts .fv a:hover { color: var(--accent-deep); }

/* ---------- Research: works list ---------- */
.works { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.works li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 34px); align-items: baseline;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line);
}
.works .num {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--accent-deep); letter-spacing: 0.06em;
}
.works .type {
  display: block; margin-bottom: 6px;
  color: var(--accent-deep);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.works h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(17.5px, 1.7vw, 21px); line-height: 1.35; letter-spacing: -0.01em;
}
.works h3 a { border-bottom: 1px solid transparent; transition: border-color 160ms ease, color 160ms ease; }
.works h3 a:hover { color: var(--accent-deep); border-bottom-color: rgba(168, 111, 60, 0.55); }
.works .authors { margin-top: 5px; color: var(--muted); font-size: 13.5px; }
.works .status {
  color: var(--muted); text-align: right; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em;
}

/* ---------- Teaching: course list ---------- */
.courses { border-top: 1px solid var(--ink); }
.course {
  display: grid; grid-template-columns: clamp(180px, 18vw, 280px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 34px);
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line);
}
.course .term {
  color: var(--body);
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
}
.course .term span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.course .code {
  color: var(--accent-deep);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px;
}
.course h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(17.5px, 1.7vw, 21px); line-height: 1.35; letter-spacing: -0.01em;
}
.course h3 a:hover { color: var(--accent-deep); }
.course ul { list-style: none; padding: 0; margin-top: 8px; }
.course li { color: var(--muted); font-size: 13.5px; line-height: 1.7; }

/* ---------- 404 ---------- */
.nf { padding-block: clamp(90px, 18vh, 170px); }
.nf .page-lede { max-width: 40ch; }

/* ---------- Reveal-on-scroll (JS adds .is-in; safe without JS) ---------- */
[data-reveal] {
  transition: opacity 640ms cubic-bezier(0.22, 0.7, 0.3, 1),
              transform 640ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
html.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); }
.works li:nth-child(2) { transition-delay: 60ms; }
.works li:nth-child(3) { transition-delay: 120ms; }
.works li:nth-child(4) { transition-delay: 180ms; }
.works li:nth-child(5) { transition-delay: 240ms; }
.works li:nth-child(6) { transition-delay: 300ms; }
.course:nth-child(2) { transition-delay: 60ms; }
.course:nth-child(3) { transition-delay: 120ms; }
.course:nth-child(4) { transition-delay: 180ms; }
.course:nth-child(5) { transition-delay: 240ms; }

/* ---------- Footer ---------- */
footer.site {
  display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; justify-content: space-between;
  padding-block: 32px 38px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; letter-spacing: 0.04em;
}
footer.site .who { color: var(--ink); font-family: var(--serif); font-size: 16px; font-weight: 600; }
footer.site .who .cn { color: var(--ink); font-family: "MaShanZheng", cursive; font-weight: 400; font-size: 15px; margin-left: 6px; }
footer.site a { color: var(--body); }
footer.site a:hover { color: var(--accent-deep); }
footer.site .geo { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; }

/* ---------- Entrance motion (reduced-motion safe) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-copy > *, .hero-art, .page-hero > * {
  animation: rise 640ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
}
.hero-copy > *:nth-child(2) { animation-delay: 70ms; }
.hero-copy > *:nth-child(3) { animation-delay: 140ms; }
.hero-art { animation-delay: 120ms; }
.page-hero > *:nth-child(2) { animation-delay: 70ms; }
.page-hero > *:nth-child(3) { animation-delay: 140ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.reveal-ready [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}

/* Fit the full composition into shorter desktop windows. */
@media (min-width: 901px) and (max-height: 760px) {
  .home header.site { min-height: 72px; }
  .hero { padding-block: 12px; }
  .home footer.site { padding-block: 16px 20px; }
  .hero .eyebrow { margin-bottom: 20px; }
  h1.name .en { font-size: clamp(54px, min(9.4vw, 14svh), 160px); }
  h1.name .cn { font-size: clamp(42px, min(6vw, 9svh), 96px); }
  .intro { margin-top: 24px; }
  .home-current { margin-block-start: 36px; }
  .current .area { padding-block: 10px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .hero { gap: 28px 24px; }
  .about-layout { grid-template-columns: 1fr; }
  .portrait { max-width: 380px; }
  .works li { grid-template-columns: 34px minmax(0, 1fr); }
  .works .status { grid-column: 2; text-align: left; margin-top: 8px; }
}

/* Keep research themes next to the biography on narrow screens. */
@media (max-width: 660px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; }
  .hero::before { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 75%); mask-image: linear-gradient(180deg, #000 30%, transparent 75%); }
  .hero-art { grid-column: 1; grid-row: 2; width: min(100%, 320px); }
  .research .page-hero { grid-template-columns: 1fr; gap: 20px; }
  .research-art { width: 160px; justify-self: center; }
}

/* ---------- Phone ---------- */
@media (max-width: 560px) {
  header.site { flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 16px; }
  nav.primary { width: 100%; justify-content: space-between; }
  .eyebrow { flex-direction: column; align-items: flex-start; gap: 4px; }
  .eyebrow .sep { display: none; }
  .current { grid-template-columns: 1fr; }
  .current .area, .current .area + .area { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline-start: 0; }
  .current .area:first-child { border-top: 0; }
  .course { grid-template-columns: 1fr; gap: 10px; }
  .facts .row { grid-template-columns: 1fr; gap: 4px; }
}