:root{
    --paper:#f3f4f1;
    --paper-deep:#e9ebe7;
    --ink:#0f1010;
    --ink-soft:#3a3d3a;
    --body-ink:#2b2d2a;
    --muted:#686b66;
    --rule:rgba(15,16,16,.1);
    --vermilion:#2346ff;
    --blue:#2346ff;
    --serif:"Inter","Helvetica Neue","PingFang SC",Arial,sans-serif;
    --sans:"Inter","Helvetica Neue","PingFang SC",Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%}
  .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
  .progress i{display:block;height:100%;width:0;background:var(--vermilion);transition:width .08s linear}

  /* ── 顶栏：初始浮在 hero 上，滚过 hero 后变纸色 ── */
  .topbar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:transparent;color:#fff;border-bottom:1px solid transparent;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
  }
  .topbar.scrolled{
    background:rgba(243,244,241,.94);
    backdrop-filter:blur(14px);
    border-bottom-color:var(--rule);
    color:var(--ink);
  }
  .topbar-inner{
    max-width:1240px;margin:0 auto;padding:0 64px;height:64px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .mark{display:flex;align-items:baseline;gap:12px}
  .mark strong{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.02em;color:inherit}
  .mark i{width:6px;height:6px;background:var(--blue);display:block}
  .mark span{font-family:var(--sans);font-size:8.5px;letter-spacing:.3em;color:rgba(255,255,255,.6)}
  .topbar.scrolled .mark span{color:var(--muted)}
  .topbar:not(.scrolled) .mark strong,.topbar:not(.scrolled) nav a{text-shadow:0 1px 12px rgba(0,0,0,.45)}
  .topbar nav{display:flex;align-items:center;gap:24px;font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.78)}
  .topbar.scrolled nav{color:var(--ink-soft)}
  .topbar nav a{position:relative;padding-bottom:3px}
  .topbar nav a:hover{color:var(--vermilion)}
  .topbar nav a.on{color:#fff}
  .topbar.scrolled nav a.on{color:var(--ink)}
  .topbar nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#fff}
  .topbar.scrolled nav a.on::after{background:var(--ink)}
  .topbar nav sup{font-size:7.5px;color:rgba(255,255,255,.55);margin-left:4px;vertical-align:super;letter-spacing:0}
  .topbar nav a.to-top{margin-left:8px;padding-left:16px;border-left:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72)}
  .topbar.scrolled nav a.to-top{border-left-color:var(--rule);color:var(--muted)}
  .topbar nav a.to-top:hover{color:var(--vermilion)}
  .topbar.scrolled nav sup{color:var(--muted)}

  /* ── 全宽 hero ── */
  .hero{
    position:relative;
    height:min(600px,66vh);min-height:480px;
    overflow:hidden;background:#111;
  }
  .hero > img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;cursor:zoom-in;
  }
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(10,8,6,.86) 0%,rgba(10,8,6,.38) 38%,rgba(10,8,6,.06) 66%,rgba(10,8,6,.52) 100%);
  }
  .hero-inner{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    max-width:1240px;margin:0 auto;padding:0 64px 50px;color:#fff;
  }
  .crumb{
    display:flex;align-items:center;gap:10px;
    font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;
    color:rgba(255,255,255,.72);
  }
  .crumb a:hover{color:#fff}
  .crumb .sep{color:rgba(255,255,255,.35)}
  .crumb .back{
    margin-left:auto;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);
    padding-bottom:3px;letter-spacing:.12em;
  }
  .crumb .back:hover{color:#fff;border-color:#fff}
  .hero h1{
    margin-top:18px;
    font-size:84px;line-height:1.04;font-weight:600;letter-spacing:-.055em;
    color:#fff;
  }
  .hero h1 .year{color:#b8c5ff}
  .hero h1 .dash{color:#b8c5ff;font-weight:400;padding:0 .04em}
  .hero .subtitle{margin-top:14px;font-size:21px;letter-spacing:.04em;color:#f0e7d9}
  .hero .meta{
    display:flex;align-items:center;gap:12px;
    margin-top:22px;font-family:var(--sans);font-size:13px;letter-spacing:.07em;
    color:rgba(255,255,255,.68);
  }
  .hero .meta i{display:block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}
  .hero-cap{
    position:absolute;right:64px;bottom:24px;z-index:2;
    font-family:var(--sans);font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.62);
    text-transform:uppercase;
  }

  /* ── 正文 + 侧栏 ── */
  .article-layout{
    max-width:1240px;margin:0 auto;padding:54px 64px 96px;
    display:grid;grid-template-columns:minmax(0,720px) 220px;
    gap:72px;justify-content:center;
  }
  .prose{
    min-width:0;
    font-size:18px;line-height:2.0;color:var(--body-ink);
    counter-reset:sec;
  }
  .prose > h3:first-of-type{margin-top:0;padding-top:0;border-top:none}
  .prose h3{
    counter-increment:sec;
    position:relative;
    margin:76px 0 26px;padding-top:22px;
    border-top:1px solid var(--rule);
    font-size:30px;line-height:1.35;font-weight:600;letter-spacing:-.025em;
    scroll-margin-top:96px;
  }
  .prose h3::before{
    content:counter(sec,decimal-leading-zero);
    position:absolute;left:-64px;top:24px;
    font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.18em;
    color:var(--vermilion);
  }
  .prose h3:first-of-type::before{top:0}
  .prose h4{
    margin:46px 0 14px;
    font-size:22px;line-height:1.4;font-weight:600;
    scroll-margin-top:96px;
  }
  .prose p{margin:0 0 1.65em}
  .prose h3 + p{font-size:19.5px;line-height:2.0;color:#2f2a23}
  .prose strong{font-weight:700;color:var(--ink)}
  .prose a{color:var(--vermilion);border-bottom:1px solid rgba(168,66,44,.35)}
  .prose a:hover{border-color:var(--vermilion)}
  .prose hr{border:none;border-top:1px solid var(--rule);margin:48px 0}
  .prose > br{display:none}
  .prose blockquote{
    position:relative;
    margin:48px 0;padding:6px 0 6px 54px;
    font-size:19px;line-height:1.95;color:#4b4134;
  }
  .prose blockquote::before{
    content:"“";position:absolute;left:0;top:-24px;
    font-family:var(--serif);font-size:84px;line-height:1;color:var(--vermilion);
  }
  .prose blockquote p{margin-bottom:1.1em}
  .prose blockquote p:last-child{margin-bottom:0}

  .prose figure{
    margin:46px auto;
    width:fit-content;max-width:100%;
  }
  .prose figure:has(img.portrait){max-width:62%}
  .prose figure img{
    display:block;width:auto;max-width:100%;height:auto;
    cursor:zoom-in;
  }
  .prose figure figcaption{
    margin-top:12px;
    font-family:var(--sans);font-size:14px;line-height:1.65;letter-spacing:.02em;
    color:var(--muted);text-align:center;
  }
  .prose figure figcaption em{font-style:normal}
  .prose p > img{
    display:block;width:auto;max-width:100%;height:auto;
    margin:42px auto;
    cursor:zoom-in;
  }
  .prose p > img.portrait{max-width:62%}
  .prose p:has(> img){margin-bottom:0}

  /* ── 目录 ── */
  .margin{position:relative}
  .toc{
    position:sticky;top:96px;
    max-height:calc(100vh - 140px);
    overflow:auto;padding-right:6px;
  }
  .toc-label{
    padding-bottom:12px;margin-bottom:12px;
    border-bottom:1px solid var(--rule);
    font-family:var(--sans);font-size:9px;letter-spacing:.24em;color:var(--muted);
  }
  .toc-list{list-style:none;margin:0;padding:0}
  .toc-list li{margin:0}
  .toc-list a{
    display:block;position:relative;
    padding:5px 0 5px 14px;
    font-family:var(--sans);font-size:11.5px;line-height:1.5;letter-spacing:.02em;
    color:var(--muted);
    border-left:1px solid transparent;
    transition:color .15s ease;
  }
  .toc-list a:hover{color:var(--ink)}
  .toc-list a.active{color:var(--ink);font-weight:600;border-left-color:var(--vermilion)}
  .toc-list .toc-l4 a{padding-left:28px;font-size:11px}
  .toc-list .toc-l4 a.active{border-left-color:transparent}
  .toc-list .toc-l4 a.active::before{
    content:"";position:absolute;left:16px;top:50%;width:4px;height:4px;margin-top:-2px;
    background:var(--vermilion);
  }
  .margin-foot{
    margin-top:28px;padding-top:12px;border-top:1px solid var(--rule);
    display:flex;justify-content:space-between;gap:10px;
    font-family:var(--sans);font-size:9px;letter-spacing:.14em;color:var(--muted);
  }
  .margin-foot a{color:var(--ink)}
  .margin-foot a:hover{color:var(--vermilion)}

  /* ── 文末 ── */
  .article-foot{
    margin-top:74px;padding-top:34px;
    border-top:1px solid var(--ink);
  }
  .end{
    margin-bottom:26px;
    font-family:var(--sans);font-size:9px;letter-spacing:.32em;color:var(--muted);
    text-align:center;
  }
  .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:34px}
  .tags span{
    padding:4px 10px;border:1px solid var(--rule);
    font-family:var(--sans);font-size:9px;letter-spacing:.12em;color:var(--muted);
  }
  .pager{
    display:flex;justify-content:space-between;gap:20px;
    padding-top:18px;border-top:1px solid var(--rule);
    font-family:var(--sans);font-size:10px;letter-spacing:.06em;
  }
  .pager a{display:flex;flex-direction:column;gap:5px;max-width:48%;border-bottom:none}
  .pager small{font-size:8.5px;letter-spacing:.18em;color:var(--muted)}
  .pager strong{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.01em}
  .pager a:hover strong{color:var(--vermilion)}

  .site-foot{
    max-width:1240px;margin:0 auto;padding:22px 64px 48px;
    border-top:1px solid var(--rule);
    display:flex;justify-content:space-between;gap:20px;
    font-family:var(--sans);font-size:9px;letter-spacing:.16em;color:var(--muted);
  }
  .site-foot a:hover{color:var(--vermilion)}

  /* ── 灯箱 ── */
  .lightbox{
    position:fixed;inset:0;z-index:220;
    display:none;align-items:center;justify-content:center;flex-direction:column;
    background:rgba(16,14,12,.96);
    padding:40px;
  }
  .lightbox.active{display:flex}
  .lightbox img{max-width:92vw;max-height:84vh;object-fit:contain;display:block}
  .lb-close{
    position:absolute;top:20px;right:28px;
    border:none;background:none;cursor:pointer;
    color:rgba(245,239,227,.7);font-family:var(--sans);font-size:30px;line-height:1;
  }
  .lb-close:hover{color:#fff}
  .lb-cap{
    margin-top:16px;max-width:70vw;text-align:center;
    font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:rgba(245,239,227,.65);
  }

  @media(max-width:1120px){
    .article-layout{grid-template-columns:minmax(0,720px);gap:0;justify-content:center}
    .margin{display:none}
    .prose h3::before{position:static;display:block;margin-bottom:8px}
    .prose h3:first-of-type::before{margin-bottom:8px}
  }
  @media(max-width:760px){
    .topbar-inner{padding:0 20px;height:56px}
    .topbar nav{display:flex;gap:12px;font-size:9.5px}
    .topbar .mark span{display:none}
    .topbar nav sup{display:none}
    .hero{height:62vh;min-height:400px}
    .hero-inner{padding:0 20px 30px}
    .hero h1{font-size:44px;line-height:1.1}
    .hero .subtitle{font-size:16px}
    .hero .meta{flex-wrap:wrap;font-size:12px;margin-top:16px}
    .hero-cap{display:none}
    .article-layout{padding:36px 20px 64px}
    .prose{font-size:16.5px;line-height:1.95}
    .prose h3{font-size:25px;margin-top:56px}
    .prose h4{font-size:19px}
    .prose h3 + p{font-size:17.5px}
    .prose figure{margin:34px auto;width:fit-content;max-width:100%}
    .prose figure:has(img.portrait){max-width:78%}
    .prose p > img{margin:32px auto}
    .prose p > img.portrait{max-width:78%}
    .prose figure figcaption{font-size:13.5px}
    .prose blockquote{padding-left:36px;font-size:17px}
    .prose blockquote::before{font-size:64px;top:-16px}
    .pager{flex-direction:column;gap:18px}
    .pager a{max-width:100%}
    .site-foot{padding:18px 20px 36px;flex-direction:column;gap:8px}
  }