/* ============ 海南以礼文化传媒有限公司 · 设计令牌与基础样式 ============ */
:root{
  --ink:#0E0E0F;          /* 主深色背景 */
  --ink-2:#141415;        /* 深色卡片 */
  --ink-3:#232325;        /* 深色描边 */
  --cream:#F7F5F1;        /* 浅色区块背景（暖白） */
  --cream-2:#EAE5DD;      /* 浅色描边/装饰 */
  --gold:#C9A97C;         /* 金色主强调 */
  --gold-d:#B08D5B;       /* 金色深 */
  --eyebrow:#9B8A72;      /* 小标英文（浅底） */
  --tx-dark:#17171A;
  --tx-mid:#6E6A65;
  --tx-light:#FFFFFF;
  --tx-dim:rgba(255,255,255,.60);
  --tx-dim-2:rgba(255,255,255,.40);
  --line-d:rgba(255,255,255,.11);
  --line-l:rgba(23,23,26,.09);

  --f-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --f-en:"Optima","Didot","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-num:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"PingFang SC",sans-serif;
  --f-serif:"Songti SC","Source Han Serif SC","Noto Serif SC","STSong",Georgia,serif;

  --wrap:1280px;
  --pad:40px;
  --section-y:92px;
  --section-y-sm:66px;
  --fs-hero:clamp(40px,5.9vw,84px);
  --fs-page-hero:clamp(30px,3.6vw,44px);
  --fs-section:34px;
  --r:3px;
  --r-card:14px;
  --shadow-rest:0 8px 24px rgba(23,20,16,.05);
  --shadow-lift:0 24px 54px rgba(23,20,16,.13);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f-sans);background:var(--cream);color:var(--tx-dark);
  font-size:15px;line-height:1.75;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,video,iframe{max-width:100%;display:block;border:0}
img{height:auto}
svg{max-width:100%}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease),opacity .3s var(--ease)}
/* 触屏点按不出现系统默认灰色高亮，反馈交给 :active 样式 */
a,button,input,textarea,select,label{-webkit-tap-highlight-color:transparent}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.3;letter-spacing:.01em}
p{margin:0}
button,input,textarea,select{max-width:100%;font:inherit;color:inherit}
::selection{background:var(--gold);color:#fff}

/* ---------- 布局工具 ---------- */
.wrap{
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));
  padding-right:max(var(--pad),env(safe-area-inset-right,0px));
}
.wrap-n{max-width:1000px}
.sec{padding:var(--section-y) 0}
.sec-sm{padding:var(--section-y-sm) 0}
.sec.first{padding-top:150px}   /* 无 Banner 的浅色页，避让固定页头 */
.dark{background:var(--ink);color:var(--tx-light)}
.dark p{color:var(--tx-dim)}
.light{
  background:
    radial-gradient(72% 46% at 88% 0%,rgba(201,169,124,.075) 0%,rgba(201,169,124,0) 62%),
    radial-gradient(56% 40% at 4% 100%,rgba(176,141,91,.05) 0%,rgba(176,141,91,0) 58%),
    var(--cream);
  color:var(--tx-dark);
}
.white{background:#fff}
.center{text-align:center}
.grid{display:grid;gap:22px}
.grid>*,.g2>*,.g3>*,.g4>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt-s{margin-top:16px}.mt-m{margin-top:32px}.mt-l{margin-top:52px}.mt-xl{margin-top:78px}

/* ---------- 标题组 ---------- */
.eyebrow{
  font-family:var(--f-en);font-size:11.5px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--eyebrow);margin-bottom:18px;font-weight:500;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";flex:none;width:26px;height:1px;background:var(--gold);opacity:.85}
.center .eyebrow{justify-content:center}
.dark .eyebrow{color:rgba(255,255,255,.42)}
.dark .eyebrow::before{background:rgba(201,169,124,.7)}
.sec-title{font-size:var(--fs-section);letter-spacing:.04em;font-weight:600}
.sec-sub{margin-top:15px;font-size:14px;color:var(--tx-mid);letter-spacing:.05em}
.dark .sec-sub{color:var(--tx-dim)}
.rule{display:block;width:32px;height:1px;background:var(--gold);margin:20px auto 0}
.rule.left{margin-left:0}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;font-size:13.5px;letter-spacing:.12em;border:1px solid transparent;
  border-radius:var(--r);cursor:pointer;transition:all .35s var(--ease);white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#1A1512;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.30);color:var(--tx-light);background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--gold);border-color:var(--gold);color:#1A1512}
.btn-line{border-color:rgba(23,23,26,.28);color:var(--tx-dark)}
.btn-line:hover{background:var(--tx-dark);color:#fff;border-color:var(--tx-dark)}
.btn-white{background:#fff;color:var(--tx-dark);border-color:#fff}
.btn-white:hover{background:var(--tx-dark);color:#fff;border-color:var(--tx-dark)}
.btn-block{width:100%}
.link-more{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.09em;color:var(--tx-dark);
}
.link-more i{width:15px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.link-more:hover{color:var(--gold)}
.link-more:hover i{width:25px}
.dark .link-more{color:var(--tx-dim)}

/* ---------- 图片占位（素材未上传时优雅降级） ---------- */
.media{
  display:block;position:relative;width:100%;min-width:0;overflow:hidden;background:
    linear-gradient(135deg,#1C1C1E 0%,#2A2A2C 46%,#131314 100%);
}
.media::after{
  content:attr(data-ph);position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;
  font-family:var(--f-en);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.28);
}
.media>img,.media>video{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;transition:transform 1.1s var(--ease);
}
.media.tall{aspect-ratio:3/4}
.media.sq{aspect-ratio:1/1}
.media.wide{aspect-ratio:16/9}
.media.port{aspect-ratio:4/5}
.media.land{aspect-ratio:3/2}
.zoom:hover .media>img{transform:scale(1.05)}

/* ---------- 入场动画 ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}