/* ==========================================================================
   base.css —— 设计变量 · 重置 · 排版 · 基础控件
   只放「全站通用且与布局无关」的东西；改配色与字号只看这一个文件。
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root{
  /* 颜色 */
  --oat:#f6f2ec;
  --paper:#fffdf9;
  --ink:#211d18;
  --ink-soft:#5c554b;
  --ink-faint:#9c9284;
  --line:#e2d9cb;
  --sage:#4a5a48;
  --sage-deep:#33402f;
  --sage-tint:rgba(74,90,72,.07);
  --clay:#b28659;
  --danger:#a8452f;
  --shadow:0 24px 60px -32px rgba(33,29,24,.35);

  /* 字体 */
  --serif:"Noto Serif SC","Songti SC",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;

  /* 动效节奏（effects.css / responsive.css 复用） */
  --ease:cubic-bezier(.4,.1,.2,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur-fast:.18s;
  --dur:.32s;
  --dur-slow:.7s;

  /* 尺寸：header 只有一个高度（吸顶前后一致，不再做缩放动画）；
     --tab-h 为 tab 与选中滑块高度，在 header 内上下留白相等：(62 - 44) / 2 = 9px */
  --head-h:62px;
  --tab-h:44px;
  --maxw:1180px;
}

/* ---------- 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--oat);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.75;
  font-weight:400;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.25;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.3rem,6.2vw,4.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.12rem}
/* 与 h1 同尺寸但语义上不是页面主标题（轮播非首张用） */
.h1{font-size:clamp(2.3rem,6.2vw,4.1rem);letter-spacing:-.01em;line-height:1.18}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:2px}

/* ---------- 通用工具 ---------- */
/* 统一保证 [hidden] 真能隐藏：组件里的 display:grid/flex 会盖过浏览器默认样式 */
[hidden]{display:none !important}
.shell{width:min(var(--maxw),100% - 2.75rem);margin-inline:auto}
.eyebrow{font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:var(--clay);margin-bottom:1rem}
.section-note{font-size:.9rem;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{width:auto;height:auto;clip:auto;margin:0;position:fixed;top:.75rem;left:.75rem;z-index:99;
  background:var(--ink);color:var(--paper);padding:.6rem 1rem}

/* ---------- 按钮 ---------- */
/* .btn 为通用按钮；涟漪由 js/core.js 注入 <span class="ripple"> */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;background:var(--sage);color:#fdfaf5;
  font-size:.98rem;letter-spacing:.05em;border:1px solid var(--sage);
  border-radius:999px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),
    transform var(--dur-fast),box-shadow var(--dur);
}
.btn:hover{background:var(--sage-deep);border-color:var(--sage-deep);transform:translateY(-2px);
  box-shadow:0 14px 26px -18px rgba(33,29,24,.8)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:60ms}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.btn-full{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- 表单控件 ---------- */
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.88rem;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:.4rem}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--oat);
  border:1px solid var(--line);border-radius:2px;padding:.72rem .85rem;
  transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast)}
input:hover,select:hover,textarea:hover{border-color:#c9bcaa}
input:focus,select:focus,textarea:focus{border-color:var(--sage);background:#fff;outline:none;
  box-shadow:0 0 0 3px var(--sage-tint)}
textarea{resize:vertical;min-height:88px}
/* 校验失败：由 js/forms.js 在 .field 上切 invalid 类 */
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger);background:#fdf4f1}
.field.invalid input:focus{box-shadow:0 0 0 3px rgba(168,69,47,.16)}
.error{color:var(--danger);font-size:.85rem;margin:.4rem 0 0}