/* ============================================================
   Jiaxuan Chen — Academic CV
   Design ported from omyteaai.com: warm-stone editorial palette,
   liquid-glass islands, a fixed glowing particle field, Newsreader
   serif + Inter + JetBrains Mono, GSAP reveals, day + night themes.
   Bilingual EN / 中文 · Save-as-PDF · print-clean.
   ============================================================ */

/* ---- DAY (light) ---- */
:root{
  --page:#faf9f5; --surface:#f2f0e9; --inset:#e9e6db; --hairline:#ddd9cc;
  --ink:#1a1916; --body:#3d3b35; --muted:#6b685f;
  --accent:#c25d3c; --accent-deep:#a84a2c; --accent-tint:#f0e3da;
  --plate:rgba(250,249,245,0.34);
  --serif:"Newsreader",Georgia,"Songti SC","STSong",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --cjk-strong:"PingFang SC","Hiragino Sans GB","Heiti SC","STHeiti","Microsoft YaHei",sans-serif;
  /* motion tokens: canonical owner = craft.css (loads after this file on every page carrying both) — keep the two blocks identical */
  --ease:cubic-bezier(0.28,0.11,0.32,1);
  --gold:#e8c37a;                 /* PROMOTE: structure key — was used bare in .flat-group but never declared */
  --ease-out:cubic-bezier(0.22,0.61,0.30,1);
  --ease-io:cubic-bezier(0.62,0.02,0.22,1);
  --ease-spring:cubic-bezier(0.34,1.12,0.42,1);
  --dur-1:.20s; --dur-2:.34s; --dur-3:.62s; --dur-4:.9s;
  --edge:22px;                    /* ONE inset for every floating chrome corner over the cosmos */
  --glass-rim:linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.22) 34%, rgba(255,255,255,0.06) 56%, rgba(194,93,60,0.32) 100%);
  color-scheme:light;
}
/* ---- NIGHT (warm near-black; particles glow additively) — DEFAULT ---- */
:root[data-theme="dark"]{
  --page:#0b0a09; --surface:#141210; --inset:#1c1915; --hairline:rgba(255,255,255,0.10);
  --ink:#f4f0e8; --body:#bdb6a8; --muted:#8a8276;
  --accent:#e0876a; --accent-deep:#ec9376; --accent-tint:rgba(224,135,106,0.16);
  --plate:rgba(12,11,9,0.40);
  --read:#cbc4b6;   /* prose-contrast step (same as reading pages) — activates the .lede/.entry --read tint at night */
  --glass-rim:linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 36%, rgba(255,255,255,0.03) 58%, rgba(224,135,106,0.45) 100%);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; hanging-punctuation:first;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--body); background:var(--page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
a{color:inherit;text-decoration:none;}

/* deep 3D space — transparent WebGL ember-cosmos, the deepest layer (behind the Nye Clock armature) */
#deep{position:fixed; inset:0; width:100%; height:100%; z-index:-2; display:block; pointer-events:none;}
/* fixed full-page particle field — scrolling never disturbs it, painted ON TOP of #deep */
#field{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none;}
body.field-off #field{display:none;}
body.field-off{background:var(--page);}

.content{position:relative; z-index:1;}
.rail{max-width:1000px; margin:0 auto; padding-inline:32px;}
@media(max-width:640px){.rail{padding-inline:20px;}}

/* ---- i18n: hide the inactive language ---- */
.locale-en .i18n-zh{display:none !important;}
.locale-zh .i18n-en{display:none !important;}
.locale-zh body{line-height:1.72;}

/* ---- typography primitives ---- */
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); font-weight:500;}
h1,h2,h3{font-family:var(--serif); color:var(--ink); font-weight:500;}
h1{font-size:clamp(38px,6.4vw,72px); line-height:1.05; letter-spacing:-.025em;}
h2{font-size:clamp(25px,3.4vw,38px); line-height:1.14; letter-spacing:-.018em;}
.u{color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:4px;}
.locale-zh h1,.locale-zh h2,.locale-zh h3{letter-spacing:0;}
.locale-zh, .locale-zh .lede, .locale-zh .entry p, .locale-zh .pubs li{ hanging-punctuation:none; font-variant-numeric:normal; }

/* liquid-glass rim helper */
.glass{position:relative; background:rgba(255,255,255,0.42);
  -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 34px -18px rgba(26,25,22,0.24);}
:root[data-theme="dark"] .glass{background:rgba(255,255,255,0.06); box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 36px -18px rgba(0,0,0,0.7);}
.glass::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none;
  background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}

/* ============================================================ NAV */
.nav{position:sticky; top:14px; z-index:50; max-width:1000px; margin:14px auto 0; padding-inline:14px;}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 12px 9px 20px; border-radius:999px;}
.brand{font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.01em; white-space:nowrap;}
.brand sup{font-family:var(--mono); font-size:9px; color:var(--accent-deep); letter-spacing:.1em; vertical-align:super; margin-left:3px;}
.brand .brand-zh{font-family:var(--cjk-strong); font-weight:700; font-size:.82em; margin-left:5px; letter-spacing:.06em;}
.nav__right{display:flex; gap:8px; align-items:center;}
.nav__links{display:flex; gap:4px; align-items:center;}
.nav__links a{font-size:14.5px; color:var(--body); padding:8px 13px; border-radius:999px; transition:background .2s,color .2s; white-space:nowrap;}
.nav__links a:hover{color:var(--ink); background:color-mix(in srgb, var(--muted) 16%, transparent);}
.nav__cta{font-size:14px; color:var(--page)!important; background:var(--ink); transition:background .2s; padding:8px 15px!important;}
.nav__cta:hover{background:var(--accent-deep)!important;}
@media(max-width:820px){.nav__links a{display:none;}}

/* language pill switch */
.lang{display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--hairline); background:transparent;}
.lang button{border:none; background:transparent; color:var(--muted); font-family:var(--mono); font-size:12px; font-weight:500; min-height:28px;
  letter-spacing:.04em; padding:5px 10px; border-radius:999px; cursor:pointer; transition:background .2s,color .2s; line-height:1;}
.lang button[aria-pressed="true"]{background:var(--accent); color:#fff;}
.lang button:hover:not([aria-pressed="true"]){color:var(--ink);}

/* icon buttons (theme, field toggle) */
.iconbtn{width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline); background:transparent; color:var(--body);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:border-color .2s,color .2s;}
.iconbtn:hover{border-color:var(--ink); color:var(--ink);}
.iconbtn svg{width:16px; height:16px;}
.iconbtn .moon,.iconbtn .eyeoff{display:none;}
:root[data-theme="dark"] #themebtn .sun{display:none;}
:root[data-theme="dark"] #themebtn .moon{display:block;}
body.field-off #fieldbtn .eye{display:none;}
body.field-off #fieldbtn .eyeoff{display:block;}
@media(max-width:400px){ #fieldbtn{display:none;} }

/* small pill button (PDF) */
.pill{font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink); border:1px solid var(--hairline);
  background:transparent; padding:8px 14px; border-radius:999px; cursor:pointer; transition:border-color .2s,background .2s,color .2s; white-space:nowrap;}
.pill:hover{border-color:var(--ink); background:color-mix(in srgb, var(--muted) 12%, transparent);}
@media(max-width:520px){ .pill{padding:8px 11px; font-size:12.5px;} }

/* ============================================================ HERO */
.hero{position:relative; padding:76px 0 40px;}
.hero .rail{position:relative; z-index:2;}
.hero__in{max-width:640px;}
.hero h1{margin:20px 0 4px; text-shadow:0 0 26px var(--page), 0 0 11px var(--page), 0 1px 0 rgba(0,0,0,.35); font-variation-settings:"opsz" 72; letter-spacing:-.028em; text-wrap:balance;}
.hero h1 .name-zh{font-family:var(--cjk-strong); font-weight:700; font-size:.5em; color:var(--body); letter-spacing:.08em; margin-left:.5em; vertical-align:.14em;}
.locale-zh .hero h1 .name-en{font-size:.62em; color:var(--body); font-weight:400; display:block; letter-spacing:-.01em; margin-bottom:.1em;}
.hero .lead{font-size:clamp(18px,2vw,21px); line-height:1.58; color:var(--body); max-width:54ch; margin:22px 0 24px; text-shadow:0 0 20px var(--page); font-variant-numeric:proportional-nums oldstyle-nums; text-wrap:pretty;}
.hero__contact{display:flex; flex-wrap:wrap; gap:9px 10px; font-family:var(--mono); font-size:12.5px; letter-spacing:.01em;}
.hero__contact a,.hero__contact span{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:var(--plate); border:1px solid var(--hairline); color:var(--body); text-shadow:none; transition:border-color .2s,color .2s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.hero__contact a:hover{border-color:var(--accent); color:var(--ink);}
.hero__contact .dot{color:var(--accent);}

/* ============================================================ SECTIONS */
section:not(.hero){position:relative; padding:22px 0;}
section:not(.hero) > .rail{position:relative; background:var(--plate); border-radius:24px; padding:46px 46px;
  -webkit-backdrop-filter:blur(3px) saturate(1.08); backdrop-filter:blur(3px) saturate(1.08);
  box-shadow:0 18px 50px -30px rgba(0,0,0,0.32);}
section:not(.hero) > .rail::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px; pointer-events:none;
  background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
@media(max-width:640px){ section:not(.hero) > .rail{padding:34px 22px; border-radius:18px;} }

/* soft page-colour halo keeps text crisp over the transparent field */
.content p, .content h2, .content h3, .secnum, .item-affil, .eyebrow, .degree, .where, .pub-title{
  text-shadow:0 0 15px var(--page), 0 0 6px var(--page);}

.secnum{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.secnum::before{content:""; width:28px; height:1px; background:linear-gradient(to right,var(--gold),color-mix(in srgb,var(--gold) 10%,transparent)); flex:none;}
.secnum b{color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums lining-nums;}
.sec-h2{margin-bottom:26px; max-width:40ch;}
.locale-zh .sec-h2{max-width:none;}

/* body paragraphs justified like omytea (never the mono affiliation line) */
.lede, .entry p:not(.item-affil), .proj p{text-align:justify; -webkit-hyphens:auto; hyphens:auto;}
.locale-zh .lede,.locale-zh .entry p,.locale-zh .proj p{-webkit-hyphens:none; hyphens:none;}
@media(max-width:640px){ .lede, .entry p:not(.item-affil), .proj p{text-align:left; -webkit-hyphens:none; hyphens:none;} }
.lede, .entry p:not(.item-affil){ color:var(--read); }
.lede{font-size:clamp(17px,1.7vw,19px); line-height:1.66; color:var(--read); max-width:66ch; font-variant-numeric:proportional-nums oldstyle-nums; text-wrap:pretty;}
:root:not([data-theme="dark"]) .lede, :root:not([data-theme="dark"]) .entry p:not(.item-affil){ color:var(--body); }

/* ---- Education timeline ---- */
.timeline{list-style:none; display:grid; gap:22px;}
.timeline li{padding-left:20px; border-left:1px solid; border-image:linear-gradient(to bottom, rgba(232,195,122,.32), rgba(232,195,122,.05)) 1;}
.timeline .row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; align-items:baseline;}
.where{font-family:var(--serif); font-size:20px; color:var(--ink); font-weight:500;}
.when{font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.02em; font-variant-numeric:tabular-nums;}
.degree{margin-top:4px; color:var(--body); font-size:15.5px;}

/* ---- research / experience entries ---- */
.entries{list-style:none;}
.entry{padding:24px 0; border-top:1px solid var(--hairline);}
.entry:first-child{padding-top:0; border-top:none;}
.entry:last-child{padding-bottom:0;}
.entry h3{font-size:20px; line-height:1.32; margin-bottom:5px;}
.item-affil{font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--accent-deep); margin-bottom:11px; font-variant-numeric:tabular-nums;}
.entry p{font-size:15.5px; line-height:1.62; color:var(--body); max-width:74ch;}
.artifacts{list-style:none; margin-top:12px; display:flex; flex-wrap:wrap; gap:8px;}
.artifacts li{font-family:var(--mono); font-size:12px; padding:5px 11px; border-radius:999px; border:1px solid var(--hairline); color:var(--muted); background:color-mix(in srgb, var(--surface) 40%, transparent);}
.artifacts a{color:var(--accent-deep); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset:2px;}
.artifacts a:hover{color:var(--ink);}

/* ---- publications ---- */
.pubs{list-style:none;}
.pubs li{padding:16px 0; border-top:1px solid var(--hairline); font-size:15.5px; line-height:1.6; color:var(--body); text-wrap:pretty; font-variant-numeric:proportional-nums oldstyle-nums;}
.pubs li .pub-note, .pubs li .when{ font-variant-numeric:tabular-nums lining-nums; }
.pubs li:first-child{border-top:none; padding-top:0;}
.pub-title{font-family:var(--serif); font-style:italic; color:var(--ink);}
.pub-venue{color:var(--muted);}
.pub-note{font-family:var(--mono); font-size:12px; color:var(--accent-deep);}

/* ---- projects ---- */
.projs{list-style:none; display:grid; gap:18px;}
.proj{border-radius:16px; padding:26px 26px;}
.proj h3{font-size:19px; margin-bottom:9px;}
.proj p{font-size:15px; line-height:1.6; color:var(--body); max-width:72ch;}

/* ---- skills chips ---- */
.skill-group{font-family:var(--serif); font-size:17px; color:var(--ink); font-weight:500; margin:26px 0 13px;}
.skills{display:flex; flex-wrap:wrap; gap:10px;}
.skills + .skills{margin-top:0;}
.skills span{font-size:13.5px; color:var(--body); padding:8px 14px; border-radius:999px;
  border:1px solid var(--hairline); background:color-mix(in srgb, var(--surface) 45%, transparent);}

/* ---- contact ---- */
.contact-mail{font-family:var(--serif); font-size:clamp(23px,3.6vw,34px); color:var(--ink); text-decoration:none; background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-position:0 100%; background-size:100% 2px; padding-bottom:2px; display:inline-block; margin-top:6px; transition:background-size var(--dur-3) var(--ease-out);}
.contact-mail:hover{ background-size:0% 2px; }
.contact-row{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:20px; font-family:var(--mono); font-size:12.5px;}
.contact-row a,.contact-row span{padding:7px 13px; border-radius:999px; border:1px solid var(--hairline); color:var(--body); transition:border-color .2s,color .2s;}
.contact-row a:hover{border-color:var(--accent); color:var(--ink);}

/* ---- footer ---- */
footer{position:relative; padding:44px 0 56px;}
.foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.foot__b{font-family:var(--serif); font-size:17px; color:var(--ink); font-weight:600;}
.foot__m{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.02em;}

/* ---- richer entry meta + status tags (publications / programs / writing) ---- */
.entry-meta{font-family:var(--mono); font-size:12px; letter-spacing:.015em; color:var(--muted);
  margin-bottom:11px; display:flex; flex-wrap:wrap; align-items:center; gap:7px 9px; font-variant-numeric:tabular-nums; line-height:1.5;}
.entry-meta .venue{color:var(--accent-deep); font-weight:500;}
.entry-meta .sep{opacity:.5;}
.tag{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; border:1px solid var(--hairline); color:var(--muted); white-space:nowrap; line-height:1.2;}
.tag--public{color:#3f7d5a; border-color:color-mix(in srgb,#3f7d5a 42%,transparent); background:color-mix(in srgb,#3f7d5a 8%,transparent);}
.tag--prep{color:var(--accent-deep); border-color:color-mix(in srgb,var(--accent) 40%,transparent); background:var(--accent-tint);}
.tag--internal,.tag--thesis,.tag--essay{color:var(--muted); background:color-mix(in srgb,var(--surface) 40%,transparent);}
:root[data-theme="dark"] .tag--public{color:#84d9a6; border-color:rgba(132,217,166,.36); background:rgba(132,217,166,.08);}

/* featured book */
.featured{border-radius:18px; padding:32px 30px; margin-bottom:20px;}
.featured h3{font-size:clamp(22px,2.6vw,28px); line-height:1.2; margin-bottom:10px;}
.featured p{max-width:78ch;}
.featured .isbns{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 8px; font-family:var(--mono); font-size:11px; color:var(--muted);}
.featured .isbns span{padding:4px 10px; border-radius:999px; border:1px solid var(--hairline);}

/* ============================================================ 生辰八字 · NATAL FRAME */
.bazi__intro{font-size:15.5px; color:var(--body); max-width:62ch; margin-bottom:22px;}
.bazi-frame{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:16/11;
  background:radial-gradient(120% 120% at 50% 0%, rgba(20,18,15,0.30), rgba(10,9,8,0.5));
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 24px 64px -34px rgba(0,0,0,0.6);}
.bazi-frame::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.3px; pointer-events:none; z-index:3;
  background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.bazi-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; opacity:0; transition:opacity 1s var(--ease);}
.bazi-frame iframe.in{opacity:1;}
.bazi-frame__poster{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; cursor:pointer;
  text-align:center; padding:24px; transition:opacity .4s var(--ease);}
.bazi-frame__poster .glyph{font-family:var(--serif); font-size:clamp(46px,8vw,72px); color:var(--accent); line-height:1; text-shadow:0 0 30px color-mix(in srgb,var(--accent) 45%,transparent);}
.bazi-frame__poster .ttl{font-family:var(--serif); font-size:21px; color:var(--ink);}
.bazi-frame__poster .sub{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted); max-width:44ch;}
.bazi-frame__poster .play{font-family:var(--sans); font-size:13.5px; color:var(--ink); border:1px solid var(--hairline); padding:9px 18px; border-radius:999px; transition:border-color .2s,background .2s;}
.bazi-frame__poster:hover .play{border-color:var(--accent); background:var(--accent-tint);}
.bazi-frame.loaded .bazi-frame__poster{opacity:0; pointer-events:none;}
.bazi__cap{margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;}
.bazi__cap b{color:var(--accent-deep); font-weight:500;}
@media(max-width:640px){ .bazi-frame{aspect-ratio:3/4;} }

/* ---- reveal ---- */
.reveal{opacity:0; transform:translateY(16px);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1 !important; transform:none !important;}}

/* skip link */
.skip-link{position:absolute; left:-9999px;}
.skip-link:focus{position:fixed; left:16px; top:16px; z-index:100; padding:10px 16px; border-radius:10px; background:var(--ink); color:var(--page);}

:focus-visible{outline:1.5px solid var(--accent); outline-offset:3px;}

/* ============================================================ HOMEPAGE (index.html) */
.anchor-stub{display:block; height:1px; width:1px;}
body.home{min-height:100vh;}

/* hero */
.home-hero{position:relative; min-height:clamp(600px,90vh,920px); display:flex; flex-direction:column; justify-content:center; padding:96px 0 56px;}
.home-hero__in{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr); gap:40px; align-items:center;}
@media(max-width:900px){ .home-hero__in{grid-template-columns:1fr;} }
.home-hero__text{max-width:660px; position:relative; z-index:2;}
.home-name{font-family:var(--serif); font-weight:500; font-size:clamp(46px,8.4vw,104px); line-height:1.0; letter-spacing:-.03em;
  color:var(--ink); margin:18px 0 22px; text-shadow:0 0 30px var(--page), 0 0 12px var(--page);}
.home-name__zh{font-family:var(--cjk-strong); font-weight:700; font-size:.4em; color:var(--body); letter-spacing:.06em; margin-left:.22em; vertical-align:.18em; white-space:nowrap;}
.home-lead{font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.7vw,33px); line-height:1.32; color:var(--ink);
  max-width:24ch; margin-bottom:30px; text-shadow:0 0 22px var(--page), 0 0 9px var(--page);}
.locale-zh .home-lead{max-width:20ch; line-height:1.45;}
.home-links{display:flex; flex-wrap:wrap; gap:9px 20px; align-items:center; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;}
.home-links a{color:var(--muted); padding-bottom:2px; border-bottom:1px solid transparent; transition:color .2s,border-color .2s;}
.home-links a:hover{color:var(--ink); border-bottom-color:var(--accent);}
.home-links__cv{color:var(--accent-deep)!important; border-bottom-color:color-mix(in srgb,var(--accent) 40%,transparent)!important;}
.home-links__cv:hover{color:var(--ink)!important;}
.home-hero__aside{position:relative; display:flex; align-items:center; justify-content:center;}
@media(max-width:900px){ .home-hero__aside{margin-top:26px;} }

/* Nye Clock — the real 3D orrery as a FULL-VIEWPORT spatial armature (transparent, floats in #deep) */
.bazi-clock{position:fixed; inset:0; width:100%; height:100%; border:0; display:block; background:transparent; pointer-events:none; z-index:-1;}
body.field-off .bazi-clock{display:none;}

/* ===== M11 · natal celestial sphere — constellation labels + hover tooltip ===== */
.natal-labels{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.natal-label{font-family:var(--serif,"Newsreader",serif); font-size:.8rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(228,218,204,.92); text-shadow:0 1px 12px rgba(0,0,0,.85); white-space:nowrap; transition:opacity .5s ease;}
.natal-label--key{font-size:1rem; letter-spacing:.16em; color:var(--accent,#e0876a);}
.natal-tip{background:rgba(11,10,9,.84); border:1px solid rgba(224,135,106,.30); border-radius:9px; padding:9px 12px; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); box-shadow:0 8px 30px rgba(0,0,0,.45);}
.natal-tip__t{font-family:var(--serif,"Newsreader",serif); font-size:.9rem; line-height:1.32; color:#efe7db;}
.natal-tip__r{margin-top:4px; font-family:var(--mono,"JetBrains Mono"),monospace; font-size:.68rem; letter-spacing:.02em; color:var(--accent,#e0876a);}

/* ===== M12 · footprint globe section ===== */
.footprint{padding:4vh 0 10vh;}
/* the globe floats IN the cosmos — no frosted plate box around this section */
#footprint > .rail{background:transparent; box-shadow:none;}
#footprint > .rail::after{content:none;}
.footprint__h{font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.1; margin:.5rem 0 .85rem;}
.footprint__lead{max-width:54ch; color:var(--body); font-size:1.02rem; line-height:1.66;}
.footprint__lead em{color:var(--ink); font-style:italic;}
.footprint-globe{position:relative; width:100%; height:min(64vh,580px); margin-top:26px; border-radius:16px; overflow:hidden; cursor:grab; touch-action:none;}
.footprint-globe:active{cursor:grabbing;}
.footprint-globe canvas{display:block; width:100%; height:100%;}
.footprint-globe.is-loading::after{content:""; position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%; border:2px solid var(--hairline); border-top-color:var(--accent); animation:fp-spin .9s linear infinite;}
@keyframes fp-spin{to{transform:rotate(360deg);}}
.footprint-globe__hint{position:absolute; left:0; right:0; bottom:14px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); opacity:0; transition:opacity .6s ease; pointer-events:none;}
.footprint-globe.is-live .footprint-globe__hint{opacity:.7;}
.footprint-globe--fallback{min-height:200px;}
.footprint-globe--fallback::after{content:"602,733 GPS points — enable WebGL to explore the trace"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--muted); font-family:var(--mono); font-size:12px;}

/* ===== clock-view — the 生辰八字 portal opens the real Nye Clock ===== */
.content{transition:opacity .9s ease;}
#field{transition:opacity .9s ease;}
body.clock-view .content{opacity:.04; pointer-events:none;}
body.clock-view #field{opacity:.3;}
body.clock-view .natal-labels{opacity:0;}
.clock-exit{position:fixed; top:20px; right:20px; z-index:30; display:none; font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--ink); background:var(--plate); border:1px solid var(--hairline); border-radius:999px; padding:10px 18px; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.clock-exit:hover{color:var(--accent); border-color:var(--accent);}
.clock-hint{position:fixed; left:0; right:0; bottom:18px; z-index:30; display:none; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); pointer-events:none;}

/* 干支天球 — bespoke orrery drawn in the field's own light (no box, no bg) */
.orrery{width:min(430px,80vw); height:auto; overflow:visible; display:block;}
.orrery .gz{font-family:var(--serif); font-size:23px; letter-spacing:1px;}
.orrery .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.24em; fill:var(--muted);}
.orrery .cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; fill:var(--muted);}
.orrery-spin{transform-box:view-box; transform-origin:220px 220px; animation:orrerySpin 180s linear infinite;}
.orrery-moon{transform-box:view-box; transform-origin:220px 220px; animation:orreryMoon 110s linear infinite;}
@keyframes orrerySpin{to{transform:rotate(360deg);}}
@keyframes orreryMoon{to{transform:rotate(-360deg);}}
@media(prefers-reduced-motion:reduce){.orrery-spin,.orrery-moon{animation:none;}}
.home-hero__cue{position:absolute; left:0; right:0; bottom:20px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); opacity:.7;}

/* portals */
.portals{position:relative; padding:6px 0 70px;}
.portal-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;}
.portal{position:relative; display:block; border-radius:18px; padding:26px 22px 48px; min-height:168px; overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);}
.portal:hover{transform:translateY(-5px); box-shadow:0 20px 48px -26px rgba(0,0,0,.72), inset 0 0 40px -26px rgba(232,195,122,.16);}
.portal__i{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep);}
.portal h3{font-family:var(--serif); font-weight:500; font-size:23px; line-height:1.14; color:var(--ink); margin:13px 0 9px;}
.portal p{font-size:13.5px; line-height:1.5; color:var(--muted); max-width:30ch;}
.portal__go{position:absolute; right:20px; bottom:16px; font-size:22px; color:var(--accent); opacity:.55; transition:opacity .25s,transform .25s;}
.portal:hover .portal__go{opacity:1; transform:translateX(4px);}
.portal--cv{background:var(--accent-tint);}
:root[data-theme="dark"] .portal--cv{background:color-mix(in srgb,var(--accent) 12%,transparent);}

/* homepage footer */
.home-foot{position:relative; padding:36px 0 60px;}

/* ============================================================ PRINT / PDF */
@media print{
  :root{ color-scheme:light;
    --page:#fff; --surface:#fff; --inset:#fff; --hairline:#c9c9c9;
    --ink:#111; --body:#1a1a1a; --muted:#555; --accent:#0d47a1; --accent-deep:#0d47a1; --accent-tint:#dfe6f3; --plate:transparent;
  }
  .no-print{display:none !important;}
  #field{display:none !important;}
  /* GSAP reveal sets un-scrolled sections to opacity:0 — force everything visible for print */
  .reveal{opacity:1 !important; transform:none !important;}
  .hero .eyebrow,.hero h1,.hero .lead,.hero__contact{opacity:1 !important; transform:none !important;}
  html,body{background:#fff !important;}
  body{font-size:10.5pt; color:#111 !important; overflow:visible;}
  .content p, .content h2, .content h3, .secnum, .item-affil, .eyebrow, .degree, .where, .pub-title{text-shadow:none !important;}
  .rail{max-width:none; padding-inline:0;}
  .hero{padding:0 0 12px;}
  .hero h1{text-shadow:none !important;}
  .hero .lead{text-shadow:none !important; color:#1a1a1a !important; max-width:none;}
  .hero__contact a,.hero__contact span{background:transparent; border-color:#c9c9c9; -webkit-backdrop-filter:none; backdrop-filter:none;}
  section:not(.hero){padding:8px 0; break-inside:avoid;}
  section:not(.hero) > .rail{background:transparent !important; box-shadow:none !important; padding:6px 0;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-top:1px solid #d7d7d7; border-radius:0;}
  section:not(.hero) > .rail::after{display:none !important;}
  section#about > .rail{border-top:none;}
  .glass{background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important;}
  .glass::after{display:none !important;}
  .proj{border:1px solid #d7d7d7; padding:14px;}
  .artifacts li,.skills span{background:transparent !important; border-color:#c9c9c9;}
  .entry,.pubs li{break-inside:avoid;}
  /* new richer components */
  .entry-meta{color:#444 !important;}
  .entry-meta .venue{color:#0d47a1 !important;}
  .tag{border:1px solid #b9b9b9 !important; color:#444 !important; background:transparent !important;}
  .featured{border:1px solid #d7d7d7; padding:14px;}
  .featured .isbns span{border-color:#c9c9c9;}
  #bazi{display:none !important;}  /* 生辰八字 instrument omitted from the printed CV */
  a{color:#0d47a1 !important;}
  @page{margin:1.4cm;}
}

/* ============================================================ RESPONSIVE */
@media(max-width:640px){
  body{font-size:16px;}
  .hero{padding:56px 0 28px;}
  section:not(.hero){padding:16px 0;}
  .entry h3,.where{font-size:18px;}
}

/* ============================================================
   COSMOS — the one-world homepage. No sections, no scroll:
   the 3D scene IS the page. #deep becomes the interactive stage;
   the beloved 2D field floats above it as atmosphere.
   ============================================================ */
body.cosmos{overflow:hidden; height:100vh; height:100dvh;
  /* the cosmos chrome sits on PINNED-DARK glass regardless of the day/night toggle — pin the text
     variables too, or a stored light theme renders ~1.7:1 near-black labels on dark surfaces. */
  --ink:#f4f0e8; --body:#bdb6a8; --muted:#8a8276;}
body.cosmos #deep{position:fixed; inset:0; z-index:0; pointer-events:auto; cursor:grab; touch-action:none;}
body.cosmos #deep:active{cursor:grabbing;}
body.cosmos #field{position:fixed; inset:0; z-index:1; pointer-events:none;}
body.cosmos .natal-labels{z-index:2;}
body.cosmos .natal-tip{z-index:6;}

.cosmos-id{position:fixed; top:var(--edge); left:var(--edge); z-index:4; max-width:min(400px,72vw); padding:16px 20px 14px; border-radius:16px; pointer-events:auto; background:rgba(11,10,9,.40); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 20px 50px -30px rgba(0,0,0,.75);}
.cosmos-name{font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.12; margin:.35rem 0 .5rem; color:var(--ink); font-weight:600; letter-spacing:-.014em; text-shadow:0 0 22px rgba(11,10,9,.9), 0 1px 0 rgba(0,0,0,.5);}
.cosmos-name__zh{font-weight:500; margin-left:.35rem;}
/* contact + profiles — quiet row under the name (CV leads) */
.cosmos-links{display:flex; flex-wrap:wrap; gap:4px 13px; font-size:12.5px; padding-top:9px; border-top:1px solid rgba(255,255,255,.10);}
.cosmos-links a{color:var(--muted); text-decoration:none; border-bottom:none; padding-bottom:2px; transition:color .18s ease;}
.cosmos-links a:hover{color:var(--ink);}
.cosmos-links__cv{color:var(--accent-deep)!important; font-weight:500;}

.cosmos-ui{position:fixed; top:var(--edge); right:var(--edge); z-index:4; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;}

.cosmos-legend{position:fixed; left:22px; bottom:20px; z-index:4; display:flex; flex-wrap:wrap; gap:4px 18px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); pointer-events:none; max-width:70vw;}
.cosmos-legend__item{white-space:nowrap;}
/* ROOT INVARIANT — never overlap again: the dock owns the very bottom band (bottom:20px, nothing below
   it); ALL hint text sits in a reserved band strictly ABOVE it (bottom:74px) and grows UPWARD. So no
   hint line, on any view or screen width, can ever share vertical space with the buttons — the historic
   whack-a-mole (fix one hint, the other or the mobile value re-collides) is structurally impossible now.
   cosmos-hint (3D) and ground-hint both use the 74px baseline; only one is ever visible at a time. */
.cosmos-hint{position:fixed; left:50%; transform:translateX(-50%); bottom:74px; z-index:4; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); pointer-events:none; text-align:center; white-space:nowrap; max-width:96vw; opacity:.85; transition:opacity 1s ease;}
.cosmos-hint.is-faded{opacity:0;}

/* flat fallback = a full mobile home. Scrollable, top-aligned, reaches every page. */
.cosmos-flat{position:fixed; inset:0; z-index:8; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:26px; padding:78px 26px 56px;
  color:var(--body); font-family:var(--serif);
  /* a whisper of the cosmos' warmth over the opaque page — a frozen, motion-free
     equivalent of the sky for reduced-motion / low-power visitors (P1-2). */
  background:radial-gradient(130% 62% at 50% -12%, rgba(224,135,106,.09), transparent 58%), var(--page);}
/* when the flat menu is up, the floating orrery chrome would only clutter — retire it
   (the field toggle is meaningless with no particle field to toggle) */
body.is-flat .cosmos-id, body.is-flat .cosmos-legend, body.is-flat .cosmos-hint,
body.is-flat #earth-cta, body.is-flat #sun-cta, body.is-flat #star-cta, body.is-flat #fieldbtn{display:none !important;}
body.is-flat .cosmos-ui{top:18px; right:18px; z-index:9;}
.flat-id{margin-top:8px;}
.flat-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep);}
.flat-name{font-family:var(--serif); font-size:clamp(30px,9vw,42px); font-weight:600; color:var(--ink); letter-spacing:-.01em; margin:8px 0 14px; line-height:1.05;}
.flat-name span[lang="zh"]{font-family:var(--cjk-strong); font-weight:700; font-size:.62em; margin-left:.3em;}
.flat-contact{display:flex; flex-wrap:wrap; gap:16px;}
.flat-contact a{font-family:var(--mono); font-size:13px; color:var(--body); text-decoration:none; border-bottom:1px solid var(--hairline); padding-bottom:2px;}
.flat-contact a:active{color:var(--accent);}
.flat-menu{display:flex; flex-direction:column; border-top:1px solid var(--hairline);}
.flat-group{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:26px 0 4px;}
.flat-menu a{display:block; font-family:var(--serif); font-size:20px; color:var(--ink); text-decoration:none;
  padding:15px 2px; border-bottom:1px solid var(--hairline);}
.flat-menu a:active{color:var(--accent);}
.flat-menu a.flat-cv{color:var(--accent-deep); margin-top:8px; border-bottom:none;}
.flat-note{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--muted); line-height:1.7; opacity:.8;}
@media(max-width:700px){
  .cosmos-id{top:14px; left:14px; right:14px; max-width:none; padding:70px 16px 13px;}
  .cosmos-name{font-size:clamp(1.45rem,7.6vw,2rem); margin-top:0;}
  /* 1:1 sizing with REAL hit-targets (the old transform:scale(.88) shrank every control below the
     44px touch minimum). #indexbtn is hidden at this width, so the row fits a 375px phone at full size. */
  .cosmos-ui{top:18px; right:14px; gap:6px; padding:6px 8px;}
  .uipill{padding:11px 13px;}
  .iconbtn{width:40px; height:40px;}
  .lang button{padding:10px 12px;}
  .cosmos-home{padding:12px 18px;}
  .exit3d{padding:11px 14px;}
  .cosmos-legend{display:none;}
  .cosmos-hint{left:14px; right:14px; transform:none; max-width:none; white-space:normal; text-align:center; bottom:76px;}
  .cosmos-dock{bottom:16px;}
}
/* THE COSMIC ADDRESS RAIL — a continuous scale breadcrumb on the right edge, read
   inner→outer (Solar System at top → Observable Universe at bottom). Populated &
   highlighted by space.js from window.CosmicLOD. Minimal: a tick + a label per tier;
   the current tier is gold with its label always shown, others reveal on hover. */
.cosmos-rail{position:fixed; right:var(--edge); top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; gap:1px; align-items:flex-end; pointer-events:none;
  opacity:0; transition:opacity .7s ease;}
.cosmos-rail.is-on{opacity:1;}
.cosmos-rail__i{display:flex; align-items:center; gap:9px; justify-content:flex-end;
  background:transparent; border:0; margin:0; font:inherit; color:inherit; appearance:none; -webkit-appearance:none;
  pointer-events:auto; cursor:pointer; padding:3.5px 0; opacity:.42; transition:opacity .3s ease;}
.cosmos-rail__i:focus-visible{outline:1.5px solid rgba(232,195,122,.55); outline-offset:3px;}
.cosmos-rail__i:hover{opacity:.95;}
.cosmos-rail__l{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; color:var(--muted);
  white-space:nowrap; opacity:0; transform:translateX(6px); transition:opacity .18s ease, transform .18s ease, color .18s ease;}
.cosmos-rail__t{width:30px; height:1px; background:var(--muted); flex:none; transform:scaleX(.5); transform-origin:right center;
  transition:transform .18s ease, background .18s ease;}   /* fixed box + scaleX: no layout animation, and the label never shifts on hover */
.cosmos-rail__i:hover .cosmos-rail__l{opacity:1; transform:none;}
.cosmos-rail__i:hover .cosmos-rail__t{transform:scaleX(.83); background:var(--accent);}
.cosmos-rail__i.is-cur{opacity:1;}
.cosmos-rail__i.is-cur .cosmos-rail__l{opacity:1; transform:none; color:#e8c37a;}
.cosmos-rail__i.is-cur .cosmos-rail__t{transform:scaleX(1); background:#e8c37a;}
body.is-flat .cosmos-rail, body.on-ground .cosmos-rail{opacity:0 !important; pointer-events:none !important;}
.cosmos-rail__s{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; color:var(--muted); opacity:.55; text-align:right; margin-top:1px;}
@media(max-width:700px){ .cosmos-rail{right:11px;} .cosmos-rail__l{font-size:9px;} .cosmos-rail__t{width:18px; transform:scaleX(.61);} .cosmos-rail__i:hover .cosmos-rail__t{transform:scaleX(1);} .cosmos-rail__s{display:none;} }

/* THE fix: author display:flex was defeating the hidden attribute — the "flat fallback"
   was an invisible full-viewport wall over every machine, eating all pointer input */
.cosmos-flat[hidden]{display:none !important;}
/* build 13 — the 2D ember field FUSES with the 3D world: a live radial mask
   (center/size driven from space.js each frame) keeps the dust breathing AROUND
   the solar system instead of smearing over it; pan/zoom move the clearing */
body.cosmos #field{
  opacity:.85;
  -webkit-mask-image:radial-gradient(circle at var(--fx,50%) var(--fy,46%),
    transparent 0, transparent var(--fr,30vmin),
    rgba(0,0,0,.5) calc(var(--fr,30vmin) + 13vmin), #000 calc(var(--fr,30vmin) + 28vmin));
  mask-image:radial-gradient(circle at var(--fx,50%) var(--fy,46%),
    transparent 0, transparent var(--fr,30vmin),
    rgba(0,0,0,.5) calc(var(--fr,30vmin) + 13vmin), #000 calc(var(--fr,30vmin) + 28vmin));
}
/* build 14 — the mask-hole approach is retired: the 2D field is now a quiet uniform
   veil; the real dust lives INSIDE the scene (breath layer: parallax + true occlusion
   + cursor-stirred), so fusion comes from depth, not from cutouts */
body.cosmos #field{opacity:.42; -webkit-mask-image:none; mask-image:none;}
/* build 16 — the 2D field IS the far cosmos: it moves BELOW the 3D stage, so the
   Sun, Earth, Moon and gears naturally occlude the star-dust behind them */
body.cosmos #field{z-index:-1; opacity:.62;}
body.cosmos.on-ground #field{z-index:2; opacity:.24 !important;}
/* build 26 — the Earth's doorway + the leave-for-the-map fade */
.earth-cta{position:fixed; z-index:6; transform:translate(-50%,-100%); display:none;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--ink); cursor:pointer;
  background:rgba(11,10,9,.78); border:1px solid rgba(224,135,106,.45); border-radius:999px; padding:10px 18px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 18px rgba(224,135,106,.12);}
.earth-cta.is-on{display:block;}
.earth-cta:hover{color:var(--accent); border-color:var(--accent);}
/* the focused-object DOSSIER card — bottom-left so it coexists with the centered door + bottom dock; shown only on focus */
.focus-card{position:fixed; left:26px; bottom:96px; z-index:6; max-width:340px;
  font-family:var(--mono); color:var(--ink); opacity:0; transform:translateY(8px);
  pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  background:rgba(11,10,9,.82); border:1px solid rgba(224,135,106,.30); border-radius:12px;
  padding:14px 16px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 18px rgba(224,135,106,.10);}
.focus-card.is-on{opacity:1; transform:translateY(0);}
.focus-card__h{font-family:var(--serif,"Newsreader",serif); font-size:1.02rem; color:#efe7db; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;}
.focus-card__b{margin:8px 0 0; font-size:.82rem; line-height:1.45; color:#cdc0b0;}
.focus-card__links{margin-top:10px; display:flex; flex-direction:column; gap:5px;}
.focus-card__links a{font-size:.75rem; color:var(--accent,#e0876a); text-decoration:none; pointer-events:auto;}
.focus-card__links a:hover{text-decoration:underline;}
.focus-card__chip{font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px solid rgba(224,135,106,.4); color:var(--accent);}
body.is-flat .focus-card, body.on-ground .focus-card{display:none !important;}
@media(max-width:700px){ .focus-card{left:14px; right:14px; max-width:none; bottom:104px;} }
.star-atlas[hidden]{display:none !important;}
.star-atlas{position:fixed; top:82px; right:22px; z-index:7; width:min(360px,calc(100vw - 44px));
  max-height:min(620px,calc(100dvh - 128px)); display:flex; flex-direction:column; gap:12px;
  font-family:var(--mono); color:var(--ink); background:rgba(11,10,9,.82);
  border:1px solid rgba(232,195,122,.18); border-radius:12px; padding:14px;
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 20px 54px -28px rgba(0,0,0,.9);}
.star-atlas__head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.star-atlas__head h2{margin:0; font-family:var(--serif); font-size:1.08rem; font-weight:500; line-height:1.1; color:#f6ede1;}
.star-atlas__close{width:28px; height:28px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; font-size:18px; line-height:1;}
.star-atlas__close:hover{color:#f6ede1; border-color:rgba(224,135,106,.58);}
.star-atlas__tools{display:flex; flex-direction:column; gap:8px;}
.star-atlas__tools input{width:100%; border:1px solid rgba(255,255,255,.13); border-radius:999px;
  background:rgba(255,255,255,.04); color:#f6ede1; padding:9px 12px; font:12px var(--mono); outline:none;}
.star-atlas__tools input:focus{border-color:rgba(224,135,106,.62);}
.star-atlas__tabs{display:flex; gap:6px; flex-wrap:wrap;}
.star-atlas__tabs button{border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.025);
  color:var(--muted); font:11px var(--mono); padding:6px 10px; cursor:pointer;}
.star-atlas__tabs button[aria-pressed="true"]{color:#f0b08e; border-color:rgba(224,135,106,.50); background:rgba(224,135,106,.08);}
.star-atlas__list{overflow:auto; padding-right:2px; scrollbar-width:thin; scrollbar-color:rgba(224,135,106,.35) transparent;}
.star-atlas:not([hidden]){animation:atlas-in var(--dur-2) var(--ease-out) both;}
@keyframes atlas-in{from{opacity:0; transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){ .star-atlas:not([hidden]){animation:none;} }
.earth-cta, .star-atlas__close, .star-atlas__tabs button, .star-atlas__go, .star-atlas__open, .focus-card__atlas button{
  transition:color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);}
.star-atlas__section{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:12px 0 3px; color:#e8c37a; font-size:10.5px; text-transform:uppercase;}
.star-atlas__section i{font-style:normal; color:rgba(214,204,188,.65);}
.star-atlas__row{display:grid; grid-template-columns:minmax(0,1fr) 30px; gap:8px; align-items:center;
  border-top:1px solid rgba(255,255,255,.07);}
.star-atlas__go{min-width:0; text-align:left; background:transparent; border:0; padding:10px 0; cursor:pointer; color:#efe7db;}
.star-atlas__title{display:block; font-family:var(--serif); font-size:14.5px; line-height:1.22; overflow-wrap:anywhere;}
.star-atlas__meta{display:block; margin-top:3px; color:rgba(214,204,188,.58); font:10.5px/1.35 var(--mono); overflow-wrap:anywhere;}
.star-atlas__open{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:999px; color:rgba(214,204,188,.68); text-decoration:none; border:1px solid transparent;}
.star-atlas__row:hover .star-atlas__title, .star-atlas__row.is-active .star-atlas__title{color:#f0b08e;}
.star-atlas__row.is-active{border-top-color:rgba(224,135,106,.30);}
.star-atlas__row.is-active .star-atlas__open, .star-atlas__open:hover{color:#f0b08e; border-color:rgba(224,135,106,.38);}
.star-atlas__empty{margin:12px 0 4px; color:var(--muted); font-size:12px;}
.focus-card__atlas{margin-top:11px; padding-top:9px; border-top:1px solid rgba(255,255,255,.08);}
.focus-card__atlas-k{font-size:10.5px; color:#e8c37a;}
.focus-card__atlas-links{display:flex; flex-direction:column; gap:4px; margin-top:7px;}
.focus-card__atlas button{pointer-events:auto; display:block; width:100%; border:0; background:transparent; color:#d7cab8;
  text-align:left; padding:2px 0; cursor:pointer; font:11px/1.35 var(--mono); overflow-wrap:anywhere;}
.focus-card__atlas button:hover{color:#f0b08e;}
body.is-flat .star-atlas, body.index-open .star-atlas{display:none !important;}
@media(max-width:700px){
  #atlasbtn{padding-inline:11px;}
  .star-atlas{left:14px; right:14px; top:92px; bottom:92px; width:auto; max-height:none;}
}
/* return-to-overview: bottom-center, appears only when you've left the whole-sky view */
.cosmos-home{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px); z-index:6;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink);
  background:rgba(11,10,9,.62); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:9px 18px;
  cursor:pointer; opacity:0; pointer-events:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:opacity .3s ease, transform .3s ease, color .2s, border-color .2s;}
.cosmos-home.is-on{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.cosmos-home:hover{color:var(--accent); border-color:var(--accent);}
body.is-flat .cosmos-home{display:none !important;}
@media(max-width:700px){ .cosmos-home{bottom:16px;} }
/* the bottom dock holds BOTH journey buttons side by side (⌂ base + ✦ whole sky), pinned to the very
   bottom (bottom:20px) with NOTHING below it — the hint text lives in a reserved band above (74px).
   See the ROOT INVARIANT note on .cosmos-hint. */
.cosmos-dock{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:6;
  display:flex; gap:10px; pointer-events:none; flex-wrap:nowrap;}
.cosmos-dock .cosmos-home{position:static; left:auto; bottom:auto; transform:translateY(8px);}
.cosmos-dock .cosmos-home.is-on{transform:translateY(0);}
body.is-flat .cosmos-dock{display:none !important;}
@media(max-width:700px){ .cosmos-dock{bottom:16px;} }
@media(max-width:700px){ body.is-mobile-3d .cosmos-dock{left:auto; right:14px; transform:none; gap:6px;} }
/* lying at the base: a quiet line names your place; the chart legend steps aside */
.ground-hint{position:fixed; left:50%; bottom:74px; transform:translateX(-50%); z-index:6;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--muted);
  opacity:0; pointer-events:none; transition:opacity .8s ease; text-align:center; max-width:92vw;}
.ground-hint b{color:#e8c37a; font-weight:500;}
.ground-hint .ground-credit{opacity:.5; font-size:.86em; letter-spacing:.04em; margin-left:.2em;}
.ground-hint.is-on{opacity:1;}
body.on-ground .cosmos-legend, body.on-ground .cosmos-hint{opacity:0 !important; transition:opacity .6s ease;}
@media(max-width:700px){ .ground-hint{bottom:76px; font-size:10.5px;} }
/* tap-to-enter: the doorway from the simple menu into the 3D world */
.flat-enter{display:block; width:100%; margin:22px 0 6px; padding:15px 18px; border-radius:14px;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.08em; color:#1a1109; cursor:pointer;
  background:linear-gradient(135deg, #e8c37a, #e0876a); border:none; text-align:center;}
.flat-enter:active{filter:brightness(1.08);}
/* mobile-3D: a small way back to the simple menu */
.exit3d{display:none;}
body.is-mobile-3d .exit3d{display:block; position:fixed; left:14px; bottom:16px; z-index:7;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted);
  background:rgba(11,10,9,.62); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:8px 13px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer;}
body.is-flat .exit3d{display:none !important;}
body.to-map #deep, body.to-map #field, body.to-map .cosmos-id, body.to-map .cosmos-ui,
body.to-map .cosmos-legend, body.to-map .cosmos-hint{opacity:0 !important; transition:opacity .38s ease;}
/* build 30 — the tour bar sits at the TOP CENTER; each group drops its leaves
   straight down, so no group can ever cover another. Click pins, click again
   (or anywhere else) releases; hover peeks. */
.cosmos-nav{position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:row; gap:8px; align-items:flex-start;}
.cosmos-nav button, .cosmos-nav a{display:block; font-family:var(--sans); font-size:12.5px; letter-spacing:.005em; font-weight:500;
  color:var(--body); background:rgba(11,10,9,.55); border:1px solid rgba(255,255,255,.10); border-radius:999px;
  padding:8px 14px; cursor:pointer; text-decoration:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:color .2s, border-color .2s;}
.cosmos-nav button:hover, .cosmos-nav a:hover{color:var(--accent); border-color:var(--accent);}
.cosmos-nav__cv{color:var(--accent-deep) !important;}
.cosmos-nav__group{position:relative;}
.cosmos-nav__head{color:var(--ink) !important;}
.cosmos-nav__head i{font-style:normal; display:inline-block; margin-left:7px; opacity:.45;
  transition:opacity .2s ease, transform .24s ease;}
/* leaves drop DOWN under their head; the bar itself never moves */
.cosmos-nav__kids{position:absolute; top:100%; left:0; padding-top:10px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start; width:max-content;
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .2s ease .1s, transform .2s ease .1s, visibility 0s linear .5s;}
.cosmos-nav__kids button, .cosmos-nav__kids a{font-size:12px; padding:7px 12px; letter-spacing:0;}
.cosmos-nav__group:hover .cosmos-nav__kids, .cosmos-nav__group:focus-within .cosmos-nav__kids,
.cosmos-nav__group.open .cosmos-nav__kids{opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .2s ease .12s, transform .2s ease .12s, visibility 0s linear .12s;}
.cosmos-nav__group:hover .cosmos-nav__head i, .cosmos-nav__group:focus-within .cosmos-nav__head i{opacity:1;}
.cosmos-nav__group.open .cosmos-nav__head i{opacity:1; transform:rotate(90deg);}
/* below this width the centred nav bar would collide with the (now labelled) top-right control cluster,
   so drop it to a right-stacked position under the controls. Raised from 1360 → 1560 for the wider cluster. */
/* below this width the centred nav bar would collide with the top-right control cluster (which carries
   the "All pages" index entry since the hero door was removed) — drop it to a right-stacked position,
   edge-aligned to the cluster at 22px. */
@media(max-width:1560px){ .cosmos-nav{left:auto; right:var(--edge); transform:none; top:84px;} }
@media(max-width:900px){
  .cosmos-nav{display:none;}
  /* in the mobile 3D world the atlas stays reachable: compact bar above the dock, leaves open upward */
  body.is-mobile-3d .cosmos-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
    left:50%; right:auto; transform:translateX(-50%); top:auto; bottom:104px; max-width:96vw;}
  body.is-mobile-3d .cosmos-nav__kids{top:auto; bottom:100%; padding-top:0; padding-bottom:10px;}
}

/* build 162 — cosmos visual refinement: restrained instrument chrome over the live model.
   These are atmospheric / UI passes only; the astronomical scale driver and 3D geometry remain untouched. */
body.cosmos{
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(15,13,11,0) 0%, rgba(8,7,6,.26) 62%, rgba(0,0,0,.70) 100%),
    #030302;
}
body.cosmos::before{
  content:""; position:fixed; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), transparent 18%, transparent 78%, rgba(0,0,0,.26)),
    radial-gradient(105% 94% at 50% 47%, transparent 42%, rgba(0,0,0,.16) 100%);
}
body.cosmos::after{
  content:""; position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.018;
  background-image:var(--grain); background-size:140px 140px; mix-blend-mode:screen;
}
body.cosmos.on-ground::after{
  opacity:.22;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,250,234,.88) 0 1px, transparent 1.8px),
    radial-gradient(circle at 66% 28%, rgba(210,226,255,.74) 0 1px, transparent 1.7px),
    radial-gradient(circle at 37% 64%, rgba(255,226,184,.70) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 72%, rgba(255,255,255,.62) 0 .8px, transparent 1.5px),
    var(--grain);
  background-size:420px 310px, 310px 230px, 500px 380px, 260px 190px, 140px 140px;
  background-position:0 0, 90px 40px, -40px 80px, 25px 15px, 0 0;
}
body.cosmos .cosmos-name{
  font-size:2rem; letter-spacing:0; font-variation-settings:"opsz" 48;
  text-shadow:0 1px 0 rgba(255,255,255,.05), 0 18px 42px rgba(0,0,0,.58);
}
body.cosmos .cosmos-id{
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(22,20,18,.66), rgba(8,7,6,.48));
  -webkit-backdrop-filter:blur(18px) saturate(1.18); backdrop-filter:blur(18px) saturate(1.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 54px -26px rgba(0,0,0,.86), 0 0 0 1px rgba(224,135,106,.045);
}
body.cosmos .cosmos-ui,
body.cosmos .cosmos-nav button,
body.cosmos .cosmos-nav a,
body.cosmos .cosmos-home,
body.cosmos .earth-cta,
body.cosmos .focus-card,
body.cosmos .natal-tip,
body.cosmos.is-mobile-3d .exit3d{
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(18,16,14,.70), rgba(8,7,6,.48));
  -webkit-backdrop-filter:blur(14px) saturate(1.18); backdrop-filter:blur(14px) saturate(1.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 16px 44px -26px rgba(0,0,0,.88);
}
body.cosmos .cosmos-nav button,
body.cosmos .cosmos-nav a,
body.cosmos .cosmos-links,
body.cosmos .cosmos-hint,
body.cosmos .ground-hint,
body.cosmos .cosmos-rail__l,
body.cosmos .earth-cta,
body.cosmos .focus-card,
body.cosmos .cosmos-home{
  letter-spacing:0;
}
/* the cosmos identity card is always dark (over the space scene) regardless of the day/night toggle,
   so its overlay text must stay light in both themes — pin the demoted contact links explicitly. */
body.cosmos .cosmos-links a{color:rgba(200,190,175,.80);}
body.cosmos .cosmos-links a:hover{color:#f4ecdf;}
body.cosmos .cosmos-nav button:hover,
body.cosmos .cosmos-nav a:hover,
body.cosmos .cosmos-home:hover,
body.cosmos .earth-cta:hover{
  color:#f0b08e; border-color:rgba(224,135,106,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 52px -25px rgba(0,0,0,.9), 0 0 26px -15px rgba(224,135,106,.52);
}
body.cosmos .lang button[aria-pressed="true"]{background:linear-gradient(135deg,#ee9a7b,#d87455); color:#fff;}
/* inside the glass capsule the chips sit FLAT — the capsule is the one surface; hover paints the
   border back in. (The segmented EN|中文 track deliberately keeps its own capsule.) */
body.cosmos .cosmos-ui .uipill, body.cosmos .cosmos-ui .iconbtn{background:transparent; border-color:transparent;}
body.cosmos .cosmos-ui .uipill:hover{border-color:rgba(224,135,106,.58);}
body.cosmos .cosmos-ui .iconbtn:hover{border-color:rgba(255,255,255,.30);}
body.cosmos .focus-card{
  max-width:360px; border-color:rgba(232,195,122,.18); padding:15px 17px;
}
body.cosmos .focus-card__h{letter-spacing:0; color:#f6ede1;}
body.cosmos .focus-card__b{color:#d7cab8;}
body.cosmos .focus-card__links a:hover{text-decoration:none; color:#f2b08d;}
body.cosmos .cosmos-rail{filter:drop-shadow(0 14px 34px rgba(0,0,0,.52));}
body.cosmos .cosmos-rail__i{opacity:.5;}                            /* was .34 — reads as a clickable scale control, not decoration */
body.cosmos .cosmos-rail__l{color:rgba(222,213,198,.78);}
body.cosmos .cosmos-rail__t{background:rgba(222,213,198,.5);}
body.cosmos .cosmos-rail__i.is-cur .cosmos-rail__l{color:#e8c37a; text-shadow:0 0 14px rgba(232,195,122,.24);}
body.cosmos .cosmos-hint,
body.cosmos .ground-hint{color:rgba(205,194,178,.75); text-shadow:0 10px 30px rgba(0,0,0,.85);}
@media(max-width:700px){
  body.cosmos .cosmos-name{font-size:1.65rem;}
  body.cosmos::after{opacity:.018;}
}

/* ============================================================
   WAYFINDING LAYER (menu.js) — a plain-language index + first-load fork
   layered OVER the living orrery. Pure chrome: no scene object is touched.
   Everything here is scoped to body.cosmos / body.index-open so no other
   page inherits it. See menu.js for the behaviour.
   ============================================================ */

/* the "☰ Index / 目录" pill lives among the top-right controls */
.uipill{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:.005em; color:var(--body);
  background:rgba(255,255,255,.03); border:1px solid var(--hairline); border-radius:999px;
  padding:7px 13px; cursor:pointer; white-space:nowrap; line-height:1;
  transition:color .2s, border-color .2s, background .2s;}   /* sans to match the content nav — ONE voice across the top; mono stays for the kbd chip / rail / hints (the instrument layer) */
.uipill svg{width:14px; height:14px; flex:none;}
.uipill:hover{color:var(--ink); border-color:var(--ink);}
body.cosmos .uipill:hover{color:#f0b08e; border-color:rgba(224,135,106,.58);}
.uipill--find{color:var(--ink);}                                   /* Search is the primary find affordance of the cluster */
body.cosmos .uipill--find{color:#f2e6da;}
.uikbd{font-family:var(--mono); font-size:9px; line-height:1; padding:2px 4px; border:1px solid var(--hairline);
  border-radius:4px; opacity:.55; margin-left:1px; transition:opacity var(--dur-1) var(--ease-out);}
.uipill--find:hover .uikbd{opacity:.9;}
/* divider between the FIND/GO zone and the VIEW-toggle zone of the control cluster */
.cosmos-ui__sep{width:1px; align-self:stretch; margin:3px 2px; background:rgba(255,255,255,.14); flex:none;}
body.is-flat #indexbtn, body.is-flat #atlasbtn{display:none !important;}   /* flat tier: the list already IS the page, and the atlas PANEL is force-hidden (its button would be a dead control) */
@media(max-width:700px){ #indexbtn{display:none;} }        /* mobile reaches the list via ✕ simple view */

/* screen-reader helper + a keyboard skip-link into the index */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---- the INDEX overlay: reveal the existing #cosmos-flat as a dark scrim over the sky ---- */
body.index-open{overflow:hidden;}                          /* freeze the scene scroll behind the sheet */
body.index-open #cosmos-flat{
  z-index:40; inset:0; padding:60px 26px 72px;
  background:rgba(8,7,6,.90);
  -webkit-backdrop-filter:blur(16px) saturate(1.08); backdrop-filter:blur(16px) saturate(1.08);
  animation:index-in .28s var(--ease-out) both;
}
@keyframes index-in{ from{opacity:0} to{opacity:1} }
@media(prefers-reduced-motion:reduce){ body.index-open #cosmos-flat{animation:none;} }
body.index-open #cosmos-flat > *{ width:100%; max-width:720px; margin-inline:auto; }
/* the sky behind is always dark, so force the light-text palette regardless of day/night theme */
body.index-open .flat-name,
body.index-open .flat-name span[lang="zh"]{ color:#f4ecdf; }
body.index-open .flat-contact a{ color:#cbb89f; border-color:rgba(255,255,255,.16); }
body.index-open .flat-menu{ border-color:rgba(255,255,255,.10); }
body.index-open .flat-menu a{ color:#f0e7d8; border-bottom-color:rgba(255,255,255,.07); }
body.index-open .flat-menu a:hover{ color:#f0b08e; }
body.index-open .flat-group{ color:#e8c37a; }
body.index-open .flat-menu a.flat-cv{ color:#ec9376; }
/* these two belong to the mobile flat page, not the desktop overlay — retire them here */
body.index-open .flat-enter, body.index-open .flat-note{ display:none; }

/* the ✕ close control: only present while the index is open as an overlay */
.flat-close{display:none;}
body.index-open .flat-close{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-end;
  position:sticky; top:-4px; margin:0 0 -14px auto;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:#cbb89f;
  background:rgba(20,17,14,.7); border:1px solid rgba(224,150,90,.24); border-radius:999px;
  padding:9px 15px; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:color .2s, border-color .2s;}
body.index-open .flat-close:hover{ color:#f4ecdf; border-color:#c9975f; }

/* (the one-time first-load FORK was removed 2026-07-19 — the site opens directly in the cosmos) */

/* 2026-10-08 visibility incident: real content remains reachable if menu.js cannot load. */
body.cosmos #cosmos-flat:target{display:flex !important; z-index:40;}
.flat-static-close{display:none;}
#cosmos-flat:target[hidden] .flat-static-close{display:inline-block; color:var(--accent);}
.scene-recovery{padding:16px; border:1px solid var(--hairline); border-radius:12px; line-height:1.5;}
.scene-recovery[hidden], #flat-enter3d[hidden]{display:none !important;}
.scene-recovery p{margin:0 0 12px;}
.scene-recovery button{font:inherit; color:inherit; background:var(--plate); border:1px solid var(--hairline); border-radius:8px; padding:10px 16px; cursor:pointer;}
.scene-recovery button:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
#indexbtn{text-decoration:none;}

/* A narrow viewport can still run the sky; keep its real directory reachable. */
@media(max-width:700px){body.cosmos:not(.is-flat) #indexbtn{display:inline-flex;}body.cosmos:not(.is-flat) .cosmos-ui{flex-wrap:wrap;max-width:calc(100vw - 28px);}body.cosmos:not(.is-flat) .cosmos-id{padding-top:120px;}}

body.index-open .cosmos-id,body.index-open .cosmos-ui,body.index-open .cosmos-nav{visibility:hidden;}