/* ==========================================================================
   layout.css —— 页头 / 顶部 tab / 移动抽屉 / 面板切换骨架 / 页脚
   页面骨架与导航结构都在这里；组件外观见 components.css，动画见 effects.css。
   ========================================================================== */

/* ---------- 页头（吸顶）----------
   高度恒定 62px：滚动时只切换背景与阴影，不做高度缩放，也不用 backdrop-filter
   （毛玻璃在滚动中每帧重绘，是顶部掉帧的主因） */
.site-head{position:sticky;top:0;z-index:40;background:rgba(246,242,236,.94);
  border-bottom:1px solid var(--line);transition:box-shadow var(--dur),background var(--dur)}
.site-head.is-stuck{background:rgba(246,242,236,.98);box-shadow:0 10px 30px -22px rgba(33,29,24,.5)}
.head-inner{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.25rem);height:var(--head-h)}

/* 品牌：图形与字号已放大（在 62px 高度内由 .head-inner 居中对齐，窄宽度改用简称） */
.brand{display:flex;align-items:center;gap:.8rem;flex:none}
.mark{width:34px;height:34px;border-radius:4px;border:1px solid var(--sage);flex:none;
  background:repeating-linear-gradient(90deg,var(--sage) 0 4px,transparent 4px 9px);
  transition:transform var(--dur) var(--ease-out)}
.brand:hover .mark{transform:rotate(-4deg) scale(1.05)}
.brand-text{display:flex;align-items:baseline;gap:.6rem;white-space:nowrap}
.brand-text b{font-family:var(--serif);font-size:1.34rem;font-weight:700;letter-spacing:.02em;line-height:1}
.brand-text i{font-style:normal;font-size:.72rem;letter-spacing:.18em;color:var(--ink-soft)}
.brand-short{display:none}

/* ---------- 顶部 tab 导航 ---------- */
/* 由 js/router.js 依据 js/config.js 的模块清单生成，结构：
   .nav > .nav-ind(滑块) + a.nav-tab[role=tab] > .nav-label + .nav-desc        */
.nav{margin-left:auto;display:flex;align-items:center;height:100%;position:relative;
  contain:layout;gap:clamp(.05rem,.5vw,.3rem);font-size:clamp(.78rem,.55vw + .5rem,.95rem)}
/* 选中滑块：与 tab 同尺寸（--tab-h）并在 header 内上下留白相等，
   不再与下方内容区贴合连通；位置与宽度由 JS 写入 --x / --w */
.nav-ind{position:absolute;left:0;top:50%;width:var(--w,0);height:var(--tab-h);
  transform:translate(var(--x,0),-50%);will-change:transform,width;pointer-events:none;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  transition:transform .3s var(--ease-out),width .3s var(--ease-out),opacity var(--dur)}
/* 选中标识：仅靠顶部 3px 色条 + 浅色底 + 边框体现 */
.nav-ind::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:10px 10px 0 0;background:var(--sage)}
.nav-ind[data-empty="true"]{opacity:0}
.nav-tab{position:relative;z-index:1;overflow:hidden;isolation:isolate;
  display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;height:var(--tab-h);padding-inline:clamp(.5rem,1.05vw,1rem);
  flex:0 1 auto;min-width:0;white-space:nowrap;cursor:pointer;user-select:none;
  color:var(--ink-soft);border-radius:10px;-webkit-tap-highlight-color:transparent;
  transition:color var(--dur-fast),transform var(--dur-fast)}
.nav-tab:hover{color:var(--ink)}
.nav-tab:active{transform:translateY(1px) scale(.97)}
.nav-tab .nav-desc{display:none}
.nav-tab[aria-selected="true"]{color:var(--ink)}
/* 悬停预览：极淡的标签底色（z-index:-1 让它落在文字之下） */
.nav-tab::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:10px;
  background:var(--sage-tint);opacity:0;transition:opacity var(--dur-fast)}
.nav-tab:hover::before{opacity:1}

/* ---------- 汉堡按钮与移动抽屉 ---------- */
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;background:none;border:0;
  cursor:pointer;position:relative;flex:none;-webkit-tap-highlight-color:transparent}
.bars,.bars::before,.bars::after{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);
  content:"";transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast)}
.bars{top:21px}.bars::before{top:-7px}.bars::after{top:7px}
.menu-toggle[aria-expanded="true"] .bars{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::before{transform:rotate(-90deg);top:0}
.menu-toggle[aria-expanded="true"] .bars::after{opacity:0}
.mobile-nav{display:none;grid-template-columns:1fr;gap:.25rem;padding:.5rem 1.375rem 1.5rem;
  border-top:1px solid var(--line);background:var(--oat)}
.mobile-nav a{display:flex;align-items:baseline;gap:.6rem;padding:.8rem 0;
  border-bottom:1px solid var(--line);font-size:1.02rem;
  transition:color var(--dur-fast),transform var(--dur-fast)}
/* 悬停位移用 transform，不用 padding，避免每次 hover 重排文本 */
.mobile-nav a:hover,.mobile-nav a:focus-visible{transform:translateX(.35rem);color:var(--sage)}
.mobile-nav a .nav-desc{font-size:.76rem;letter-spacing:.08em;color:var(--ink-faint)}
.mobile-nav a[aria-current="page"]{color:var(--sage);font-weight:500;border-bottom-color:var(--sage)}

/* ---------- 顶部滚动进度 ---------- */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;overflow:hidden}
.scroll-progress-fill{display:block;height:100%;width:100%;transform-origin:0 50%;
  transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--sage),var(--clay));
  transition:transform .12s linear}

/* ---------- 面板（一个模块 = 一个面板 = 一次切换） ---------- */
.panels{min-height:60vh}
/* contain:layout 把每个面板的布局开销限制在自己内部，切换与揭示时不波及整页 */
.panel{display:none;contain:layout}
.panel.is-active{display:block}
/* 加载中占位 */
.panel-skeleton{display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:38vh;
  color:var(--ink-soft);font-size:.92rem;letter-spacing:.08em}
.panel-skeleton::before{content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--sage);animation:spin .8s linear infinite}
.panel-error{padding:4rem 0;text-align:center;color:var(--danger)}
.panel-error h2{color:var(--ink)}
.panel-error .btn{margin-top:.6rem}

/* ---------- 通栏与区块头 ---------- */
.band{padding-block:clamp(4rem,9vw,7rem)}
.band.alt{background:var(--paper);border-block:1px solid var(--line)}
.section-head{max-width:40rem;margin-bottom:2.8rem}
.section-head h2{margin-bottom:.35em}
.section-sub{margin:3.4rem 0 1.6rem}
.section-sub .eyebrow{margin:0}

/* ---------- 页脚 ---------- */
.site-foot{background:var(--sage-deep);color:#ddd5c6;padding-block:3.4rem 2rem;font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:2.5rem;padding-bottom:2.4rem;
  border-bottom:1px solid rgba(221,213,198,.2)}
.site-foot .brand,.site-foot .brand-text b{color:#f6f2e9}
.site-foot .brand-text{white-space:normal;gap:.45rem}
.site-foot .brand-text i{color:#b9b09f}
.site-foot .mark{border-color:#cfc6b3;background:repeating-linear-gradient(90deg,#cfc6b3 0 3px,transparent 3px 7px)}
.site-foot p{margin:.9rem 0 0;max-width:24rem;color:#c3bbaa}
.site-foot h3{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:#b9b09f;margin-bottom:.8rem}
.foot-nav{display:grid;gap:.6rem}
.foot-nav a{color:#ddd5c6;transition:color var(--dur-fast),transform var(--dur-fast)}
.foot-nav a:hover{color:#fff;transform:translateX(.3rem)}
.foot-nav a[aria-current="page"]{color:#fff;font-weight:500}
.foot-contact a[href^="tel"],.foot-contact a[href^="mailto"]{color:#f6f2e9;
  border-bottom:1px solid transparent;transition:border-color var(--dur-fast)}
.foot-contact a:hover{border-bottom-color:var(--clay)}
.fine{font-size:.8rem;color:#9e9686;margin-top:1.6rem;text-align:center}

/* ---------- 悬浮工具：返回顶部 ---------- */
.to-top{position:fixed;right:1.5rem;bottom:1.5rem;z-index:45;width:46px;height:46px;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity var(--dur),transform var(--dur) var(--ease-out),background var(--dur-fast)}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--sage);color:#fdfaf5;border-color:var(--sage)}
.to-top:active{transform:scale(.92)}
.to-top svg{width:18px;height:18px}

/* ---------- 轻提示 toast ---------- */
.toast-zone{position:fixed;left:50%;bottom:2rem;z-index:60;display:grid;gap:.6rem;justify-items:center;
  transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:.7rem;max-width:min(90vw,26rem);
  padding:.8rem 1.15rem;border-radius:999px;background:var(--ink);color:#f7f2e9;
  font-size:.9rem;box-shadow:var(--shadow);animation:toast-in var(--dur) var(--ease-out)}
.toast.is-out{animation:toast-out var(--dur) var(--ease) forwards}
.toast::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--clay);flex:none}
.toast.ok::before{background:#8fbf7f}
.toast.err{background:var(--danger)}
.toast.err::before{background:#fff}