/* Ailun (Alan) Zhang: site styles. Dark, typographic, with physics ornaments as quiet accents. */
:root {
  --bg: #030406;
  --bg-2: #07090d;
  --ink: #e7e3da;
  --ink-2: #c9c5bc;
  --muted: #8e95a1;
  --faint: #4b525d;
  --rule: rgba(231, 227, 218, 0.09);
  --warm: #f2b27a;   /* ≈ 3300 K blackbody */
  --cool: #a9c1ff;   /* blueshifted side */
  --serif: "Charter", "Bitstream Charter", "Sitka Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: rgba(242, 178, 122, 0.45); text-underline-offset: 3px; }
a:hover { color: #fff; text-decoration-color: var(--warm); }
::selection { background: rgba(242, 178, 122, 0.28); }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 44px);
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s, opacity 0.9s ease 0.2s;
  border-bottom: 1px solid transparent;
}
body.intro .topbar { opacity: 0; }
.topbar.solid { background: rgba(3, 4, 6, 0.72); backdrop-filter: blur(10px); border-color: var(--rule); }
.topbar .mark { text-decoration: none; color: var(--ink); font-weight: 600; letter-spacing: 0.22em; }
.topnav { display: flex; gap: clamp(12px, 2.2vw, 30px); }
.topnav a { text-decoration: none; color: var(--muted); transition: color 0.2s; }
.topnav a:hover, .topnav a.active { color: var(--ink); }
@media (max-width: 720px) {
  .topnav { gap: 12px; font-size: 11px; letter-spacing: 0.08em; }
  .topbar .mark { display: none; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 520px;
  overflow: hidden; background: #000;
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* video and poster tiers: the same scene pre-rendered, filling the hero like the canvas */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#vOpen { z-index: 3; }        /* the opening covers the loop waiting under it, which covers the still */
#vLoop { z-index: 2; }
.hero-media img { z-index: 1; }
.hero-media[hidden], .hero-media [hidden] { display: none !important; }
.hero.media canvas { display: none; }
.hero-fallback {
  position: absolute; inset: 0; display: none;
  background: radial-gradient(ellipse 60% 18% at 50% 54%, rgba(242, 178, 122, 0.35), transparent 70%),
              radial-gradient(circle at 50% 50%, #000 0 9%, transparent 9.5%),
              radial-gradient(ellipse at 50% 50%, #120c08, #000 70%);
}
.hero.nogl .hero-fallback { display: block; }

.hero-text {
  position: absolute; left: clamp(20px, 5vw, 64px); bottom: clamp(28px, 7vh, 72px); z-index: 4;
  max-width: 640px; pointer-events: none;
  opacity: 0; transform: translateY(10px); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero.text-on .hero-text { opacity: 1; transform: none; }
.hero-text h1 {
  margin: 0; font-weight: 400; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.05; letter-spacing: 0.01em;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
}
.hero-text h1 .alt { color: rgba(231, 227, 218, 0.5); font-size: 1em; font-weight: 300; }
.hero-text p {
  margin: 12px 0 0; font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2); text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
}
.slate {
  position: absolute; right: clamp(18px, 4vw, 44px); bottom: clamp(28px, 7vh, 72px); z-index: 4;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(231, 227, 218, 0.38);
  opacity: 0; transition: opacity 1.2s ease 0.5s;
}
.hero.text-on .slate { opacity: 1; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 18px; z-index: 4; width: 1px; height: 38px;
  background: linear-gradient(rgba(231, 227, 218, 0), rgba(231, 227, 218, 0.5));
  opacity: 0; transition: opacity 1s ease 0.9s;
}
.hero.text-on .scroll-cue { opacity: 1; }
@media (max-width: 760px) {
  .slate { display: none; }
  .orbit-labels { display: none; }   /* phones: the top bar carries navigation */
}

/* Menu labels attached to the direct images of the orbiting hot spots */
.orbit-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.orbit-label {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(240, 236, 228, 0.9); text-decoration: none; white-space: nowrap;
  text-shadow: 0 0 8px #000, 0 0 18px rgba(0, 0, 0, 0.9);
  opacity: 0; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
  will-change: transform;
}
.hero.labels-on .orbit-label.vis { opacity: 1; }
.orbit-label .ring {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255, 236, 214, 0.75); box-shadow: 0 0 10px rgba(255, 210, 160, 0.6);
  transition: transform 0.25s, border-color 0.25s;
}
.orbit-label .tick { width: 18px; height: 1px; background: rgba(240, 236, 228, 0.35); flex: none; }
.orbit-label:hover, .orbit-label:focus-visible { color: #fff; outline: none; }
.orbit-label:hover .ring, .orbit-label:focus-visible .ring { transform: scale(1.5); border-color: #fff; }

/* ------------------------------------------------------------------ sections */
section.page { position: relative; padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 64px) 40px; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.kicker {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 14px; margin: 0 0 28px;
}
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
h2 { font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; margin: 0 0 22px; }
h3 { font-weight: 600; font-size: 19px; margin: 0 0 6px; }
p { margin: 0 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
/* One column on phones and narrow windows: each figure follows its section heading and scrolls with
   the text (a sticky figure would sit on top of the text below it). */
@media (max-width: 860px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grid2 > .flow { display: contents; }
  .grid2 > .flow > * { order: 2; }
  .grid2 > .flow > .kicker, .grid2 > .flow > h2 { order: 0; }
  .grid2 > .sticky { position: static; order: 1; width: 100%; max-width: 420px; margin: 4px auto 34px; }
  .cv-side { margin-top: 44px; }
}
.ornament { width: 100%; height: auto; display: block; }
.sticky { position: sticky; top: 110px; }

/* About: the three lines */
.three { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.5; margin: 0 0 40px; }
.three span { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.three span:last-child { border-bottom: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 26px; font-size: 16px; }
.facts dt { color: var(--muted); font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 4px; }
.facts dd { margin: 0; }

/* Research topics tied to photon subrings */
.topic { padding: 20px 0 22px; border-top: 1px solid var(--rule); transition: background 0.3s; }
.topic:last-child { border-bottom: 1px solid var(--rule); }
.topic .order { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.1em; float: right; }
.topic.hl h3 { color: #fff; }

/* Publications */
.pubs { list-style: none; margin: 0; padding: 0; }
.pubs li { padding: 18px 0; border-top: 1px solid var(--rule); transition: color 0.2s; }
.pubs li:last-child { border-bottom: 1px solid var(--rule); }
.pubs .t { font-size: 18px; color: var(--ink); }
.pubs .au { font-size: 15px; color: var(--ink-2); }
.pubs .meta { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 4px; }
.pubs .status { color: var(--warm); }
.pubs li:hover .t { color: #fff; }
.pubsub { font-family: var(--sans); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 34px 0 6px; }

/* Blog */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { padding: 18px 0; border-top: 1px solid var(--rule); }
.posts li:last-child { border-bottom: 1px solid var(--rule); }
.posts .date { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.posts .tag { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm); margin-left: 10px; }
.posts h3 a { text-decoration: none; }

/* CV */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border: 1px solid rgba(242, 178, 122, 0.5);
  border-radius: 999px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); background: rgba(242, 178, 122, 0.05); transition: background 0.25s, border-color 0.25s;
}
.btn:hover { background: rgba(242, 178, 122, 0.14); border-color: var(--warm); }
.cv-block { position: relative; padding: 26px 0 8px; }
.kerr { max-width: 600px; margin: 0 0 0 auto; }
.cv-side { align-self: center; }   /* the figure and the teaching list balance the longer record on the left */
.cv-block .spectrum { position: absolute; left: 236px; top: -22px; width: 230px; max-width: 50%; opacity: 0.9; pointer-events: none; }
@media (max-width: 860px) { .cv-block .spectrum { position: static; display: block; width: 100%; max-width: 360px; margin: 0 0 18px; } }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 16px; }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list .when { float: right; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 16px; }

/* Contact */
.contact-lines { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.7; }
.contact-lines a { text-decoration: none; border-bottom: 1px solid rgba(242, 178, 122, 0.35); }

/* Footer with the Penrose-diagram sitemap */
footer { padding: 60px clamp(20px, 5vw, 64px) 70px; border-top: 1px solid var(--rule); margin-top: 60px; }
footer .wrap { display: grid; grid-template-columns: minmax(0, 390px) 1fr; gap: 50px; align-items: center; }
@media (max-width: 760px) { footer .wrap { grid-template-columns: 1fr; } }
footer .credits { font-family: var(--sans); font-size: 12px; line-height: 1.8; color: var(--faint); letter-spacing: 0.04em; }
.penrose a text { fill: var(--muted); transition: fill 0.2s; }
.penrose a:hover text { fill: #fff; }
.penrose a:hover circle { fill: var(--warm); }

/* Scroll indicator drawn as the Page curve. It lives in the right margin beside the content column,
   so it shrinks with that margin and is left out where there is none (narrow windows, phones). */
.page-curve {
  position: fixed; right: 14px; bottom: 16px; z-index: 25;
  width: min(128px, calc((100vw - var(--maxw)) / 2 - 28px)); aspect-ratio: 128 / 62;
  opacity: 0; transition: opacity 0.6s; pointer-events: none;
}
.page-curve svg { display: block; width: 100%; height: 100%; }
.page-curve.on { opacity: 1; }
@media (max-width: 1260px) { .page-curve { display: none; } }

/* Debug / validation panel */
.debug {
  position: fixed; left: 14px; top: 64px; z-index: 40; width: 300px; max-height: calc(100vh - 90px); overflow: auto;
  background: rgba(8, 10, 14, 0.9); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px;
  font-family: var(--sans); font-size: 12px; color: var(--ink-2);
}
.debug label { display: grid; grid-template-columns: 92px 1fr 46px; gap: 8px; align-items: center; margin: 6px 0; }
.debug input[type=range] { width: 100%; }
.debug .val { font-family: var(--mono); text-align: right; color: var(--muted); }
.debug .row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.debug button { background: #12161d; color: var(--ink); border: 1px solid var(--rule); border-radius: 6px; padding: 5px 9px; cursor: pointer; font: inherit; }
.debug pre { white-space: pre-wrap; font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 10px 0 0; }
.valid-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* Blog post pages */
.post { max-width: 720px; margin: 0 auto; padding: 130px 22px 60px; }
.post h1 { font-weight: 400; font-size: clamp(32px, 4vw, 46px); line-height: 1.15; margin: 0 0 12px; }
.post .byline { font-family: var(--sans); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px; }
.post figure { margin: 34px 0; }
.post figcaption { font-size: 15px; color: var(--muted); margin-top: 10px; }
.post math[display="block"] { margin: 22px 0; font-size: 1.12em; }
.post .note { border-left: 2px solid var(--warm); padding: 4px 0 4px 18px; color: var(--ink-2); font-size: 16px; margin: 30px 0; }