:root{
    --paper:#FFFFFF;
    --paper2:#FAFAFA;
    --edge:#E8E6E4;
    --ink:#1A1714;
    --ink-mid:#6B6560;
    --ink-soft:#9B9591;
    --ink-pale:#D0C9C4;
    --mono:ui-monospace,"Cascadia Mono","SFMono-Regular","Roboto Mono",Menlo,monospace;
    --serif:"Songti TC","STSong","Noto Serif CJK TC","Source Han Serif TC",serif;
    --sans:"Noto Sans TC",system-ui,"PingFang TC","Microsoft JhengHei",sans-serif;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--paper);
    color:var(--ink);
    font:16px/1.7 var(--sans);
    text-autospace:normal;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;text-decoration:none}

  /* ====== 版型 B：版心索引 · 黑白墨韻 ====== */
  .vB{
    position:relative;
    display:grid;
    grid-template-columns:200px 1fr;
    min-height:100vh;
    overflow:hidden;
  }

  /* 墨暈底圖層（三層疊加模擬宣紙滲墨）*/
  .vB::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 280px 320px at 15% 25%,
        rgba(26,23,20,0.05) 0%,
        rgba(26,23,20,0.015) 38%,
        transparent 62%),
      radial-gradient(ellipse 180px 200px at 75% 60%,
        rgba(26,23,20,0.04) 0%,
        rgba(26,23,20,0.01) 42%,
        transparent 68%),
      radial-gradient(ellipse 220px 260px at 50% 80%,
        rgba(26,23,20,0.03) 0%,
        rgba(26,23,20,0.008) 45%,
        transparent 72%);
    filter:blur(40px);
  }

  /* 左側書脊 rail */
  .vB .rail{
    position:relative;
    z-index:1;
    border-right:1px solid var(--edge);
    padding:76px 24px 40px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:var(--paper);
  }

  .vB .rail .vert{
    font-family:var(--serif);
    font-size:clamp(40px,6vw,60px);
    font-weight:400;
    writing-mode:vertical-rl;
    letter-spacing:.14em;
    line-height:1;
    text-shadow:0 0 28px rgba(26,23,20,0.12);
  }

  .vB .rail .vert .ink{
    font-weight:600;
    position:relative;
  }

  /* 墨字錯位殘影（misregistration）*/
  .vB .rail .vert .ink::after{
    content:"墨";
    position:absolute;
    left:0;
    top:0;
    opacity:.18;
    transform:translate(3px,2px);
    font-weight:400;
  }

  .vB .rail .meta{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    color:var(--ink-soft);
    line-height:2;
  }

  /* 右側內容 body */
  .vB .body{
    position:relative;
    z-index:1;
    padding:76px 48px 40px;
    background:transparent;
  }

  .vB .body .cap{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--ink-mid);
  }

  .vB .body h2{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(22px,3.2vw,34px);
    margin:14px 0 40px;
    max-width:22em;
    line-height:1.5;
  }

  /* 目次列表 */
  .vB .toc{
    list-style:none;
    border-top:1px solid var(--edge);
  }

  .vB .toc li{
    border-bottom:1px solid var(--edge);
  }

  .vB .toc a{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    gap:20px;
    padding:22px 8px;
    min-height:44px; /* touch target */
    transition:background .18s ease,color .18s ease;
  }

  .vB .toc a:hover{
    background:var(--ink);
    color:var(--paper);
  }

  .vB .toc .n{
    font-family:var(--mono);
    font-size:15px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--ink);
    transition:color .18s ease;
  }

  .vB .toc a:hover .n{
    color:var(--paper);
  }

  .vB .toc .t{
    font-size:19px;
    line-height:1.4;
  }

  .vB .toc .t small{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.06em;
    color:var(--ink-mid);
    text-transform:none;
    margin-top:4px;
    transition:color .18s ease;
  }

  .vB .toc a:hover .t small{
    color:var(--ink-pale);
  }

  .vB .toc .go{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-soft);
    transition:color .18s ease;
  }

  .vB .toc a:hover .go{
    color:var(--paper);
  }

  /* 未上線項目 */
  .vB .toc .soon{
    color:var(--ink-soft);
  }

  .vB .toc .soon:hover{
    background:transparent;
    color:var(--ink-soft);
    cursor:default;
  }

  .vB .toc .soon .n,
  .vB .toc .soon .t,
  .vB .toc .soon .go{
    color:var(--ink-soft);
  }

  /* 手機版 */
  @media (max-width:720px){
    .vB{
      grid-template-columns:1fr;
    }

    /* rail 改橫排頂部 */
    .vB .rail{
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
      border-right:none;
      border-bottom:1px solid var(--edge);
      padding:56px 20px 20px;
    }

    .vB .rail .vert{
      writing-mode:horizontal-tb;
      font-size:clamp(32px,9vw,48px);
    }

    .vB .rail .vert .ink::after{
      transform:translate(2px,2px);
    }

    .vB .rail .meta{
      text-align:right;
      font-size:10px;
    }

    .vB .body{
      padding:32px 20px 40px;
    }

    .vB .body h2{
      font-size:clamp(20px,5vw,26px);
      margin:12px 0 32px;
    }

    .vB .toc a{
      grid-template-columns:auto 1fr;
      gap:16px;
      padding:18px 4px;
    }

    .vB .toc .go{
      display:none; /* 手機隱藏箭頭，節省空間 */
    }

    /* 墨暈底圖手機版縮小不透明度 */
    .vB::before{
      opacity:.7;
      filter:blur(30px);
    }
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important}
  }