/* ============================================================================
   惜墨 XIMO · Memoir 官网  ——  设计系统 / Design System
   气质：温润 · 郑重 · 澄澈（高端出版社 × AI 产品的交点）
   本表提供设计令牌 + 可复用组件类 + 响应式栅格 + 无障碍规则。
   运行期 Settings（字号/字体/主题/动效/版心/背景）通过覆盖 :root 变量生效。
   ========================================================================== */

:root {
  /* —— 字体 —— */
  --serif: 'Noto Serif SC', 'Songti SC', serif;
  --sans: 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* —— 主题色（默认：靛蓝暖金）——，由 Settings 覆盖 —— */
  --accent: #2B4A6F;        --accent-rgb: 43,74,111;
  --accent-deep: #1C3A5B;   --accent-deep-rgb: 28,58,91;
  --accent-dark: #16273B;
  --gold: #B08A47;          --gold-rgb: 176,138,71;
  --gold-bright: #C7A863;   --gold-deep: #8C6C2C;

  /* —— 纸感中性色（跨主题恒定）—— */
  --paper: #F4EEE3;         /* 页面底 */
  --paper-card: #FDFBF6;    /* 卡片 */
  --paper-band: #ECE3D4;    /* 分区带 */
  --ink: #23303D;           /* 标题深墨 */
  --ink-body: #515C68;      /* 正文 */
  --ink-soft: #8A8375;      /* 辅助/注释 */

  /* —— 事实分级三色（伦理视觉语言 · 全平台恒定）—— */
  --fact-verbatim: #4C8A69;   /* 绿 · 原话 */
  --fact-polished: #3E6EA6;   /* 蓝 · 润色 */
  --fact-background: #BE8A3C; /* 琥珀 · 背景补充 */

  /* —— 版心与动效（由 Settings 覆盖）—— */
  --measure: 1220px;        /* 主版心宽度 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  font-size: 16px;          /* Settings 大字模式覆盖此值 */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--sans);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #DCC79A; color: var(--accent-deep); }
button { font-family: inherit; }

/* 键盘可达焦点环（无障碍） */
a:focus-visible, button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================ 动效 ============================ */
@keyframes revealUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatSlow{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes growLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes leafNext { from { transform: rotateY(0); } to { transform: rotateY(-178deg); } }
@keyframes leafPrev { from { transform: rotateY(0); } to { transform: rotateY(178deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Settings「关闭入场动效」 */
html[data-rm] * { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }

/* ============================ 布局容器 ============================ */
.x-container { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }
.x-narrow    { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.x-prose     { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.x-band { background: var(--paper-band); border-top: 1px solid rgba(35,48,61,.06); border-bottom: 1px solid rgba(35,48,61,.06); }
.x-ink-band { background: var(--accent-deep); color: #E8E2D4; }
.x-dark-band { background: var(--accent-dark); color: #E8E2D4; }

/* ============================ 排版原子 ============================ */
.x-kicker {
  font-size: .8rem; letter-spacing: .22em; color: var(--gold);
  font-weight: 600; text-transform: uppercase; margin-bottom: 12px;
}
.x-kicker--bright { color: var(--gold-bright); }
.x-h1 { font-family: var(--serif); font-weight: 900; color: var(--accent-deep); line-height: 1.22; letter-spacing: .01em; margin: 0 0 18px; font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.x-h2 { font-family: var(--serif); font-weight: 700; color: var(--accent-deep); line-height: 1.35; margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.x-h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; }
.x-serif { font-family: var(--serif); }
.x-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.x-lead { font-size: 1.08rem; color: var(--ink-body); }

/* ============================ 按钮 ============================ */
.x-btn {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  border-radius: 13px; font-weight: 600; letter-spacing: .02em;
  transition: transform .2s var(--ease-out), box-shadow .2s, background .2s, border-color .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.x-btn-primary { background: var(--accent); color: #FBF7EE; padding: 15px 30px; font-size: 1.02rem; box-shadow: 0 12px 30px -12px rgba(var(--accent-rgb),.8); }
.x-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(var(--accent-rgb),.9); }
.x-btn-ghost { background: transparent; color: var(--accent); border: 1.5px solid rgba(var(--accent-rgb),.28); padding: 14px 26px; font-size: 1.02rem; }
.x-btn-ghost:hover { background: rgba(var(--accent-rgb),.06); border-color: rgba(var(--accent-rgb),.5); }
.x-btn-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color: #2A2415; padding: 14px 28px; font-size: 1rem; font-weight: 700; }
.x-btn-gold:hover { transform: translateY(-2px); }
.x-btn-sm { padding: 12px 22px; font-size: .94rem; border-radius: 11px; }
.x-btn-lg { padding: 18px 44px; font-size: 1.15rem; border-radius: 999px; box-shadow: 0 18px 44px -16px rgba(var(--accent-rgb),.85); }
.x-btn-lg:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 24px 54px -16px rgba(var(--accent-rgb),.9); }
.x-btn-onblue { background: rgba(255,255,255,.1); color: #FBF7EE; border: 1px solid rgba(255,255,255,.22); padding: 14px 28px; font-size: 1rem; }
.x-btn-onblue:hover { background: rgba(255,255,255,.16); }

/* ============================ 卡片 ============================ */
.x-card {
  background: var(--paper-card); border: 1px solid rgba(35,48,61,.08); border-radius: 20px;
  box-shadow: 0 14px 40px -28px rgba(var(--accent-deep-rgb),.35);
}
.x-card-hover { transition: transform .3s var(--ease-out), box-shadow .3s; }
.x-card-hover:hover { transform: translateY(-4px); box-shadow: 0 22px 52px -30px rgba(var(--accent-deep-rgb),.5); }

/* ============================ 栅格（响应式）============================ */
.x-grid { display: grid; gap: 20px; }
.x-g2 { grid-template-columns: repeat(2, 1fr); }
.x-g3 { grid-template-columns: repeat(3, 1fr); }
.x-g4 { grid-template-columns: repeat(4, 1fr); }
.x-g5 { grid-template-columns: repeat(5, 1fr); }
.x-hero2 { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); gap: clamp(32px,5vw,72px); align-items: center; }
.x-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,4vw,48px); align-items: center; }

/* !important overrides inline grid-template-columns set on one-off split ratios */
@media (max-width: 960px) {
  .x-g4, .x-g5 { grid-template-columns: repeat(2, 1fr); }
  .x-hero2, .x-split { grid-template-columns: 1fr !important; }
  .x-g5 { gap: 16px; }
}
@media (max-width: 640px) {
  .x-container, .x-narrow, .x-prose { padding: 0 18px; }
  .x-g2, .x-g3, .x-g4, .x-g5 { grid-template-columns: 1fr !important; }
}

/* 法务文档：目录 + 正文两栏，移动端塌陷为单栏 */
@media (max-width: 820px) {
  [data-legal] { grid-template-columns: 1fr !important; gap: 8px !important; }
  .x-legal-toc { position: static !important; margin-bottom: 8px; }
}
/* 新闻头条卡：移动端图文竖排 */
.x-featured { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
@media (max-width: 760px) { .x-featured { grid-template-columns: 1fr !important; } }

/* ============================ 导航 ============================ */
.x-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,238,227,.82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(35,48,61,.08);
}
.x-nav { max-width: var(--measure); margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; gap: 24px; }
.x-brand { appearance: none; border: none; background: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 0; flex: none; }
.x-brand-mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg, var(--accent), var(--accent-deep)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb),.6); }
.x-navlinks { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
.x-navlink { appearance: none; border: none; background: none; cursor: pointer; font-family: inherit; padding: 8px 12px; font-size: .94rem; letter-spacing: .02em; border-radius: 8px; color: #5b6570; transition: color .2s, background .2s; white-space: nowrap; }
.x-navlink:hover { color: var(--accent); background: rgba(var(--accent-rgb),.05); }
.x-navlink.is-active { color: var(--accent); font-weight: 600; background: rgba(var(--accent-rgb),.08); }
.x-menu-btn { display: none; appearance: none; border: none; background: none; cursor: pointer; padding: 8px; color: var(--accent-deep); }
.x-mobile-menu { display: none; }

@media (max-width: 900px) {
  .x-navlinks { display: none; }
  .x-menu-btn { display: inline-flex; }
  .x-nav-cta-desktop { display: none !important; }
  .x-mobile-menu { display: block; background: var(--paper-card); border-bottom: 1px solid rgba(35,48,61,.08); padding: 8px 18px 16px; }
  .x-mobile-menu .x-navlink { display: block; width: 100%; text-align: left; padding: 12px 12px; font-size: 1rem; }
}

/* ============================ 图片占位 ============================ */
.x-imgslot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(var(--gold-rgb),.14), transparent 60%),
    linear-gradient(155deg, rgba(var(--accent-rgb),.10), rgba(var(--accent-deep-rgb),.05));
  color: var(--accent-deep); position: relative; overflow: hidden;
}
.x-imgslot::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 11px, rgba(var(--accent-deep-rgb),.028) 11px 12px);
}
.x-imgslot span { position: relative; z-index: 1; font-size: .8rem; padding: 10px 14px; line-height: 1.5; color: rgba(28,58,91,.62); font-weight: 500; }

/* ============================ 徽章 / 特性列表 ============================ */
.x-badge-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color: #2A2415; font-size: .66rem; font-weight: 700; letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; box-shadow: 0 4px 10px -4px rgba(154,123,52,.7); }
.x-featlist { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.x-featlist li { display: flex; gap: 9px; font-size: .9rem; color: var(--ink-body); line-height: 1.45; }
.x-check { flex: none; margin-top: 3px; }

/* ============================ 设置面板 ============================ */
.x-settings-fab {
  width: 52px; height: 52px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #FBF7EE; box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb),.7);
  display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease-out);
}
.x-settings-fab:hover { transform: rotate(35deg) scale(1.06); }
.x-settings-panel {
  width: 320px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px); overflow-y: auto;
  background: var(--paper-card); border: 1px solid rgba(var(--accent-deep-rgb),.12); border-radius: 18px;
  box-shadow: 0 26px 64px -22px rgba(var(--accent-deep-rgb),.55); padding: 20px 20px 22px; animation: revealUp .3s ease both;
}
.x-seg { display: flex; gap: 7px; }
.x-seg-btn { flex: 1; appearance: none; cursor: pointer; font-family: inherit; border-radius: 9px; padding: 9px 4px; font-size: .85rem; font-weight: 600; transition: all .2s; border: 1px solid rgba(var(--accent-deep-rgb),.14); background: transparent; color: var(--ink-body); }
.x-seg-btn.is-on { border-color: var(--accent); background: var(--accent); color: #FBF7EE; }

/* ============================ 书本翻页 ============================ */
.x-book { position: relative; height: clamp(438px, 52vw, 516px); border-radius: 7px; background: #FBF7EE; box-shadow: 0 46px 100px -44px rgba(var(--accent-deep-rgb),.55), 0 8px 24px -12px rgba(var(--accent-deep-rgb),.28); }
@media (max-width: 640px) { .x-book { height: clamp(360px, 120vw, 460px); } }

/* ============================ 杂项 ============================ */
.x-divider-v { width: 1px; background: rgba(35,48,61,.12); }
.x-hr-underline { position: relative; white-space: nowrap; color: var(--accent); }
.x-hr-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .24em; background: linear-gradient(90deg, #D8BE86, var(--gold)); opacity: .5; border-radius: 2px; transform-origin: left; animation: growLine 1.1s .5s ease both; z-index: -1; }
.x-reveal { animation: revealUp .9s ease both; }
.x-link-plain { appearance: none; border: none; background: none; cursor: pointer; font-family: inherit; color: #8794A6; font-size: .88rem; padding: 6px 0; transition: color .2s; display: block; text-align: left; }
.x-link-plain:hover { color: #F4EEE3; }