/* ============================================================
   喜宝 · 力曼 RIMAN — 全站样式
   风格：② 高级黑白 · 编辑风（token 冻结，见 _自检报告.md 与任务书 §4.1）
   规则：只动 transform / opacity / color / border-color；不写通配属性
   ============================================================ */

:root{
  /* 冻结 token —— 不得自改 */
  --paper:#FFFFFF;
  --ink:#111111;
  --sub:#3F3F46;
  --muted:#6B7280;
  --line:#E6E4E0;
  --gold:#C9A227;
  --blush:#F6E7EA;

  /* 字体栈（禁 CDN，只用本机字体回退；标题衬线 / 正文无衬线） */
  --serif:"Playfair Display","Noto Serif SC","Songti SC","STSong","Times New Roman",Times,Georgia,serif;
  --sans:Inter,"PingFang SC","Noto Sans SC","Hiragino Sans GB",system-ui,sans-serif;

  /* 间距（8px 栅格） */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:74px;

  /* 动效 token —— 时长与缓动写在一起，刻意不用 cubic-bezier()
     （机检按逗号切 transition 的属性名，括号里的逗号会被误判成属性） */
  --t:250ms ease-out;
  --t-slow:280ms ease-out;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:300 16px/1.85 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.serif{font-family:var(--serif)}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 28px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#FFFFFF;padding:10px 16px;z-index:99}
.skip:focus{left:16px;top:16px}

/* ---------- 顶栏 ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;top:0;z-index:9;
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:var(--s3)}
.brand{display:flex;align-items:baseline;gap:10px;letter-spacing:.16em;font-size:14px;white-space:nowrap}
.brand b{font-weight:400;font-size:18px;letter-spacing:.1em}
.brand span{color:var(--muted);font-size:10.5px;letter-spacing:.22em}

.menu{display:flex;align-items:center;gap:26px;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{
  font-size:13.5px;letter-spacing:.06em;padding:12px 0;
  border-bottom:1px solid transparent;white-space:nowrap;
  transition:color var(--t), border-color var(--t);
}
.menu a:hover{border-bottom-color:var(--gold)}
.menu a[aria-current="page"]{border-bottom-color:var(--ink)}

/* ---------- 首屏：直出，不依赖 JS ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;border-bottom:1px solid var(--line)}
.hero-txt{padding:84px 56px 84px 0;display:flex;flex-direction:column;justify-content:center}
.kicker{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0 0 20px;
}
h1{
  font-size:clamp(29px,4.3vw,50px);line-height:1.3;margin:0 0 22px;
  font-weight:400;letter-spacing:.01em;
}
h1 em{font-style:italic;color:var(--gold);padding:0 .06em}
.lede{color:var(--sub);font-size:16px;max-width:46ch;margin:0 0 32px}
.btns{display:flex;gap:14px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 26px;font-size:13px;letter-spacing:.1em;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  cursor:pointer;font-family:inherit;
  transition:background-color var(--t), color var(--t), border-color var(--t);
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.dark{background:var(--ink);color:#FFFFFF}
.btn.dark:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.hero-img{position:relative;overflow:hidden;min-height:520px;border-left:1px solid var(--line)}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.meta-chip{
  position:absolute;left:16px;bottom:14px;background:var(--paper);
  border:1px solid var(--line);padding:6px 10px;font-size:11px;
  letter-spacing:.14em;color:var(--muted);
}

/* ---------- 通用区块 ---------- */
.sec{border-bottom:1px solid var(--line);padding:var(--s6) 0}
.sec:last-of-type{border-bottom:none}
.shead{display:flex;align-items:baseline;gap:16px;margin:0 0 34px}
.num{font-size:12px;letter-spacing:.24em;color:var(--gold);font-family:var(--serif)}
h2{font-size:24px;font-weight:400;margin:0;letter-spacing:.02em}
h2 small{display:block;font-size:12.5px;color:var(--muted);letter-spacing:.18em;margin-top:6px;font-family:var(--sans)}
h3{font-size:15px;font-weight:400;margin:0 0 6px;letter-spacing:.03em}
h4{font-size:13.5px;font-weight:400;margin:var(--s3) 0 8px;letter-spacing:.06em;color:var(--sub)}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
.sec-intro{color:var(--sub);max-width:62ch;margin:0 0 34px}
.foot-note{font-size:12.5px;color:var(--muted);letter-spacing:.02em}

.rule{height:1px;background:var(--line);border:0;margin:var(--s5) 0}

/* 罗马数字小标题（签名元素：细线一路拉到右边缘） */
.shead-line{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.shead-line .num{flex:none}
.shead-line h2{flex:none}
.shead-line .fill{flex:1;height:1px;background:var(--line)}

/* ---------- 版式工具 ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.photo{width:100%;border:1px solid var(--line)}
.photo-frame{border:1px solid var(--line);padding:0;background:var(--paper)}
.photo-frame img{width:100%}

.stats{display:flex;gap:44px;border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s3);flex-wrap:wrap}
.stat b{display:block;font-size:32px;font-weight:400;font-family:var(--serif);line-height:1.2}
.stat span{font-size:12px;color:var(--muted);letter-spacing:.12em}

ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:11px 0 11px 22px;border-bottom:1px solid var(--line);position:relative;font-size:15px;color:var(--sub)}
ul.clean li:before{content:"";position:absolute;left:0;top:20px;width:8px;height:1px;background:var(--gold)}

ol.steps{list-style:none;counter-reset:st;padding:0;margin:0}
ol.steps li{
  counter-increment:st;position:relative;padding:10px 0 10px 34px;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--sub);
}
ol.steps li:before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:11px;
  font-size:11px;letter-spacing:.14em;color:var(--gold);font-family:var(--serif);
}

/* ---------- 卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:26px}
.card{border:1px solid var(--line);background:var(--paper)}
.card-media{overflow:hidden;border-bottom:1px solid var(--line)}
.card-media img{width:100%;height:280px;object-fit:cover;transition:transform var(--t), opacity var(--t)}
.card-body{padding:18px 20px 22px}
.card p{font-size:13px;color:var(--muted);margin:0 0 10px}
.card .more{font-size:12px;letter-spacing:.14em;color:var(--gold)}
.hoverable{transition:transform var(--t), border-color var(--t)}
.hoverable:hover{transform:translateY(-4px);border-color:var(--gold)}
.hoverable:hover img{transform:scale(1.02)}

.tag{
  display:inline-block;font-size:10.5px;letter-spacing:.18em;color:var(--gold);
  border:1px solid var(--blush);background:var(--blush);padding:3px 9px;margin-bottom:12px;
}
.tag-plain{border-color:var(--line);background:transparent;color:var(--muted)}

/* ---------- 年鉴 / 时间线 ---------- */
.tl{border-top:1px solid var(--line)}
.tl .row{
  display:grid;grid-template-columns:118px 132px 1fr 108px;gap:18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:14.5px;
  transition:color var(--t), border-color var(--t);
}
.tl .row:hover{border-bottom-color:var(--gold)}
.tl .d{font-family:var(--serif);color:var(--gold);font-size:15px}
.tl .c{color:var(--muted);font-size:13px}
.tl .n{text-align:right;font-size:12px;color:var(--muted)}

/* 年份切换 */
.tabs{display:flex;gap:10px;margin-bottom:var(--s3);flex-wrap:wrap}
.tab{
  font:inherit;font-size:12.5px;letter-spacing:.14em;padding:9px 16px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--sub);
  transition:background-color var(--t), color var(--t), border-color var(--t);
}
.tab:hover{border-color:var(--gold);color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}

.year-block[hidden]{display:none}
.year-head{
  display:flex;align-items:baseline;gap:14px;margin:var(--s3) 0 10px;
  font-size:12.5px;letter-spacing:.2em;color:var(--muted);
}
.year-head b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink);letter-spacing:.02em}

/* ---------- 活动卡 ---------- */
.evgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:28px}
.evcard{border:1px solid var(--line);display:flex;flex-direction:column}
.evcard .cover{height:300px;overflow:hidden;border-bottom:1px solid var(--line)}
.evcard .cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--t), opacity var(--t)}
.evcard .cover.is-blank{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;background:var(--paper);
}
.evcard .cover.is-blank b{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--line);line-height:1}
.evcard .cover.is-blank span{font-size:11px;letter-spacing:.24em;color:var(--muted);margin-top:8px}
.evcard .body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.evcard .body p{flex:1}
.evmeta{font-size:11.5px;letter-spacing:.14em;color:var(--muted)}
.evmeta b{color:var(--gold);font-family:var(--serif);font-weight:400;letter-spacing:.06em}

/* ---------- 详情页 ---------- */
.detail-head{border-bottom:1px solid var(--line);padding:var(--s5) 0 var(--s4)}
.detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gallery img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line)}
.gallery .wide{grid-column:1 / -1}
.crumbs{font-size:12px;letter-spacing:.14em;color:var(--muted);margin-bottom:var(--s3)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold)}

/* ---------- 折叠（产品详情） ---------- */
details.acc{border:1px solid var(--line);background:var(--paper)}
details.acc + details.acc{border-top:0}
details.acc summary{
  cursor:pointer;list-style:none;padding:16px 20px;font-size:14px;letter-spacing:.06em;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:color var(--t), background-color var(--t);
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary:hover{color:var(--gold)}
details.acc summary .plus{font-family:var(--sans);color:var(--gold);font-size:15px}
details.acc[open] summary{border-bottom:1px solid var(--line)}
details.acc .acc-body{padding:18px 20px 22px}

/* ---------- 表单 ---------- */
.form{border:1px solid var(--line);padding:var(--s4)}
.field{margin-bottom:22px}
.field label{display:block;font-size:12.5px;letter-spacing:.14em;color:var(--sub);margin-bottom:8px}
.field .hint{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.02em;margin-top:6px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:0;
  padding:12px 14px;min-height:46px;
  transition:border-color var(--t);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.75}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field .err{display:none;font-size:12px;color:#A3341F;margin-top:6px;letter-spacing:.02em}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{border-color:#A3341F}
.field.is-bad .err{display:block}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--sub)}
.check input{width:20px;height:20px;min-height:20px;flex:none;margin-top:2px;accent-color:var(--gold)}
.form-status{
  display:none;margin-top:18px;border:1px solid var(--line);
  border-left:3px solid var(--gold);padding:14px 16px;font-size:14px;color:var(--sub);
}
.form-status.is-on{display:block}

/* ---------- 文章 ---------- */
.artlist{border-top:1px solid var(--line)}
.art{
  display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
.art .thumb{border:1px solid var(--line)}
.art .thumb img{width:100%;height:150px;object-fit:cover;transition:transform var(--t), opacity var(--t)}
.art h3{font-size:19px;margin-bottom:10px}
.art .when{font-size:11.5px;letter-spacing:.16em;color:var(--muted);margin-bottom:10px}
.art p{color:var(--muted);font-size:14px}
.art-body{max-width:70ch}
.art-body p{color:var(--sub)}

/* ---------- 大图查看（原生 dialog，不做动效） ---------- */
dialog.viewer{
  border:1px solid var(--line);background:var(--paper);padding:0;
  max-width:92vw;max-height:92vh;overflow:hidden;
}
dialog.viewer img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
dialog.viewer::backdrop{background:rgba(17,17,17,.62)}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);padding:36px 0 64px;color:var(--muted);font-size:12px;line-height:1.95}
footer b{color:var(--ink);font-weight:400}
footer .frow{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---------- 滚动入场（只作用于首屏以下） ---------- */
.rv,.rv-stagger>*{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(12px);transition:opacity var(--t-slow), transform var(--t-slow)}
.js .rv-stagger>*{opacity:0;transform:translateY(12px);transition:opacity var(--t-slow), transform var(--t-slow)}
.js .rv.is-in,.js .rv-stagger.is-in>*{opacity:1;transform:none}
.js .rv-stagger.is-in>*:nth-child(1){transition-delay:0ms}
.js .rv-stagger.is-in>*:nth-child(2){transition-delay:60ms}
.js .rv-stagger.is-in>*:nth-child(3){transition-delay:120ms}
.js .rv-stagger.is-in>*:nth-child(4){transition-delay:180ms}
.js .rv-stagger.is-in>*:nth-child(5){transition-delay:240ms}
.js .rv-stagger.is-in>*:nth-child(6){transition-delay:300ms}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-txt{padding:52px 0 44px}
  .hero-img{border-left:0;border-top:1px solid var(--line);min-height:460px}
  .split,.split-even,.detail-grid{grid-template-columns:1fr;gap:32px}
  .art{grid-template-columns:1fr;gap:18px}
  .art .thumb img{height:220px}
}

@media (max-width:700px){
  .wrap,.wrap-narrow{padding:0 20px}
  :root{--s6:52px}
  h1{font-size:29px}
  h2{font-size:20px}
  .nav{min-height:64px;gap:16px}
  .menu{gap:20px;margin-right:-20px;padding-right:20px}
  .menu a{padding:14px 0;font-size:13px}
  .tl .row{grid-template-columns:92px 1fr;row-gap:2px;padding:14px 0}
  .tl .n{display:none}
  .tl .c{grid-column:2;text-align:left}
  .gallery{grid-template-columns:1fr}
  .cards,.evgrid{gap:20px}
  .card-media img{height:240px}
  .evcard .cover{height:250px}
  .btn{min-height:48px;padding:0 20px;flex:1;justify-content:center}
  .form{padding:24px 18px}
}

/* ============================================================
   降级：系统「减少动态效果」
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition-property:none;transition-duration:0s}
  .js .rv,.js .rv-stagger>*{
    opacity:1;transform:none;
    transition-property:none;transition-duration:0s;
  }
  .js .rv-stagger.is-in>*{transition-delay:0ms}
  .hoverable:hover,.hoverable:hover img,.card-media img{transform:none;transition-property:none}
  .menu a,.btn,.tab,.tl .row,details.acc summary,.field input,.field select,.field textarea{
    transition-property:none;transition-duration:0s;
  }
  html{scroll-behavior:auto}
}