/* ============================================================
   何恒宇个人网站 · 共享设计系统
   8px 基线网格 · 模块化字号阶梯 · 缓动分级 · 灯箱 · 深浅双主题
   ============================================================ */
:root{
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;--s9:176px;
  --t-xs:clamp(11px,.72vw,12.5px); --t-sm:clamp(13px,.86vw,14.5px);
  --t-base:clamp(15px,1.02vw,16.5px); --t-md:clamp(17px,1.3vw,20px);
  --t-lg:clamp(21px,1.9vw,28px); --t-xl:clamp(27px,3.2vw,44px); --t-2xl:clamp(33px,5.2vw,70px);
  --dark:#0a0a0c;--dark-2:#111216;--dark-3:#191b20;
  --paper:#f5f1e8;--paper-2:#ece6da;--card:#fdfbf6;
  --ink:#1c1811;--ink-soft:#5b5245;--ink-mute:#968c7c;
  --fg:#f2f3f5;--fg-mute:#8b8f98;--fg-dim:#585c65;
  --acc:#a8431f;--acc-l:#ff6b35;--acc-2:#4dd6c1;
  --line:#dcd2be;--line-d:#22242a;
  --e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei",sans-serif;
  --serif:"Songti SC","STSong",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--dark);color:var(--fg);font-family:var(--font);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc-l);color:#0b0b0c}
:focus-visible{outline:2px solid var(--acc-l);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{
  animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s5)}
@media(max-width:680px){.wrap{padding:0 var(--s3)}}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.narrow{max-width:800px}

/* ── 进度条 ── */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:300;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--acc-l),var(--acc-2))}
@supports (animation-timeline:scroll()){
  .prog{animation:pg linear;animation-timeline:scroll(root block)}
  @keyframes pg{to{transform:scaleX(1)}}}

/* ── 左侧目录 ── */
.toc{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:150}
.toc a{display:flex;align-items:center;gap:11px;padding:6px 0;color:var(--ink-mute)}
.toc a i{width:16px;height:2px;background:currentColor;opacity:.4;border-radius:1px;flex-shrink:0;
  transition:width .26s var(--e-out),opacity .26s,background .26s}
.toc a span{font-size:12px;white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity .26s,transform .26s,color .26s;pointer-events:none}
.toc:hover a span{opacity:1;transform:none}
.toc a.on i{width:28px;opacity:1;background:var(--acc)}
.toc a.on span{color:var(--acc);font-weight:600;opacity:1;transform:none}
.toc.dk a{color:var(--fg-dim)}
.toc.dk a.on i{background:var(--acc-l)}
.toc.dk a.on span{color:var(--acc-l)}
@media(max-width:1240px){.toc{display:none}}

/* ── 导航 ── */
nav.top{position:fixed;top:0;left:0;right:0;z-index:200;border-bottom:1px solid transparent;
  transition:background .4s,backdrop-filter .4s,border-color .4s}
nav.top.solid{background:rgba(10,10,12,.72);backdrop-filter:blur(18px) saturate(1.6);border-bottom-color:var(--line-d)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
nav.top .brand{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.06em;color:var(--fg)}
nav.top .brand i{color:var(--acc-l);font-style:normal}
nav.top .links{display:flex;gap:22px;font-size:13.5px;color:var(--fg-mute);align-items:center}
nav.top .links a{transition:.2s}
nav.top .links a:hover{color:var(--fg)}
nav.top .cta{padding:7px 16px;border:1px solid var(--line-d);border-radius:99px;color:var(--fg);
  background:rgba(255,255,255,.05);transition:.2s}
nav.top .cta:hover{background:var(--acc-l);border-color:var(--acc-l);color:#0b0b0c}
@media(max-width:1000px){nav.top .links a:not(.cta){display:none}}

/* ── 入场动画 ── */
.line{display:block;overflow:hidden}
.line>span{display:block;transform:translateY(105%);animation:up .95s var(--e-out) forwards}
.line:nth-child(1)>span{animation-delay:.1s}
.line:nth-child(2)>span{animation-delay:.2s}
.line:nth-child(3)>span{animation-delay:.3s}
@keyframes up{to{transform:translateY(0)}}
.fade{opacity:0;transform:translateY(20px);animation:fu .7s var(--e-out) forwards}
@keyframes fu{to{opacity:1;transform:none}}
.f1{animation-delay:.4s}.f2{animation-delay:.52s}.f3{animation-delay:.64s}.f4{animation-delay:.76s}

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:99px;
  font-size:var(--t-sm);font-weight:650;border:1px solid transparent;cursor:pointer;will-change:transform;
  transition:transform .13s var(--e-out),background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn .arw{transition:transform .18s var(--e-out)}
.btn:hover .arw{transform:translateX(4px)}
.btn-1{background:var(--acc-l);color:#0b0b0c;box-shadow:0 8px 30px rgba(255,107,53,.26)}
.btn-1:hover{box-shadow:0 14px 42px rgba(255,107,53,.42)}
.btn-2{border-color:var(--line-d);color:var(--fg);background:rgba(255,255,255,.045)}
.btn-2:hover{border-color:var(--acc-2);color:var(--acc-2)}
.btn-p{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-p:hover{background:var(--ink);color:var(--paper)}

/* ── section 与排版 ── */
section{padding:var(--s9) 0;position:relative}
.pp{background:var(--paper);color:var(--ink)}
.pp2{background:var(--paper-2);color:var(--ink)}
.dd{background:var(--dark-2);color:var(--fg)}
.sec-num{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;color:var(--acc);margin-bottom:var(--s2)}
.dd .sec-num{color:var(--acc-2)}
h2.chap{font-size:var(--t-xl);font-weight:700;line-height:1.24;letter-spacing:-.02em;margin-bottom:var(--s2)}
.chap-sub{font-size:var(--t-base);color:var(--ink-soft);max-width:68ch;margin-bottom:var(--s6)}
.chap-sub em{color:var(--acc);font-style:normal;font-weight:600}
.dd .chap-sub{color:var(--fg-mute)}
.dd .chap-sub em{color:var(--acc-2)}
.prose p{font-size:var(--t-base);color:var(--ink-soft);margin-bottom:var(--s3)}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink);font-weight:600}
.prose .big{font-family:var(--serif);font-size:var(--t-lg);color:var(--ink);line-height:1.55;
  margin-bottom:var(--s3);font-weight:600}
.dd .prose p{color:var(--fg-mute)}.dd .prose b{color:var(--fg)}.dd .prose .big{color:var(--fg)}

/* ── 页面 hero（深度页用） ── */
.phero{min-height:76svh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--s8) 0 var(--s6);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;width:1000px;height:1000px;left:-6%;top:-40%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,107,53,.11) 0%,transparent 62%);filter:blur(56px)}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.phero .wrap{position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-xs);letter-spacing:.14em;
  color:var(--fg-mute);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  border-radius:99px;padding:6px 15px;margin-bottom:var(--s4);backdrop-filter:blur(10px)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--acc-2);box-shadow:0 0 10px var(--acc-2);
  animation:pulse 2.4s var(--e-io) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.phero h1{font-size:var(--t-2xl);line-height:1.1;font-weight:700;letter-spacing:-.026em;margin-bottom:var(--s3)}
.phero h1 .g{background:linear-gradient(100deg,var(--acc-l) 4%,#ffb98f 42%,var(--acc-2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.phero .lead{font-size:var(--t-base);color:var(--fg-mute);max-width:70ch}
.phero .lead b{color:var(--fg);font-weight:600}

/* ── 指标条 ── */
.metricbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d);margin-top:var(--s6)}
@media(max-width:680px){.metricbar{grid-template-columns:repeat(2,1fr)}}
.metricbar .c{padding:var(--s4) var(--s2);text-align:center;border-right:1px solid var(--line-d);position:relative;overflow:hidden}
.metricbar .c:last-child{border-right:0}
.metricbar .c b{display:block;font-size:var(--t-xl);font-weight:700;color:var(--acc-l);letter-spacing:-.02em}
.metricbar .c small{display:block;font-size:11.5px;color:var(--fg-mute);margin-top:7px;line-height:1.6}
.metricbar .c::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--acc-l),transparent)}
@supports (animation-timeline:view()){
  .metricbar .c::before{animation:sw .8s var(--e-out) forwards;animation-timeline:view();animation-range:entry 10% entry 60%}
  @keyframes sw{to{transform:scaleX(1)}}
  .metricbar .c{animation:si linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes si{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .metricbar .c:nth-child(2){animation-range:entry 5% entry 60%}
  .metricbar .c:nth-child(3){animation-range:entry 10% entry 65%}
  .metricbar .c:nth-child(4){animation-range:entry 15% entry 70%}}

/* ── 引句 ── */
.pullq{background:var(--dark);padding:var(--s8) 0}
.pullq .q{font-family:var(--serif);font-size:clamp(23px,3.5vw,42px);line-height:1.4;font-weight:600;max-width:960px}
.pullq .q .mk{color:var(--acc-l)}
.pullq .by{margin-top:var(--s3);font-size:var(--t-sm);color:var(--fg-dim);display:flex;align-items:center;gap:12px}
.pullq .by::before{content:"";width:34px;height:1px;background:var(--acc-l)}

/* ── callout ── */
.callout{border-left:3px solid var(--acc-l);background:rgba(255,255,255,.045);
  padding:var(--s3) var(--s4);margin:var(--s4) 0;border-radius:0 8px 8px 0}
.callout .cq{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;line-height:1.5;margin-bottom:10px}
.callout .cs{font-size:var(--t-sm);color:var(--fg-mute)}
.pp .callout,.pp2 .callout{background:var(--card);border-left-color:var(--acc)}
.pp .callout .cq,.pp2 .callout .cq{color:var(--ink)}
.pp .callout .cs,.pp2 .callout .cs{color:var(--ink-soft)}

/* ── 3D 倾斜卡通用 ── */
.tilt{perspective:1000px}
.tilt-in{transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .3s}

/* ── 图片块 ── */
.figwrap{margin-top:var(--s5);border-radius:14px;overflow:hidden;border:1px solid var(--line-d);
  background:var(--dark-3)}
.pp .figwrap,.pp2 .figwrap{border-color:var(--line);background:var(--card)}
.figwrap img{width:100%;cursor:zoom-in}
.figwrap figcaption{padding:var(--s2) var(--s3);font-size:var(--t-sm);color:var(--fg-mute);
  border-top:1px solid var(--line-d)}
.pp .figwrap figcaption,.pp2 .figwrap figcaption{color:var(--ink-soft);border-top-color:var(--line)}
.figwrap figcaption b{color:var(--fg)}
.pp .figwrap figcaption b,.pp2 .figwrap figcaption b{color:var(--ink)}

/* ── 深度页入口 ── */
.godeep{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;padding:var(--s3) var(--s4);margin-top:var(--s5);
  background:var(--card);transition:.24s var(--e-out);cursor:pointer}
.godeep:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 16px 38px rgba(90,60,25,.12)}
.dd .godeep{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.dd .godeep:hover{border-color:var(--acc-l)}
.godeep .gl{font-family:var(--serif);font-size:var(--t-md);font-weight:600}
.godeep .gs{font-size:13px;color:var(--ink-soft);margin-top:5px}
.dd .godeep .gs{color:var(--fg-mute)}
.godeep .gb{font-size:13.5px;font-weight:650;color:var(--acc);white-space:nowrap}
.dd .godeep .gb{color:var(--acc-l)}

/* ── footer ── */
footer.site{background:var(--dark);padding:var(--s8) 0 var(--s6)}
footer.site .fh{font-family:var(--serif);font-size:var(--t-xl);font-weight:600;line-height:1.24;margin-bottom:12px;color:var(--fg)}
footer.site .fh span{color:var(--acc-l)}
footer.site .fs{color:var(--fg-mute);margin-bottom:var(--s4);font-size:var(--t-base)}
footer.site .row{display:flex;gap:12px;flex-wrap:wrap}
footer.site .chip{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;background:var(--dark-2);
  border:1px solid var(--line-d);border-radius:99px;font-size:13.5px;transition:.2s;color:var(--fg)}
footer.site .chip:hover{border-color:var(--acc-l);background:var(--dark-3)}
footer.site .cp{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line-d);
  font-size:12px;color:var(--fg-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ═══════════ 灯箱 ═══════════ */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(6,6,8,.965);backdrop-filter:blur(22px);
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:opacity .34s var(--e-out),visibility .34s}
.lb.open{opacity:1;visibility:visible}
.lb-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:70px var(--s7) 100px;overflow:auto}
@media(max-width:760px){.lb-stage{padding:64px var(--s2) 76px}}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);transform:scale(.94);opacity:0;
  transition:transform .42s var(--e-out),opacity .32s;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.lb.open .lb-img{transform:scale(1);opacity:1}
.lb-img.zoom{cursor:zoom-out;max-width:none;max-height:none;width:auto;height:auto}
.lb-top{position:absolute;top:0;left:0;right:0;padding:var(--s3) var(--s4);display:flex;
  align-items:center;justify-content:space-between;gap:var(--s3);z-index:3}
.lb-count{font-family:var(--mono);font-size:12.5px;color:var(--fg-mute);letter-spacing:.08em}
.lb-x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-d);background:rgba(255,255,255,.06);
  color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:19px;
  transition:.22s var(--e-out);flex-shrink:0}
.lb-x:hover{background:var(--acc-l);border-color:var(--acc-l);color:#0b0b0c;transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;
  border:1px solid var(--line-d);background:rgba(255,255,255,.06);color:var(--fg);display:flex;
  align-items:center;justify-content:center;cursor:pointer;font-size:20px;z-index:3;transition:.22s var(--e-out)}
.lb-nav:hover{background:var(--acc-l);border-color:var(--acc-l);color:#0b0b0c}
.lb-prev{left:var(--s3)}.lb-next{right:var(--s3)}
@media(max-width:760px){.lb-nav{width:40px;height:40px;font-size:17px}.lb-prev{left:8px}.lb-next{right:8px}}
.lb-cap{position:absolute;bottom:0;left:0;right:0;padding:var(--s3) var(--s5);text-align:center;
  font-size:13px;color:var(--fg-mute);z-index:3;background:linear-gradient(transparent,rgba(6,6,8,.92) 44%)}
.lb-cap b{color:var(--fg);display:block;margin-bottom:3px;font-size:14.5px}
.lb-thumbs{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;gap:7px;
  z-index:4;max-width:92vw;overflow-x:auto;padding:5px;scrollbar-width:none}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumbs img{width:36px;height:48px;object-fit:cover;object-position:top;border-radius:4px;cursor:pointer;
  opacity:.34;border:1.5px solid transparent;transition:.24s var(--e-out);flex-shrink:0}
.lb-thumbs img:hover{opacity:.7}
.lb-thumbs img.on{opacity:1;border-color:var(--acc-l);transform:translateY(-3px)}
@media(max-width:760px){.lb-thumbs{display:none}}
img[data-lb]{cursor:zoom-in}