/* ============================================================
   基礎樣式 Base — reset、版面骨架、側邊導覽
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ overflow-x:hidden; }
body{
  background:var(--ink); color:var(--paper); font-family:var(--body); line-height:1.6;
  -webkit-font-smoothing:antialiased; transition:background .4s ease, color .4s ease;
  overflow-x:hidden; word-break:normal; overflow-wrap:break-word;
}
/* keep CJK phrases intact but allow wrapping between characters when needed */
h1,h2,h3,p,li,a,span,div{ overflow-wrap:break-word; }
.lang-zh{ word-break:auto-phrase; line-break:normal; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* glassmorphism card surface — frosted, semi-transparent, sits above blurred section bg */
.glass{ background:var(--glass); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); border:1px solid var(--glass-line); }

.eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:.7em; flex-wrap:wrap; }
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--amber); flex-shrink:0; }
.eyebrow .eb-tag{ color:var(--amber); }
.eyebrow .eb-sub{ display:none; }
h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.012em; }
.section{ padding: clamp(72px,10vw,128px) clamp(24px,6vw,84px); max-width:1200px; margin:0 auto; border-top:1px solid var(--line); position:relative; }
.section-head{ margin-bottom:48px; max-width:700px; }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); margin-top:12px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sec-ic{ width:44px; height:44px; border-radius:10px; flex-shrink:0; border:1px solid var(--line-strong); object-fit:cover; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.section-head p{ color:var(--paper-dim); margin-top:14px; font-size:1rem; line-height:1.7; }
.lang-en{ display:none; }
html[data-lang="en"] .lang-en{ display:inline; }
html[data-lang="en"] .lang-zh{ display:none; }

/* ============ Sidebar / Header ============ */
.channel-nav{
  position:fixed; top:0; left:0; height:100vh; width:var(--nav-w);
  padding:30px 26px 26px; display:flex; flex-direction:column; z-index:50;
  border-right:1px solid var(--line); background:var(--ink);
}
.brand-block{ display:flex; align-items:center; gap:13px; }
.brand-logo{ width:46px; height:46px; flex-shrink:0; border-radius:8px; overflow:hidden; background:var(--ink-soft); border:1px solid var(--line); cursor:pointer; padding:0; transition:border-color .2s ease, transform .2s ease; }
.brand-logo:hover{ border-color:var(--amber); transform:scale(1.04); }
.brand-logo img{ width:100%; height:100%; object-fit:cover; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text .b1{ font-family:var(--brand); font-size:.86rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.brand-text .b2{ font-family:var(--mono); font-size:.54rem; letter-spacing:.2em; color:var(--paper-dim); margin-top:3px; }

.toggle-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:26px; }
.toggle-btn{
  border:1px solid var(--line); background:var(--ink-soft); color:var(--paper-dim); font-family:var(--mono);
  font-size:.66rem; padding:9px 0; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:6px; letter-spacing:.03em;
}
.toggle-btn:hover{ color:var(--amber); border-color:var(--line-strong); }
.toggle-btn .ic{ font-size:.85rem; line-height:1; }

.nav-scroll-wrap{ display:flex; flex:1; min-height:0; gap:14px; margin-top:30px; }
.scroll-rail{ position:relative; width:1px; background:transparent; flex-shrink:0; }
.scroll-rail-line{ position:absolute; left:0; width:1px; background:var(--line); top:0; height:0; }
.scroll-rail-fill{ position:absolute; top:0; left:-3px; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); transition:top .18s cubic-bezier(.4,0,.2,1); }
.channel-nav ul{ display:flex; flex-direction:column; gap:17px; flex:1; }
.channel-nav li a{ font-family:var(--mono); font-size:.73rem; letter-spacing:.05em; color:var(--paper-dim); display:flex; gap:11px; align-items:baseline; transition:color .2s ease, transform .2s ease; }
.channel-nav li a:hover{ color:var(--paper); transform:translateX(2px); }
.channel-nav li a.active{ color:var(--amber); }
.channel-nav li a .n{ display:none; }
.nav-sub{ margin-top:14px; margin-left:2px; padding-left:14px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:13px; }
.nav-sub li a{ font-size:.68rem; color:var(--paper-dim); opacity:.85; }
.nav-sub li a:hover, .nav-sub li a.active{ opacity:1; }
.channel-nav ul#navList > li{ margin-bottom:2px; }
.nav-toggle{ display:none; }

@media (max-width: 940px){
  .channel-nav{ width:100%; height:auto; position:fixed; flex-direction:row; justify-content:space-between; align-items:center;
    padding:14px 20px; border-right:none; border-bottom:1px solid var(--line); background:rgba(20,20,15,0.95); backdrop-filter:blur(8px); }
  html[data-theme="light"] .channel-nav{ background:rgba(238,234,224,0.95); }
  .nav-scroll-wrap{ position:fixed; top:62px; left:0; right:0; max-height:calc(100vh - 62px); overflow-y:auto; margin:0;
    background:var(--ink); padding:22px 26px 30px; border-bottom:1px solid var(--line);
    transform:translateY(-140%); transition:transform .3s ease; }
  .nav-scroll-wrap.open{ transform:translateY(0); }
  .scroll-rail{ display:none; }
  .nav-toggle{ display:flex; align-items:center; gap:7px; background:var(--ink-soft); border:1px solid var(--line); color:var(--paper); font-family:var(--mono); font-size:.68rem; padding:9px 15px; cursor:pointer; border-radius:6px; }
  .header-toggles{ display:flex; gap:8px; }
  .header-toggles .toggle-btn{ margin-top:0; }
  .toggle-row .toggle-btn{ padding:12px 0; }
  main{ margin-top:62px; }
}
@media (min-width:941px){ .header-toggles{ display:none; } }
main{ margin-left:var(--nav-w); }
@media (max-width:940px){ main{ margin-left:0; } }

/* ============ Hero ============ */