/* ==========================================================================
   利来品牌站 · 共享站点样式 /assets/site.css
   设计系统：左右分屏 · 深湖蓝叙事 / 纸白索引 · 暖砂橙强调 · 青瓷绿回溯
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --lake-900:#0E3A4C;
  --lake-700:#17586E;
  --indigo-900:#262A56;
  --wine-800:#6C2140;
  --sand-500:#E08A3C;
  --sand-200:#F6DDC2;
  --sand-700:#B2641F;
  --celadon-400:#7FB3A3;
  --paper:#FBF7F1;
  --white:#FFFFFF;
  --ink:#15232B;
  --slate:#4B5F68;

  --fs-13:13px;
  --fs-15:15px;
  --fs-17:17px;
  --fs-22:22px;
  --fs-30:30px;
  --fs-40:40px;
  --fs-54:54px;
  --fs-72:72px;

  --font-display:"Noto Sans SC","Yuanti SC","Hiragino Sans GB","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-editorial:"Noto Serif SC","Songti SC","Source Han Serif SC",Georgia,serif;
  --font-body:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;

  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:40px;
  --sp-6:56px;
  --sp-7:72px;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  --ease:cubic-bezier(0.2,0.7,0.3,1);
  --dur:180ms;
  --dur-slow:240ms;

  --shell:1240px;
  --nav-zone-w:66fr;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-17);
  font-weight:400;
  line-height:1.75;
  line-break:strict;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.nav-open{overflow:hidden;}

h1,h2,h3,h4,h5,h6{
  margin:0 0 0.5em;
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.16;
  letter-spacing:-0.01em;
  color:var(--ink);
}

h1{font-size:var(--fs-40);}
h2{font-size:var(--fs-30);}
h3{font-size:var(--fs-22);}
h4{font-size:var(--fs-17);}

p{margin:0 0 1em;max-width:38em;}

a{color:var(--lake-700);text-underline-offset:3px;}
a:hover{color:var(--sand-700);}

ul,ol{margin:0 0 1em;padding-left:1.4em;}

img,svg,video{display:block;max-width:100%;height:auto;}

button{font:inherit;color:inherit;}

hr{border:0;border-top:1px solid rgba(14,58,76,.14);margin:var(--sp-4) 0;}

::selection{background:var(--sand-200);color:var(--lake-900);}

:where(a,button,[tabindex],summary,input,select,textarea):focus-visible{
  outline:2px solid var(--sand-500);
  outline-offset:3px;
}

[hidden]{display:none !important;}

/* ---------- 3. 跳转链接 ---------- */
.skip-link{
  position:absolute;
  top:0;
  left:16px;
  z-index:300;
  transform:translateY(-140%);
  display:inline-block;
  padding:12px 22px;
  background:var(--sand-500);
  color:var(--lake-900);
  font-size:var(--fs-15);
  font-weight:700;
  text-decoration:none;
  border-radius:0 0 var(--r-md) var(--r-md);
  transition:transform var(--dur) var(--ease);
}

.skip-link:focus{
  transform:translateY(0);
  color:var(--lake-900);
}

#main-content{display:block;scroll-margin-top:110px;}

/* ---------- 4. 容器与栅格 ---------- */
.container{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--sp-3);
}

.container--narrow{max-width:820px;}

.section{padding-block:var(--sp-5);}

.section__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-1) var(--sp-3);
  margin-bottom:var(--sp-3);
}

.section__head > :last-child{margin-bottom:0;}

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}

.split__aside{
  background:var(--lake-900);
  color:var(--paper);
  padding:var(--sp-4) var(--sp-3);
}

.split__aside h1,
.split__aside h2,
.split__aside h3{color:var(--white);}

.split__main{
  background:var(--paper);
  padding:var(--sp-4) var(--sp-3);
}

/* ---------- 5. 站点头部 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--paper);
}

.scroll-progress{
  position:fixed;
  inset-inline:0;
  top:0;
  height:3px;
  z-index:120;
  pointer-events:none;
  background:transparent;
}

.scroll-progress__bar{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--celadon-400),var(--sand-500));
  transition:width 100ms linear;
}

.site-header__split{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  width:100%;
}

.site-header__brand-zone{
  display:flex;
  align-items:center;
  background:var(--lake-900);
  color:var(--white);
  padding:12px var(--sp-3);
  border-end-end-radius:var(--r-xl);
}

.site-header__nav-zone{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-2);
  background:var(--paper);
  padding:8px var(--sp-2) 8px 0;
  border-bottom:1px solid rgba(127,179,163,.55);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--white);
  min-width:0;
}

.brand:hover{color:var(--white);}

.brand__mark{
  flex:0 0 auto;
  width:14px;
  height:14px;
  border-radius:4px 4px 4px 0;
  background:var(--sand-500);
  box-shadow:0 0 0 5px rgba(224,138,60,.16);
}

.brand__text{display:block;min-width:0;}

.brand__name{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--fs-22);
  line-height:1.1;
  letter-spacing:0.01em;
  color:var(--white);
}

.brand__line{
  display:block;
  margin-top:3px;
  font-family:var(--font-editorial);
  font-weight:600;
  font-size:var(--fs-13);
  line-height:1.5;
  letter-spacing:0.04em;
  color:rgba(251,247,241,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- 6. 导航与移动抽屉 ---------- */
.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--sand-500);
  color:var(--lake-900);
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-size:var(--fs-13);
  font-weight:700;
  letter-spacing:0.06em;
  cursor:pointer;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}

.nav-toggle:hover{background:var(--sand-200);}

.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  width:16px;
}

.nav-toggle__bar{
  display:block;
  height:2px;
  width:100%;
  background:var(--lake-900);
  border-radius:2px;
}

.nav-toggle__label{line-height:1;}

.nav-close{display:none;}

.site-nav{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-width:0;
}

.site-nav__list{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
  flex-wrap:nowrap;
}

.site-nav__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  font-size:var(--fs-15);
  font-weight:600;
  line-height:1.5;
  color:var(--slate);
  text-decoration:none;
  border-radius:var(--r-sm);
  white-space:nowrap;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}

.site-nav__link::before{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:2px;
  background:transparent;
  transition:background-color var(--dur) var(--ease);
}

.site-nav__link:hover{
  color:var(--lake-900);
  background:rgba(224,138,60,.14);
}

.site-nav__link:hover::before{background:var(--sand-200);}

.site-nav__link[aria-current="page"]{
  color:var(--lake-900);
  background:var(--sand-200);
}

.site-nav__link[aria-current="page"]::before{background:var(--sand-500);}

.site-nav__cta{flex:0 0 auto;}

/* ---------- 7. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-family:var(--font-body);
  font-size:var(--fs-15);
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}

.btn:hover{transform:translateY(-2px);}

.btn--primary{
  background:var(--sand-500);
  color:var(--lake-900);
}

.btn--primary:hover{
  background:var(--sand-200);
  color:var(--lake-900);
  box-shadow:0 16px 30px -20px rgba(224,138,60,.95);
}

.btn--ghost{
  background:transparent;
  color:var(--lake-900);
  border-color:rgba(14,58,76,.28);
}

.btn--ghost:hover{
  background:rgba(14,58,76,.06);
  border-color:var(--lake-700);
}

.btn--quiet{
  background:rgba(251,247,241,.12);
  color:var(--paper);
  border-color:rgba(127,179,163,.5);
}

.btn--quiet:hover{
  background:rgba(127,179,163,.24);
  color:var(--white);
}

.btn--block{width:100%;}

/* ---------- 8. 面包屑 ---------- */
.breadcrumbs{
  padding-block:var(--sp-2);
  font-size:var(--fs-15);
  color:var(--slate);
}

.breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.breadcrumbs__item{
  display:flex;
  align-items:center;
  gap:8px;
}

.breadcrumbs__item + .breadcrumbs__item::before{
  content:"/";
  color:var(--celadon-400);
  font-weight:600;
}

.breadcrumbs__link{
  color:var(--lake-700);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}

.breadcrumbs__link:hover{
  color:var(--sand-700);
  border-bottom-color:var(--celadon-400);
}

.breadcrumbs__current{color:var(--slate);font-weight:600;}

/* ---------- 9. 横向主题带 ---------- */
.band{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--celadon-400);
  border-block:1px solid var(--celadon-400);
}

.band__item{
  flex:1 1 168px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:var(--sp-2) var(--sp-3);
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}

.band__item:hover{
  background:var(--sand-200);
  color:var(--lake-900);
}

.band__label{
  font-family:var(--font-editorial);
  font-weight:600;
  font-size:var(--fs-15);
  letter-spacing:0.04em;
  line-height:1.5;
  color:var(--lake-900);
}

.band__count{
  font-family:var(--font-body);
  font-size:var(--fs-22);
  font-weight:600;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  color:var(--sand-700);
}

.band__item--dark{background:var(--indigo-900);}
.band__item--dark .band__label{color:var(--paper);}
.band__item--dark .band__count{color:var(--sand-200);}

/* ---------- 10. 卡片与错层 ---------- */
.stagger{
  display:grid;
  gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr));
  align-items:start;
}

.card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:var(--sp-3);
  background:var(--white);
  border:1px solid rgba(14,58,76,.1);
  border-radius:var(--r-lg);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}

.card__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--fs-22);
  line-height:1.25;
  color:var(--lake-900);
}

.card__text{
  margin:0;
  max-width:none;
  font-size:var(--fs-15);
  line-height:1.75;
  color:var(--slate);
}

.card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:var(--sp-1);
  font-size:var(--fs-13);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--slate);
}

.card--link{
  text-decoration:none;
  color:inherit;
}

.card--link:hover{
  color:inherit;
}

.card--sand{background:var(--sand-200);border-color:rgba(224,138,60,.4);}
.card--wine{background:var(--wine-800);border-color:transparent;}
.card--wine .card__title{color:var(--white);}
.card--wine .card__text{color:rgba(251,247,241,.82);}
.card--wine .card__meta{color:rgba(251,247,241,.7);}
.card--indigo{background:var(--indigo-900);border-color:transparent;}
.card--indigo .card__title{color:var(--white);}
.card--indigo .card__text{color:rgba(251,247,241,.82);}
.card--indigo .card__meta{color:rgba(251,247,241,.7);}

/* ---------- 11. 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:var(--fs-13);
  font-weight:600;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.tag--sand{background:var(--sand-200);color:var(--lake-900);}
.tag--celadon{background:rgba(127,179,163,.24);color:var(--lake-700);}
.tag--wine{background:rgba(108,33,64,.12);color:var(--wine-800);}
.tag--ink{background:rgba(14,58,76,.08);color:var(--slate);}

/* ---------- 12. 折叠面板 ---------- */
.fold{
  background:var(--white);
  border:1px solid rgba(14,58,76,.16);
  border-left:3px solid var(--sand-500);
  border-radius:0 var(--r-md) var(--r-md) 0;
  overflow:hidden;
}

.fold + .fold{margin-top:12px;}

.fold__btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  width:100%;
  padding:var(--sp-2) var(--sp-3);
  background:none;
  border:0;
  font-family:var(--font-body);
  font-size:var(--fs-17);
  font-weight:600;
  line-height:1.6;
  text-align:left;
  color:var(--lake-900);
  cursor:pointer;
  transition:background-color var(--dur) var(--ease);
}

.fold__btn:hover{background:rgba(246,221,194,.5);}

.fold__icon{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--sand-200);
  color:var(--sand-700);
  font-size:var(--fs-13);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--dur-slow) var(--ease),background-color var(--dur) var(--ease);
}

.fold[data-open="true"] .fold__icon{
  transform:rotate(45deg);
  background:var(--sand-500);
  color:var(--lake-900);
}

.fold__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-slow) var(--ease);
}

.fold[data-open="true"] .fold__panel{grid-template-rows:1fr;}

.fold__inner{overflow:hidden;}

.fold__body{
  padding:0 var(--sp-3) var(--sp-3);
  font-size:var(--fs-17);
  color:var(--slate);
}

/* ---------- 13. 跟随目录 ---------- */
.toc{
  padding:var(--sp-2) 0;
}

.toc__list{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

.toc__link{
  display:block;
  padding:8px 12px;
  font-size:var(--fs-15);
  font-weight:600;
  color:var(--slate);
  text-decoration:none;
  border-left:3px solid transparent;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}

.toc__link:hover{
  color:var(--lake-900);
  background:rgba(224,138,60,.12);
}

.toc__link.is-active{
  color:var(--lake-900);
  background:var(--sand-200);
  border-left-color:var(--sand-500);
}

/* ---------- 14. 图片容器 ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--lake-700);
  isolation:isolate;
}

.media-frame > img,
.media-frame > svg,
.media-frame > .media-frame__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 80% at 80% 0%,rgba(224,138,60,.22),transparent 60%);
}

.media-frame__caption{
  position:absolute;
  inset-inline:0;
  bottom:0;
  margin:0;
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-13);
  line-height:1.6;
  color:var(--paper);
  background:linear-gradient(to top,rgba(14,58,76,.85),transparent);
  z-index:1;
}

.media-frame--wide{aspect-ratio:16 / 9;}
.media-frame--tall{aspect-ratio:3 / 4;}
.media-frame--square{aspect-ratio:1 / 1;}
.media-frame--tilt{transform:rotate(-1.5deg);border-radius:var(--r-xl) var(--r-lg) var(--r-xl) var(--r-sm);}

/* ---------- 15. 正文排版块 ---------- */
.prose{max-width:38em;}

.prose h2{
  margin-top:1.6em;
  font-size:var(--fs-22);
}

.prose h3{
  margin-top:1.4em;
  font-size:var(--fs-17);
}

.prose p{max-width:none;}

.prose ul,
.prose ol{padding-left:1.3em;}

.prose li{margin-bottom:0.35em;}

.prose a{border-bottom:1px solid rgba(127,179,163,.7);text-decoration:none;}

.prose a:hover{border-bottom-color:var(--sand-500);}

/* ---------- 16. 站点页脚 ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  background:var(--lake-900);
  color:rgba(251,247,241,.82);
  border-top:1px solid rgba(127,179,163,.35);
  font-size:var(--fs-15);
}

.site-footer::before{
  content:"";
  position:absolute;
  inset-inline-start:-12%;
  top:-38%;
  width:64%;
  height:78%;
  background:radial-gradient(circle at 50% 50%,rgba(224,138,60,.16),transparent 68%);
  pointer-events:none;
}

.site-footer__top{
  position:relative;
  display:grid;
  gap:var(--sp-5);
  max-width:var(--shell);
  margin-inline:auto;
  padding:var(--sp-7) var(--sp-3) var(--sp-5);
}

.site-footer__brand{max-width:22em;}

.site-footer__wordmark{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--fs-30);
  line-height:1.15;
  letter-spacing:0.01em;
  color:var(--white);
  max-width:none;
}

.site-footer__tag{
  margin:0 0 var(--sp-3);
  max-width:22em;
  font-family:var(--font-editorial);
  font-weight:600;
  font-size:var(--fs-15);
  line-height:1.8;
  letter-spacing:0.04em;
  color:rgba(251,247,241,.72);
}

.site-footer__cta{margin-top:var(--sp-1);}

.site-footer__grid{
  display:grid;
  gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}

.site-footer__col{min-width:0;}

.site-footer__title{
  margin:0 0 12px;
  font-family:var(--font-editorial);
  font-weight:600;
  font-size:var(--fs-15);
  letter-spacing:0.08em;
  color:var(--celadon-400);
}

.site-footer__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.site-footer__link{
  display:inline-block;
  color:rgba(251,247,241,.84);
  font-size:var(--fs-15);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.site-footer__link:hover{
  color:var(--white);
  border-bottom-color:var(--celadon-400);
}

.site-footer__contact{
  position:relative;
  max-width:var(--shell);
  margin-inline:auto;
  padding:0 var(--sp-3) var(--sp-5);
}

.site-footer__contact .site-footer__title{margin-bottom:var(--sp-2);}

.site-footer__contact-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:1px;
  margin:0;
  padding:0;
  list-style:none;
  background:rgba(127,179,163,.32);
  border:1px solid rgba(127,179,163,.32);
  border-radius:var(--r-lg);
  overflow:hidden;
}

.site-footer__contact-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:var(--sp-2) var(--sp-3);
  background:rgba(23,88,110,.55);
}

.site-footer__contact-label{
  font-family:var(--font-editorial);
  font-weight:600;
  font-size:var(--fs-13);
  letter-spacing:0.08em;
  color:var(--celadon-400);
}

.site-footer__contact-value{
  font-size:var(--fs-15);
  font-weight:600;
  line-height:1.6;
  color:var(--white);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.site-footer__note{
  margin:var(--sp-2) 0 0;
  max-width:46em;
  font-size:var(--fs-13);
  line-height:1.8;
  color:rgba(251,247,241,.62);
}

.site-footer__legal{
  position:relative;
  border-top:1px solid rgba(127,179,163,.28);
}

.site-footer__legal-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px var(--sp-3);
  max-width:var(--shell);
  margin-inline:auto;
  padding:var(--sp-2) var(--sp-3) var(--sp-4);
  font-size:var(--fs-13);
  color:rgba(251,247,241,.66);
}

.site-footer__copy,
.site-footer__icp{
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
}

.site-footer__icp{
  padding:3px 10px;
  border:1px solid rgba(127,179,163,.4);
  border-radius:var(--r-pill);
  color:rgba(251,247,241,.78);
}

/* ---------- 17. 返回顶部 ---------- */
.to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:80;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 18px;
  background:var(--lake-900);
  color:var(--paper);
  border:1px solid rgba(127,179,163,.55);
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:var(--fs-13);
  font-weight:700;
  letter-spacing:0.04em;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  box-shadow:0 18px 34px -20px rgba(14,58,76,.95);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
             visibility var(--dur) var(--ease),background-color var(--dur) var(--ease);
}

.to-top[data-visible="true"]{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.to-top:hover{background:var(--sand-500);color:var(--lake-900);}

/* ---------- 18. 平板与桌面 ---------- */
@media (min-width:900px){
  .container{padding-inline:var(--sp-4);}

  .section{padding-block:var(--sp-6);}

  .split{grid-template-columns:minmax(0,36fr) minmax(0,64fr);}

  .split__aside{
    padding:var(--sp-6) var(--sp-4) var(--sp-6) var(--sp-5);
    border-start-end-radius:var(--r-xl);
    min-height:100%;
  }

  .split__main{padding:var(--sp-6) var(--sp-5) var(--sp-6) var(--sp-4);}

  .stagger > *:nth-child(even){margin-top:24px;}
  .stagger > *:nth-child(3n + 1){margin-top:0;}

  .site-footer__top{
    grid-template-columns:minmax(0,34fr) minmax(0,66fr);
    gap:var(--sp-6);
  }

  .site-footer__wordmark{font-size:var(--fs-40);}

  .toc--sticky{
    position:sticky;
    top:120px;
  }
}

/* ---------- 19. 桌面导航（1200px 以上横向展开） ---------- */
@media (min-width:1200px){
  .site-header__split{grid-template-columns:minmax(0,34fr) minmax(0,66fr);}

  .site-header__brand-zone{padding:20px var(--sp-4) 20px var(--sp-5);}

  .site-header__nav-zone{padding:12px var(--sp-4) 12px var(--sp-3);}

  .nav-toggle{display:none;}

  .nav-close{display:none;}
}

/* ---------- 20. 移动 / 平板抽屉导航 ---------- */
@media (max-width:1199px){
  .nav-toggle{display:inline-flex;}

  .site-nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:90;
    width:min(86vw,360px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:var(--sp-3);
    padding:72px var(--sp-3) var(--sp-3);
    background:var(--lake-900);
    color:var(--paper);
    overflow-y:auto;
    transform:translateX(102%);
    visibility:hidden;
    box-shadow:-32px 0 64px -32px rgba(14,58,76,.85);
    transition:transform 280ms var(--ease),visibility 0s linear 280ms;
  }

  .site-nav[data-open="true"]{
    transform:translateX(0);
    visibility:visible;
    transition:transform 280ms var(--ease),visibility 0s linear 0s;
  }

  .nav-close{
    position:absolute;
    top:16px;
    right:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    background:rgba(251,247,241,.1);
    color:var(--paper);
    border:1px solid rgba(127,179,163,.5);
    border-radius:50%;
    font-size:var(--fs-15);
    line-height:1;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
  }

  .nav-close:hover{background:var(--sand-500);color:var(--lake-900);}

  .site-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    flex-wrap:nowrap;
    width:100%;
  }

  .site-nav__link{
    padding:14px 14px;
    font-size:var(--fs-17);
    color:rgba(251,247,241,.86);
    border-radius:var(--r-md);
    white-space:normal;
  }

  .site-nav__link:hover{
    color:var(--white);
    background:rgba(127,179,163,.2);
  }

  .site-nav__link:hover::before{background:var(--celadon-400);}

  .site-nav__link[aria-current="page"]{
    color:var(--lake-900);
    background:var(--sand-500);
  }

  .site-nav__link[aria-current="page"]::before{background:var(--lake-900);}

  .site-nav__cta{
    width:100%;
    margin-top:var(--sp-1);
  }
}

@media (max-width:600px){
  h1{font-size:var(--fs-30);}
  h2{font-size:var(--fs-22);}
  h3{font-size:var(--fs-17);}

  .site-header__brand-zone{padding:12px var(--sp-2);}

  .brand__name{font-size:var(--fs-17);}

  .brand__line{
    font-size:var(--fs-13);
    white-space:normal;
  }

  .site-footer__wordmark{font-size:var(--fs-22);}

  .to-top{
    right:14px;
    bottom:14px;
    padding:10px 14px;
  }
}

/* ---------- 21. 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}

  *,
  *::before,
  *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    transition-delay:0s !important;
  }

  .card:hover,
  .btn:hover,
  .to-top{transform:none;}

  .stagger > *{margin-top:0 !important;}
}