/* =========================================================
   罗珍妮 JENNY · 商业作品集
   黑白调 — minimal editorial style
   ========================================================= */

:root{
  --bg:          #ffffff;
  --panel:       #efedf4;   /* 作品集里的淡紫灰底 */
  --panel-soft:  #f6f5f9;
  --ink:         #2b2b30;
  --ink-2:       #55555f;
  --mute:        #9a9aa4;
  --faint:       #c3c3cc;
  --line:        #e3e1e9;
  --accent:      #2fd79b;   /* 画册里的小绿点 */
  --dark:        #141417;

  --sans: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", sans-serif;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-weight:400; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--ink); color:#fff; }

/* ---------- 滚动进度 ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0;
  background:var(--ink);
  transition:width .08s linear;
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  background:rgba(255,255,255,0);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  padding:14px var(--pad);
  box-shadow:0 1px 0 var(--line);
}
.nav__brand{ position:relative; z-index:3; display:flex; align-items:baseline; gap:.5em; font-size:14px; letter-spacing:.1em; }
.nav__name{ font-weight:600; }
.nav__slash{ color:var(--faint); }
.nav__en{ color:var(--mute); font-size:12px; letter-spacing:.22em; }

.nav__links{ display:flex; gap:clamp(14px,2.4vw,34px); font-size:13px; letter-spacing:.14em; color:var(--ink-2); }
.nav__links a{ position:relative; padding:4px 0; transition:color .3s; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ink); transition:right .4s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ right:0; }
.nav__links a.is-active{ color:var(--ink); }

.nav__toggle{ position:relative; z-index:3; display:none; width:26px; height:18px; }
.nav__toggle span{
  position:absolute; left:0; right:0; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s;
}
.nav__toggle span:nth-child(1){ top:3px; }
.nav__toggle span:nth-child(2){ bottom:3px; }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{ position:relative; padding-top:96px; }
.hero__meta{
  display:flex; justify-content:space-between;
  padding:0 var(--pad);
  font-size:13px; letter-spacing:.3em; color:var(--ink-2);
}
.hero__inner{ padding:clamp(60px,12vh,140px) var(--pad) clamp(36px,6vw,72px); }

.hero__kicker{
  display:flex; align-items:center; gap:14px;
  font-size:13px; letter-spacing:.26em; color:var(--ink-2);
  margin-bottom:clamp(16px,2.4vw,28px);
  animation:rise .9s .1s var(--ease) both;
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(47,215,155,.16);
}

.hero__title{ display:block; }
.hero__line{
  display:block;
  font-size:clamp(52px,13.2vw,190px);
  line-height:.92;
  letter-spacing:-.02em;
  animation:rise 1s .18s var(--ease) both;
}
.hero__line--thin{ font-weight:200; color:#6e6e78; }
.hero__line--bold{ font-weight:700; color:var(--ink); animation-delay:.3s; }

.hero__foot{
  display:flex; flex-wrap:wrap; gap:20px 40px;
  align-items:center; justify-content:space-between;
  margin-top:clamp(28px,4vw,56px);
  padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; letter-spacing:.14em; color:var(--ink-2);
  animation:rise 1s .46s var(--ease) both;
}
.scroll-cue{ display:flex; align-items:center; gap:12px; color:var(--mute); transition:color .3s; }
.scroll-cue:hover{ color:var(--ink); }
.scroll-cue i{
  display:block; width:34px; height:1px; background:currentColor; position:relative;
}
.scroll-cue i::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(-45deg);
}
.scroll-cue:hover i{ animation:nudge 1s infinite; }

.hero__actions{ display:flex; align-items:center; gap:clamp(18px,3vw,36px); }

.btn{
  display:inline-block;
  padding:9px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12.5px; letter-spacing:.16em; color:var(--ink-2);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.btn:hover{ border-color:var(--ink); color:var(--ink); }
.btn--dark{ border-color:rgba(43,43,48,.22); }
.btn--dark:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

.hero__img{ margin:0; overflow:hidden; }
.hero__img img{ width:100%; height:auto; }

@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }

/* ---------- 通用标题 ---------- */
.sec-head{
  display:flex; align-items:baseline; gap:18px;
  padding:clamp(70px,10vw,130px) var(--pad) clamp(28px,4vw,48px);
  max-width:var(--maxw); margin:0 auto;
}
.sec-head__cn{ font-size:clamp(22px,3vw,30px); font-weight:600; letter-spacing:.06em; }
.sec-head__en{ font-size:13px; letter-spacing:.3em; color:var(--mute); }
.sec-head::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ink); align-self:center; margin-right:-8px;
}

.rule{ height:1px; background:var(--line); margin:clamp(26px,3.4vw,44px) 0; }

.mini-head{
  font-size:16px; font-weight:600; letter-spacing:.06em; margin-bottom:18px;
}
.mini-head em{ font-style:normal; font-size:12px; letter-spacing:.2em; color:var(--mute); font-weight:400; }
.mini-head--lg{ font-size:18px; margin-bottom:28px; }

/* ---------- 简介 ---------- */
.about{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(60px,8vw,110px); }
.about__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,6vw,80px); }

.about__name{ font-size:clamp(26px,3.6vw,38px); font-weight:700; letter-spacing:.02em; }
.about__name em{ font-style:normal; font-weight:200; color:var(--faint); margin:0 .25em; }
.about__sub{ font-size:12px; letter-spacing:.3em; color:var(--mute); margin-top:8px; }
.about__bio{ color:var(--ink-2); font-size:14.5px; line-height:2.1; }

.about__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:clamp(26px,3.4vw,40px);
}
.about__stats strong{ display:block; font-size:clamp(26px,3.4vw,38px); font-weight:300; letter-spacing:-.01em; }
.about__stats small{ font-size:14px; font-weight:400; color:var(--mute); margin-left:3px; }
.about__stats span{ display:block; font-size:12px; letter-spacing:.12em; color:var(--mute); margin-top:2px; }

.about__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); }

.kv li{
  display:flex; align-items:center; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.kv span{ min-width:66px; font-size:11px; letter-spacing:.18em; color:var(--mute); }
.kv b{ font-weight:400; color:var(--ink-2); }

.edu__school{ font-weight:600; font-size:14.5px; }
.edu__date{ font-size:13px; color:var(--mute); letter-spacing:.08em; margin-top:4px; }
.edu__courses{ font-size:13px; color:var(--ink-2); line-height:1.95; margin-top:14px; }

/* 时间轴 */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{
  content:""; position:absolute; left:3px; top:8px; bottom:8px; width:1px; background:var(--line);
}
.timeline > li{ position:relative; padding-bottom:clamp(30px,4vw,46px); }
.timeline > li::before{
  content:""; position:absolute; left:-26px; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--ink);
}
.timeline > li:last-child{ padding-bottom:0; }
.timeline h5{ font-size:15.5px; font-weight:600; letter-spacing:.03em; }
.timeline__date{ font-size:13px; color:var(--mute); letter-spacing:.1em; margin:4px 0 12px; }
.timeline ul li{
  position:relative; padding-left:14px; font-size:13.5px; color:var(--ink-2); line-height:1.95;
}
.timeline ul li::before{
  content:""; position:absolute; left:0; top:13px; width:4px; height:1px; background:var(--faint);
}

/* ---------- 章节 ---------- */
.chapter{ padding-bottom:clamp(50px,7vw,90px); }

.chapter__head{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(80px,12vw,170px) var(--pad) clamp(40px,5vw,70px);
  display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:clamp(20px,4vw,52px);
  border-bottom:1px solid var(--line);
}
.chapter__no{
  font-size:clamp(13px,1.3vw,15px); letter-spacing:.3em; color:var(--mute);
  padding-bottom:10px;
}
.chapter__title h2{
  font-size:clamp(38px,7.6vw,96px); font-weight:300; line-height:1; letter-spacing:-.01em;
}
.chapter__title h2 i{ font-style:normal; color:var(--faint); }
.chapter__en{ font-size:12px; letter-spacing:.34em; color:var(--mute); margin-top:14px; }
.chapter__tags{ display:flex; flex-direction:column; gap:4px; text-align:right; font-size:13px; color:var(--ink-2); padding-bottom:8px; }
.chapter__case{
  display:block; margin-top:3px;
  font-size:12px; letter-spacing:.08em; color:var(--mute);
}
.chapter__case::before{
  content:""; display:inline-block;
  width:5px; height:5px; margin-right:7px;
  border-radius:50%; background:var(--accent); vertical-align:1px;
}
.chapter__case:hover{ color:var(--ink); }
#ch2-dtc{ scroll-margin-top:96px; }

/* ---------- 项目 ---------- */
.project{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.project__head{
  display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(28px,5vw,64px);
  padding:clamp(44px,6vw,84px) 0 clamp(30px,4vw,54px);
}
.project__title .brand{ font-size:11.5px; letter-spacing:.26em; color:var(--mute); margin-bottom:16px; }
.project__title h3{
  font-size:clamp(24px,3.4vw,38px); font-weight:300; line-height:1.3; letter-spacing:.01em;
}

.project__meta dt{
  font-size:12px; font-weight:600; letter-spacing:.18em; color:var(--ink);
  padding-top:16px; margin-top:16px; border-top:1px solid var(--line);
}
.project__meta dt:first-child{ padding-top:0; margin-top:0; border-top:0; }
.project__meta dd{
  margin:8px 0 0; font-size:14px; line-height:2.05; color:var(--ink-2);
}

/* 图版 */
.plates{ display:flex; flex-direction:column; gap:clamp(22px,3.4vw,46px); }
.plate{
  margin:0; position:relative; cursor:zoom-in;
  background:var(--panel-soft);
  overflow:hidden;
}
.plate--dark{ background:var(--dark); }
.plate img{
  width:100%; height:auto;
  transition:transform .9s var(--ease), opacity .6s;
}
.plate:hover img{ transform:scale(1.012); }

.plate::after{
  content:attr(data-label);
  position:absolute; left:0; bottom:0;
  padding:9px 16px;
  font-size:12px; letter-spacing:.1em; color:#fff;
  background:rgba(20,20,23,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.plate:hover::after{ opacity:1; transform:none; }
.plate:not([data-label])::after{ content:none; }

/* ---------- 结尾 ---------- */
.end{ background:var(--panel); margin-top:clamp(50px,8vw,110px); }
.end__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(80px,12vw,160px) var(--pad) clamp(44px,6vw,72px);
  text-align:center;
}
.end__title{
  font-size:clamp(54px,13vw,170px); font-weight:200; letter-spacing:.04em; line-height:1;
  color:var(--ink);
}
.end__sub{ font-size:14px; letter-spacing:.24em; color:var(--ink-2); margin-top:18px; }

.end__links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px clamp(24px,4vw,52px);
  margin-top:clamp(34px,5vw,60px);
  padding-top:clamp(28px,4vw,44px); border-top:1px solid rgba(43,43,48,.12);
  font-size:13.5px;
}
.end__links li{ display:flex; align-items:center; gap:10px; }
.end__links span{ font-size:11px; letter-spacing:.2em; color:var(--mute); }
.end__links b{ font-weight:400; color:var(--ink-2); }
.end__links a{ color:var(--ink-2); border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
.end__links a:hover{ color:var(--ink); border-color:var(--ink); }

.end__pdf{ margin-top:clamp(30px,4vw,44px); }
.end__copy{ margin-top:clamp(26px,4vw,44px); font-size:11.5px; letter-spacing:.16em; color:var(--mute); }

/* ---------- 入场动画 ---------- */
.reveal{ opacity:0; transform:translateY(30px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}

/* ---------- 灯箱 ---------- */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(250,250,251,.97);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.lb.is-open{ opacity:1; visibility:visible; }

.lb__stage{
  width:100%; height:100%;
  padding:66px clamp(16px,6vw,96px) 72px;
  overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; align-items:flex-start; justify-content:center;
}
.lb__stage img{
  max-width:100%; width:auto; margin:auto;
  box-shadow:0 24px 70px rgba(20,20,30,.14);
  animation:lbIn .5s var(--ease) both;
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:none; } }

.lb__close{
  position:absolute; top:16px; right:clamp(14px,3vw,34px); z-index:3;
  width:44px; height:44px; font-size:30px; line-height:1; color:var(--ink-2);
  transition:color .3s, transform .3s;
}
.lb__close:hover{ color:var(--ink); transform:rotate(90deg); }

.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:52px; height:52px; font-size:36px; line-height:1; color:var(--mute);
  border-radius:50%; transition:color .3s, background .3s;
}
.lb__nav:hover{ color:var(--ink); background:rgba(0,0,0,.05); }
.lb__nav--prev{ left:clamp(6px,1.6vw,22px); }
.lb__nav--next{ right:clamp(6px,1.6vw,22px); }

.lb__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px clamp(16px,3vw,34px);
  font-size:12px; letter-spacing:.14em; color:var(--ink-2);
  border-top:1px solid var(--line); background:rgba(255,255,255,.7);
}

/* ---------- 响应式 ---------- */
@media (max-width:1040px){
  .about__grid{ grid-template-columns:1fr; }
  .project__head{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  body{ font-size:14px; }
  .nav__toggle{ display:block; }
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0;
    flex-direction:column; gap:0;
    padding:88px var(--pad) 36px;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    transform:translateY(-102%); transition:transform .5s var(--ease);
    box-shadow:0 20px 40px rgba(20,20,30,.07);
  }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; letter-spacing:.1em; }
  .nav__links a::after{ display:none; }

  .hero{ padding-top:76px; }
  .hero__meta{ font-size:11px; letter-spacing:.22em; }

  .chapter__head{ grid-template-columns:1fr; align-items:start; gap:18px; }
  .chapter__tags{ flex-direction:row; flex-wrap:wrap; gap:8px 16px; text-align:left; }
  .chapter__tags li{ font-size:12px; color:var(--mute); }

  .about__cols{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr 1fr; gap:14px; }
  .about__bio br{ display:none; }

  .plate::after{ opacity:1; transform:none; font-size:11px; padding:7px 12px; }
  .lb__nav{ width:40px; height:40px; font-size:28px; }
  .lb__stage{ padding:58px 10px 64px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 打印 ---------- */
@media print{
  .nav,.progress,.lb,.scroll-cue{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .plate{ break-inside:avoid; }
}