/* ============================================================
   Michael Lackner — scholarly homepage
   Palette: paper ivory · ink · cinnabar (印泥) · muted gold
   ============================================================ */
:root{
  --paper:#f7f3ea;
  --paper-2:#f1ebdd;
  --card:#fffdf8;
  --ink:#1c1a17;
  --ink-soft:#46413a;
  --ink-faint:#736c60;
  --line:#e2d9c6;
  --line-strong:#d2c6ac;
  --red:#9e2b25;
  --red-deep:#7f211c;
  --gold:#b08d4f;
  --gold-soft:#c9b27f;
  --shadow:0 1px 2px rgba(40,32,18,.05), 0 14px 38px -18px rgba(60,44,18,.28);
  --serif:"EB Garamond", Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  --display:"Cormorant Garamond", "EB Garamond", Georgia, serif;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--paper); color:var(--ink-soft);
  font-family:var(--serif); font-size:19px; line-height:1.66;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{ /* faint paper grain */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(circle at 18% 22%, rgba(176,141,79,.05), transparent 60%),
    radial-gradient(circle at 82% 75%, rgba(158,43,37,.04), transparent 55%);
}
h1,h2,h3{font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.12}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:2px}

/* ---------------- NAV ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(247,243,234,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--display); font-size:1.2rem; color:var(--ink); letter-spacing:.01em}
.nav__mark svg{width:24px; height:24px; display:block}
.nav__mark line{stroke:var(--red); stroke-width:2.2; stroke-linecap:round}
.nav__links{display:flex; gap:clamp(.7rem,2vw,1.7rem)}
.nav__links a{
  text-decoration:none; color:var(--ink-soft); font-size:.96rem; letter-spacing:.02em;
  padding:.25rem 0; position:relative;
}
.nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:var(--red); transition:right .28s ease}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem}
.nav__toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; z-index:1; overflow:hidden;
  display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vw,6rem) clamp(1.2rem,5vw,2.4rem) clamp(3rem,6vw,5rem);
}
.hero__art{position:absolute; right:-10px; top:0; bottom:0; width:340px; max-width:42%; pointer-events:none; opacity:.9}
.yarrow{width:100%; height:100%; opacity:.5}
.yarrow__bundle path{opacity:.85}
.hero__inner{position:relative; z-index:2}
.hero__eyebrow{font-family:var(--display); font-size:1.05rem; letter-spacing:.32em; text-transform:uppercase; color:var(--red); margin:0 0 .6rem}
.hero__title{font-size:clamp(3.2rem,9vw,6rem); margin:0; letter-spacing:-.01em; line-height:.98}
.hero__zh{font-size:clamp(1.6rem,4vw,2.4rem); color:var(--gold); margin:.4rem 0 0; letter-spacing:.3em; font-family:var(--display)}
.hero__lede{font-size:1.18rem; color:var(--ink-soft); max-width:34ch; margin:1.4rem 0 0}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.btn{display:inline-block; text-decoration:none; font-family:var(--display); font-size:1.05rem; letter-spacing:.02em; padding:.62rem 1.5rem; border-radius:2px; transition:.22s}
.btn--solid{background:var(--red); color:#fbf4ec; box-shadow:0 10px 24px -12px rgba(158,43,37,.8)}
.btn--solid:hover{background:var(--red-deep); transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line-strong); color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold); color:var(--red)}

.hero__portrait{position:relative; z-index:2; margin:0; justify-self:center}
.hero__portrait img{
  width:min(340px,74vw); aspect-ratio:4/5; object-fit:cover; object-position:50% 28%;
  border-radius:3px; background:var(--paper-2);
  box-shadow:0 1px 2px rgba(40,32,18,.05), 0 24px 56px -24px rgba(60,44,18,.42);
  border:1px solid rgba(255,255,255,.7); outline:1px solid var(--line);
}
.hero__portrait::after{ /* gold key-line frame */
  content:""; position:absolute; inset:10px; border:1px solid var(--gold-soft); border-radius:2px; opacity:.5; pointer-events:none;
}
.hero__portrait-fallback{display:none}
.hero__portrait--empty img{display:none}
.hero__portrait--empty::after{display:none}
.hero__portrait--empty .hero__portrait-fallback{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  width:min(320px,72vw); aspect-ratio:4/5; border-radius:3px;
  background:linear-gradient(160deg,var(--card),var(--paper-2)); box-shadow:var(--shadow); border:1px solid var(--line);
}
.hero__portrait-fallback svg{width:84px; height:84px}
.hero__portrait-fallback span{font-family:var(--display); letter-spacing:.3em; text-transform:uppercase; font-size:.8rem; color:var(--ink-faint)}

/* ---------------- SECTION SHELL ---------------- */
.section{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(2.6rem,6vw,4.6rem) clamp(1.2rem,5vw,2.4rem)}
.section__head{margin-bottom:2.2rem; max-width:62ch}
.kicker{font-family:var(--display); font-size:.92rem; letter-spacing:.3em; text-transform:uppercase; color:var(--red)}
.section__head h2{font-size:clamp(2rem,4.6vw,3rem); margin:.3rem 0 0}
.section__sub{margin:.7rem 0 0; color:var(--ink-faint); font-size:1.05rem}

.rule{display:flex; align-items:center; justify-content:center; gap:1rem; max-width:var(--maxw); margin:0 auto; padding:0 2rem}
.rule span{height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.rule svg{width:42px; height:42px; flex:none; opacity:.85}
.rule svg line{stroke:var(--gold); stroke-width:2.2; stroke-linecap:round}

/* ---------------- ABOUT ---------------- */
.about{display:grid; grid-template-columns:minmax(280px,760px); justify-content:center; gap:clamp(1.8rem,4vw,3.4rem); align-items:start}
.about__bio p{margin:0 0 1.1rem; font-size:1.12rem}
.about__bio p:last-child{margin-bottom:0}
.about__bio strong{color:var(--ink)}
.about__interests{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,253,248,.96),rgba(241,235,221,.58));
  border:1px solid var(--line); border-radius:4px;
  padding:clamp(1.8rem,4vw,2.8rem); box-shadow:var(--shadow);
}
.about__interests::before{
  content:""; position:absolute; left:clamp(1.8rem,4vw,2.8rem); right:clamp(1.8rem,4vw,2.8rem); top:0;
  height:3px; background:linear-gradient(90deg,var(--red),var(--gold),transparent);
}
.about__interests h3{
  font-size:clamp(1.7rem,3.4vw,2.35rem); margin:0 0 1.2rem;
  text-align:center; letter-spacing:.02em;
}
.about__interests ul{counter-reset:interest; list-style:none; margin:0; padding:0}
.about__interests li{
  counter-increment:interest; position:relative;
  display:grid; grid-template-columns:3.4rem 1fr; gap:1rem; align-items:start;
  padding:1rem 0; border-top:1px solid rgba(210,198,172,.65);
  font-size:1.08rem; line-height:1.45; color:var(--ink-soft);
}
.about__interests li::before{
  content:counter(interest, decimal-leading-zero);
  position:static; width:auto; height:auto; border:0; border-radius:0;
  font-family:var(--display); font-size:1.15rem; line-height:1.3;
  color:var(--gold); letter-spacing:.08em;
}
.about__lang-h{
  margin:1.8rem 0 .9rem !important; padding-top:1.2rem;
  border-top:1px solid var(--line); text-align:center; font-size:1.35rem !important;
}
.about__lang{
  display:grid; grid-template-columns:6.8rem 1fr; gap:1rem; align-items:baseline;
  margin:.5rem 0 0; font-size:1.02rem;
}
.about__lang span{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.about__lang b{color:var(--ink); font-weight:500}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.6rem}
.stat{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:1.1rem 1rem; text-align:center; box-shadow:var(--shadow)}
.stat b{display:block; font-family:var(--display); font-size:2.5rem; line-height:1; color:var(--red)}
.stat span{display:block; margin-top:.4rem; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}

/* ---------------- TIMELINE ---------------- */
.career{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:start}
.career__col h3, .service__block h3{font-size:1.5rem; margin:0 0 1.1rem; color:var(--ink)}
.timeline{list-style:none; margin:0; padding:0}
.timeline li{position:relative; padding:0 0 1.4rem 1.6rem; border-left:1px solid var(--line-strong)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:-5px; top:.5rem; width:9px; height:9px; border-radius:50%; background:var(--paper); border:1.6px solid var(--gold)}
.timeline li.is-current::before{background:var(--red); border-color:var(--red); box-shadow:0 0 0 4px rgba(158,43,37,.12)}
.timeline .t-date{display:block; font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; color:var(--red); margin-bottom:.15rem}
.timeline .t-text{font-size:1.04rem; color:var(--ink-soft)}
.timeline .t-text b{color:var(--ink); font-weight:500}
.timeline--two{columns:2; column-gap:3rem}
.timeline--two li{break-inside:avoid; border-left:0; padding-left:1.2rem}
.timeline--two li::before{left:0}

/* ---------------- PUBLICATIONS ---------------- */
.pubs__controls{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-bottom:.4rem}
.filters{display:flex; flex-wrap:wrap; gap:.4rem}
.filters button{
  font-family:var(--serif); font-size:.95rem; cursor:pointer;
  background:transparent; border:1px solid var(--line-strong); color:var(--ink-soft);
  padding:.4rem .9rem; border-radius:999px; transition:.2s; white-space:nowrap;
}
.filters button .c{color:var(--ink-faint); font-size:.82em; margin-left:.35em}
.filters button:hover{border-color:var(--gold); color:var(--ink)}
.filters button[aria-selected="true"]{background:var(--red); border-color:var(--red); color:#fbf4ec}
.filters button[aria-selected="true"] .c{color:rgba(251,244,236,.75)}
.search{position:relative; flex:1; min-width:240px; max-width:380px}
.search svg{position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:none; stroke:var(--ink-faint); stroke-width:2; stroke-linecap:round}
.search input{
  width:100%; font-family:var(--serif); font-size:1rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line-strong); border-radius:999px;
  padding:.55rem 1rem .55rem 2.6rem;
}
.search input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,79,.15)}
.pubs__count{color:var(--ink-faint); font-size:.92rem; margin:.6rem 0 1.6rem; letter-spacing:.02em}

.pubs__group{margin-bottom:2.2rem}
.pubs__year{
  display:flex; align-items:center; gap:1rem; font-family:var(--display);
  font-size:1.9rem; color:var(--gold); margin:0 0 .9rem;
}
.pubs__year::after{content:""; flex:1; height:1px; background:var(--line)}
.pub{
  position:relative; padding:.85rem 0 .85rem 1.4rem; border-bottom:1px solid var(--line);
  font-size:1.05rem; line-height:1.5;
}
.pub:last-child{border-bottom:0}
.pub::before{content:""; position:absolute; left:0; top:1.35rem; width:7px; height:7px; border:1.4px solid var(--red); transform:rotate(45deg)}
.pub .pub__cat{display:inline-block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-left:.5rem; white-space:nowrap}
.pub mark{background:rgba(176,141,79,.28); color:inherit; border-radius:2px; padding:0 .05em}
.pubs__empty{padding:2rem 0; color:var(--ink-faint); font-style:italic}

/* ---------------- SERVICE ---------------- */
.service{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.6rem); align-items:start}
.plainlist{list-style:none; margin:0; padding:0}
.plainlist li{position:relative; padding:.5rem 0 .5rem 1.3rem; border-bottom:1px dashed var(--line); font-size:1rem; line-height:1.45}
.plainlist li:last-child{border-bottom:0}
.plainlist li::before{content:""; position:absolute; left:0; top:1.05em; width:8px; height:1.5px; background:var(--gold)}

/* ---------------- CONTACT ---------------- */
.section--contact{max-width:none; padding:0; margin-top:1rem}
.contact{
  position:relative; overflow:hidden; max-width:var(--maxw); margin:0 auto;
  background:linear-gradient(150deg,#211d18,#2c251c); color:#ece2d2;
  border-radius:6px; padding:clamp(2.6rem,6vw,4.4rem) clamp(1.6rem,5vw,3.4rem);
  box-shadow:var(--shadow);
}
.contact .kicker--light{color:var(--gold-soft)}
.contact h2{color:#fbf4ec; font-size:clamp(2rem,4.6vw,3rem); margin:.3rem 0 0}
.contact__links{display:grid; grid-template-columns:minmax(260px,420px); gap:1.4rem; position:relative; z-index:2; margin-top:1.6rem}
.contact__links a, .contact__links div{
  text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:.25rem;
  padding:1rem 1.1rem; border:1px solid rgba(201,178,127,.3); border-radius:4px; transition:.2s;
}
.contact__links a:hover{border-color:var(--gold-soft); background:rgba(201,178,127,.08)}
.contact__links span{font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft)}
.contact__links b{font-weight:500; font-size:1.1rem; word-break:break-word}

/* ---------------- FOOTER ---------------- */
.foot{position:relative; z-index:1; text-align:center; padding:3rem 1.5rem 3.4rem; border-top:1px solid var(--line); margin-top:3rem}
.foot__name{font-family:var(--display); font-size:1.5rem; color:var(--ink); margin:0}
.foot__note{color:var(--ink-faint); margin:.4rem 0 0; font-size:.98rem}
.foot__credit{color:var(--gold); font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; margin:1rem 0 0}

/* ---------------- BACK TO TOP ---------------- */
.totop{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:40;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line-strong); box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transform:translateY(8px); transition:.3s;
}
.totop.show{opacity:1; pointer-events:auto; transform:none}
.totop svg{width:22px; height:22px; fill:none; stroke:var(--red); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* ---------------- REVEAL ---------------- */
.reveal{opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease}
.reveal:not(.in){opacity:1; transform:none}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:880px){
  body{font-size:18px}
  .nav__links{
    position:absolute; top:100%; right:0; left:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav__links.open{max-height:60vh}
  .nav__links a{padding:.85rem clamp(1rem,4vw,2.4rem); border-top:1px solid var(--line)}
  .nav__toggle{display:flex}
  .hero{grid-template-columns:1fr; text-align:center; padding-top:2.4rem}
  .hero__art{display:none}
  .hero__lede{margin-left:auto; margin-right:auto}
  .hero__actions{justify-content:center}
  .hero__portrait{order:-1; margin-bottom:.6rem}
  .about, .career, .service{grid-template-columns:1fr}
  .timeline--two{columns:1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .contact__links{grid-template-columns:1fr}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr 1fr}
  .pubs__controls{flex-direction:column; align-items:stretch}
  .search{max-width:none}
}