@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');

:root{
  --ink:#000000;
  --paper:#ffffff;
  --grey:#f1f1f1;
  --bar:60px;
  --pad:1.25rem;
  --serif:"Noto Serif TC",Georgia,serif;
  --sans:"Noto Sans TC",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:.01em;
  overflow-x:hidden;
  overflow-wrap:break-word;
}

img{max-width:100%;height:auto}
a{color:inherit}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:120;
  background:var(--ink);
  color:var(--paper);
  padding:.7rem 1rem;
  text-decoration:none;
}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- 顶部条：品牌角标 + 横向平铺导航 + 联系入口 ---------- */
.bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.5rem var(--pad);
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}

.mark{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  text-decoration:none;
  flex:0 0 auto;
}
.mark-txt{
  font-weight:700;
  font-size:16px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.mark-img{
  display:block;
  width:28px;
  height:28px;
  animation:spin 16s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.nav{flex:1 1 auto;min-width:0}
.nav ul{
  display:flex;
  align-items:center;
  gap:.1rem;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav ul::-webkit-scrollbar{display:none}
.nav a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 .65rem;
  font-size:16px;
  line-height:1.3;
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav a:hover,
.nav a:focus-visible,
.nav a.is-on{border-bottom-color:var(--ink)}

.contact{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 .85rem;
  background:var(--ink);
  color:var(--paper);
  font-size:16px;
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
}
.contact:hover,
.contact:focus-visible{background:#333}

/* ---------- 十二列网格骨架 ---------- */
.frame{
  display:grid;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem;
  max-width:1320px;
  margin:0 auto;
  padding:calc(var(--bar) + 2rem) var(--pad) 0;
}

.rail{
  grid-column:1 / span 3;
  position:sticky;
  top:calc(var(--bar) + 1.5rem);
  align-self:start;
  min-width:0;
}
.rail small{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.22em;
  margin-bottom:.2rem;
}
.rail-h{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:700;
  line-height:1.2;
  margin:0 0 .85rem;
}
.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:rail;
}
.rail-list li{
  counter-increment:rail;
  border-top:1px solid var(--ink);
}
.rail-list li:last-child{border-bottom:1px solid var(--ink)}
.rail-list a{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:42px;
  padding:.25rem .3rem;
  font-size:16px;
  line-height:1.3;
  text-decoration:none;
}
.rail-list a::before{
  content:counter(rail,decimal-leading-zero);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  flex:0 0 1.7em;
}
.rail-list a:hover,
.rail-list a:focus-visible,
.rail-list a.is-on{background:var(--ink);color:var(--paper)}

.main{grid-column:4 / -1;min-width:0}
.doc{min-width:0}

/* ---------- 首屏 ---------- */
.hero{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:2rem 0 3.5rem;
}
.hero h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.5rem,8.5vw,5.5rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
}
.lead{
  margin:1.6rem auto 0;
  max-width:32ch;
  font-size:16px;
  line-height:1.7;
}

/* ---------- 正文区块 ---------- */
.doc > section{scroll-margin-top:calc(var(--bar) + 2rem)}

.doc > section:not(.hero){
  background:var(--grey);
  border-radius:28px;
  padding:2rem 1.5rem;
  margin:0 0 1.25rem;
}

.doc small{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  margin-bottom:.5rem;
}
.doc h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.7rem,4.2vw,2.5rem);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 1rem;
}
.doc h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.2rem,2.6vw,1.5rem);
  line-height:1.35;
  margin:1.9rem 0 .6rem;
}
.doc p{margin:0 0 1.1rem;max-width:70ch}
.doc ul,
.doc ol{margin:0 0 1.1rem;padding-left:1.35rem;max-width:70ch}
.doc li{margin:.35rem 0}
.doc a{text-decoration:underline;text-underline-offset:.18em}
.doc a:hover{background:var(--ink);color:var(--paper)}
.doc img{display:block;margin:1.25rem 0;border-radius:20px}
.doc blockquote{
  margin:1.5rem 0;
  padding:.3rem 0 .3rem 1.1rem;
  border-left:4px solid var(--ink);
  font-family:var(--serif);
}
.doc blockquote p{margin:0 0 .6rem}
.doc code{
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.92em;
  background:#e4e4e4;
  padding:.08em .35em;
}
.doc pre{
  overflow:auto;
  background:var(--ink);
  color:var(--paper);
  padding:1rem;
  border-radius:16px;
  margin:1.25rem 0;
}
.doc pre code{background:none;padding:0}
.doc table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:16px}
.doc th,
.doc td{border-bottom:1px solid var(--ink);padding:.5rem .4rem;text-align:left;vertical-align:top}
.doc hr{border:0;border-top:1px solid var(--ink);margin:1.75rem 0}

/* ---------- 页脚 ---------- */
.foot{
  max-width:1320px;
  margin:3rem auto 0;
  padding:0 var(--pad) 2rem;
}
.cta{
  background:var(--ink);
  color:var(--paper);
  border-radius:28px;
  padding:3.5rem 1.5rem;
  text-align:center;
}
.cta small{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.22em;
  color:rgba(255,255,255,.72);
}
.cta-h{
  font-family:var(--serif);
  font-size:clamp(1.9rem,6vw,3.4rem);
  line-height:1.1;
  margin:.6rem 0 0;
  font-weight:700;
}
.cta-h a{
  display:inline-block;
  padding:.15em 0;
  text-decoration:none;
  border-bottom:2px solid var(--paper);
}
.cta-h a:hover,
.cta-h a:focus-visible{color:#c9c9c9;border-bottom-color:#c9c9c9}

.foot-bar{
  border-top:1px solid var(--ink);
  margin-top:1.5rem;
  padding-top:1rem;
  text-align:center;
}
.copy{
  margin:0;
  font-size:13px;
  letter-spacing:.14em;
}

/* ---------- 动效 ---------- */
@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.doc > section{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.doc > section:nth-child(1){animation-delay:.02s}
.doc > section:nth-child(2){animation-delay:.08s}
.doc > section:nth-child(3){animation-delay:.14s}
.doc > section:nth-child(4){animation-delay:.2s}
.doc > section:nth-child(5){animation-delay:.26s}
.doc > section:nth-child(6){animation-delay:.32s}
.doc > section:nth-child(7){animation-delay:.38s}
.doc > section:nth-child(8){animation-delay:.44s}

/* ---------- 窄屏 ---------- */
@media (max-width:820px){
  .frame{
    grid-template-columns:1fr;
    padding-top:calc(var(--bar) + 1.25rem);
  }
  .rail{
    grid-column:1 / -1;
    position:static;
    padding-bottom:.75rem;
    border-bottom:1px solid var(--ink);
  }
  .rail small{letter-spacing:.18em}
  .rail-h{font-size:1.15rem;margin-bottom:.45rem}
  .rail-list{display:flex;flex-wrap:wrap;gap:0 .9rem}
  .rail-list li,
  .rail-list li:last-child{border:0}
  .rail-list a{min-height:40px;padding:0;gap:.35rem;font-size:16px}
  .main{grid-column:1 / -1}
  .hero{min-height:62vh;padding:1.5rem 0 2.5rem}
  .doc > section:not(.hero){padding:1.5rem 1.1rem;border-radius:22px}
  .cta{padding:2.5rem 1.25rem;border-radius:22px}
}

@media (max-width:480px){
  .bar{gap:.4rem;padding:.45rem .75rem}
  .nav a{padding:0 .5rem;font-size:16px}
  .contact{padding:0 .6rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{animation:none!important;transition:none!important}
}

button[aria-expanded]{min-width:44px;min-height:44px}