/* ==========================================================================
   news_creamluxe — 奶油轻奢米金风
   小旋风蜘蛛池Pro2.96 CMS 静态皮肤样式表
   class 前缀: crl-
   ========================================================================== */

:root{
  --crl-cream:#faf6ef;
  --crl-cream-2:#f4ecdf;
  --crl-cream-3:#efe4d0;
  --crl-gold:#c9a55c;
  --crl-gold-soft:#e4cd9d;
  --crl-gold-deep:#a9813f;
  --crl-line:#ddc793;
  --crl-line-soft:#ece0c4;
  --crl-coffee:#3d332a;
  --crl-coffee-soft:#6b5d4f;
  --crl-coffee-faint:#948572;
  --crl-white:#ffffff;
  --crl-radius:2px;
  --crl-maxw:1200px;
  --crl-gap:28px;
}

*{ box-sizing:border-box; }

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

body.crl-body{
  margin:0;
  padding:0;
  background:var(--crl-cream);
  color:var(--crl-coffee);
  font-family:"Optima","Georgia","Noto Serif SC","PingFang SC","Microsoft YaHei",serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
  transition:color .25s ease, letter-spacing .25s ease, opacity .25s ease;
}

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

ul, ol, dl{ margin:0; padding:0; list-style:none; }

dt, dd{ margin:0; }

h1, h2, h3, p{ margin:0; }

.crl-visually-hidden{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.crl-shell{
  max-width:var(--crl-maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- 顶部细线色带 ---------- */

.crl-ribbon{
  padding:8px 0;
  text-align:center;
}

.crl-ribbon__text{
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--crl-gold-deep);
}

/* ---------- 分隔细线 ---------- */

.crl-hairline{
  height:1px;
  background:var(--crl-line);
  margin:18px 0;
  border:0;
}

.crl-hairline--soft{
  background:var(--crl-line-soft);
}

/* ---------- 顶部品牌与导航 ---------- */

.crl-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:18px 0;
}

.crl-brand{
  flex-shrink:0;
  display:inline-block;
}

.crl-brand img{
  height:44px;
  width:auto;
}

.crl-navtoggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px;
  height:34px;
  background:transparent;
  border:1px solid var(--crl-line);
  border-radius:var(--crl-radius);
  cursor:pointer;
  padding:0 7px;
}

.crl-navtoggle span{
  display:block;
  height:1px;
  background:var(--crl-coffee);
}

.crl-nav{
  flex:1;
  min-width:0;
}

.crl-nav__list{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:2px;
}

.crl-nav__item{ display:inline-block; }

.crl-nav__link{
  display:inline-block;
  padding:8px 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--crl-coffee-soft);
}

.crl-nav__link:hover{
  color:var(--crl-gold-deep);
  letter-spacing:.28em;
}

/* ---------- 主体布局：右侧栏 ---------- */

.crl-main{ padding:32px 0 56px; }

.crl-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:56px;
  align-items:start;
}

.crl-content{ min-width:0; }

/* ---------- 首页大图文横幅（一大） ---------- */

.crl-hero{
  padding:40px 0 8px;
}

.crl-hero__kicker{
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--crl-gold-deep);
  margin-bottom:18px;
}

.crl-hero__title{
  font-size:40px;
  line-height:1.28;
  font-weight:600;
  color:var(--crl-coffee);
  /* 渐变文字：先兜底色，再叠加渐变，避免不支持 background-clip 时文字消失 */
  background:linear-gradient(100deg, var(--crl-coffee) 0%, var(--crl-gold-deep) 55%, var(--crl-gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.crl-hero__title a{
  color:inherit;
}

.crl-hero__title a:hover{
  opacity:.78;
}

.crl-hero__info{
  margin-top:20px;
  font-size:16px;
  color:var(--crl-coffee-soft);
  max-width:640px;
}

.crl-hero__meta{
  margin-top:18px;
  font-size:13px;
  color:var(--crl-coffee-faint);
  letter-spacing:.02em;
}

.crl-hero__dot{ margin:0 8px; color:var(--crl-gold-soft); }

.crl-hero__more{
  display:inline-block;
  margin-top:24px;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--crl-gold-deep);
  border-bottom:1px solid var(--crl-gold);
  padding-bottom:3px;
}

.crl-hero__more:hover{
  color:var(--crl-coffee);
  border-color:var(--crl-coffee);
  letter-spacing:.28em;
}

/* ---------- 标题小节 ---------- */

.crl-section-title{
  font-size:13px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--crl-coffee-soft);
  margin:36px 0 22px;
  padding-bottom:12px;
  border-bottom:1px solid var(--crl-line);
}

/* ---------- 首页“多小”卡片网格：2 列杂志式 ---------- */

.crl-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:var(--crl-gap) 40px;
}

.crl-card{
  padding-top:22px;
  border-top:1px solid var(--crl-line-soft);
}

.crl-card__title{
  font-size:19px;
  line-height:1.42;
  font-weight:600;
  margin-bottom:10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.crl-card__title a:hover{
  color:var(--crl-gold-deep);
}

.crl-card__info{
  font-size:14px;
  color:var(--crl-coffee-soft);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:12px;
}

.crl-card__meta{
  font-size:12px;
  color:var(--crl-coffee-faint);
  display:flex;
  align-items:center;
  gap:6px;
}

.crl-card__meta-sep{ color:var(--crl-gold-soft); }

.crl-grid--related{
  grid-template-columns:repeat(2, minmax(260px, 1fr));
}

/* ---------- 分类速览：胶囊式细线标签 ---------- */

.crl-catgrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.crl-catgrid__item a{
  display:inline-block;
  padding:8px 18px;
  font-size:13px;
  letter-spacing:.06em;
  border:1px solid var(--crl-gold-soft);
  border-radius:999px;
  color:var(--crl-coffee-soft);
}

.crl-catgrid__item a:hover{
  border-color:var(--crl-gold-deep);
  color:var(--crl-gold-deep);
}

/* ---------- 面包屑（flex:1 + 省略号 + min-width:0 组合） ---------- */

.crl-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--crl-coffee-faint);
  padding:20px 0 6px;
  flex-wrap:nowrap;
}

.crl-breadcrumb__current{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--crl-coffee-soft);
}

.crl-breadcrumb__sep{ color:var(--crl-gold-soft); }

.crl-breadcrumb a:hover{ color:var(--crl-gold-deep); }

.crl-list-title{
  font-size:28px;
  font-weight:600;
  margin:6px 0 18px;
}

/* ---------- 列表页：条纹式细线列表 ---------- */

.crl-list__item{
  padding:24px 0;
  border-bottom:1px solid var(--crl-line-soft);
}

.crl-list__item:first-child{ padding-top:8px; }

.crl-list__title{
  font-size:20px;
  font-weight:600;
  line-height:1.4;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.crl-list__title a:hover{ color:var(--crl-gold-deep); }

.crl-list__info{
  font-size:14px;
  color:var(--crl-coffee-soft);
  margin-bottom:10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.crl-list__meta{
  font-size:12px;
  color:var(--crl-coffee-faint);
  display:flex;
  gap:6px;
}

.crl-list__meta-sep{ color:var(--crl-gold-soft); }

/* ---------- 分页 ---------- */

.crl-pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  padding:28px 0 6px;
}

.crl-pagination a{
  display:inline-block;
  min-width:36px;
  text-align:center;
  padding:8px 12px;
  font-size:13px;
  border:1px solid var(--crl-line);
  color:var(--crl-coffee-soft);
}

.crl-pagination a:hover{
  border-color:var(--crl-gold-deep);
  color:var(--crl-gold-deep);
}

/* ---------- 文章正文页 ---------- */

.crl-article__head{ padding:12px 0 4px; }

.crl-article__cate{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--crl-gold-deep);
  margin-bottom:16px;
}

.crl-article__title{
  font-size:32px;
  line-height:1.4;
  font-weight:600;
  color:var(--crl-coffee);
}

.crl-article__meta{
  margin-top:14px;
  font-size:13px;
  color:var(--crl-coffee-faint);
}

.crl-article__body{
  padding:8px 0 4px;
  font-size:16px;
  line-height:1.95;
  color:var(--crl-coffee);
}

.crl-article__body img{
  margin:20px auto;
  border:1px solid var(--crl-line-soft);
}

.crl-article__body p{ margin-bottom:18px; }

/* ---------- 上一篇 / 下一篇 ---------- */

.crl-artnav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding:8px 0;
}

.crl-artnav__prev,
.crl-artnav__next{
  min-width:0;
  padding:16px 20px;
  border:1px solid var(--crl-line-soft);
}

.crl-artnav__next{ text-align:right; }

.crl-artnav__label{
  display:block;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--crl-gold-deep);
  margin-bottom:8px;
}

.crl-artnav a{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  color:var(--crl-coffee-soft);
}

.crl-artnav a:hover{ color:var(--crl-gold-deep); }

/* ---------- 右侧栏：无卡片阴影，细线分隔 ---------- */

.crl-side{ min-width:0; }

.crl-side__block{ padding:4px 0 20px; }

.crl-side__title{
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--crl-coffee-faint);
  margin-bottom:16px;
}

.crl-side__deflist dt{
  padding:9px 0;
  border-bottom:1px dashed var(--crl-line-soft);
  font-size:14px;
}

.crl-side__deflist dt:last-child{ border-bottom:0; }

.crl-side__deflist a{ color:var(--crl-coffee-soft); }

.crl-side__deflist a:hover{ color:var(--crl-gold-deep); }

.crl-side__ranklist li{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 0;
  border-bottom:1px dashed var(--crl-line-soft);
}

.crl-side__ranklist li:last-child{ border-bottom:0; }

.crl-side__ranklist a{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  color:var(--crl-coffee);
}

.crl-side__ranklist a:hover{ color:var(--crl-gold-deep); }

.crl-side__rankmeta{
  flex-shrink:0;
  font-size:11px;
  color:var(--crl-coffee-faint);
}

.crl-side__plainlist li{ padding:7px 0; }

.crl-side__plainlist a{
  font-size:13px;
  color:var(--crl-coffee-soft);
}

.crl-side__plainlist a:hover{ color:var(--crl-gold-deep); }

/* ---------- 页脚 ---------- */

.crl-footer{ padding:48px 0 24px; }

.crl-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
}

.crl-footer__logo{ height:36px; margin-bottom:14px; }

.crl-footer__desc{
  font-size:13px;
  color:var(--crl-coffee-faint);
  max-width:280px;
}

.crl-footer__title{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--crl-coffee-faint);
  margin-bottom:16px;
}

.crl-footer__deflist dt{ padding:6px 0; font-size:13px; }

.crl-footer__deflist a{ color:var(--crl-coffee-soft); }

.crl-footer__deflist a:hover{ color:var(--crl-gold-deep); }

.crl-footer__links li{ padding:6px 0; }

.crl-footer__links a{
  font-size:13px;
  color:var(--crl-coffee-soft);
}

.crl-footer__links a:hover{ color:var(--crl-gold-deep); }

.crl-footer__base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  padding-top:18px;
  font-size:12px;
  color:var(--crl-coffee-faint);
}

.crl-footer__copy{ flex-shrink:0; }

.crl-footer__beian a{ color:var(--crl-coffee-faint); }

.crl-footer__beian a:hover{ color:var(--crl-gold-deep); }

/* ==========================================================================
   响应式断点：~1024px / ~768px / ~480px
   ========================================================================== */

@media (max-width:1024px){

  .crl-layout{
    grid-template-columns:1fr 260px;
    gap:36px;
  }

  .crl-hero__title{ font-size:34px; }

  .crl-footer__grid{
    grid-template-columns:1.2fr 1fr 1fr;
  }

  .crl-footer__col--brand{ grid-column:1 / -1; }
}

@media (max-width:768px){

  .crl-navtoggle{ display:flex; }

  .crl-nav{
    flex-basis:100%;
    order:3;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }

  .crl-nav.is-open{ max-height:600px; }

  .crl-nav__list{
    flex-direction:column;
    align-items:flex-start;
    padding:12px 0 6px;
  }

  .crl-topbar{ flex-wrap:wrap; }

  .crl-layout{
    grid-template-columns:1fr;
  }

  .crl-side{
    border-top:1px solid var(--crl-line);
    padding-top:24px;
    margin-top:12px;
  }

  .crl-grid,
  .crl-grid--related{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
  }

  .crl-hero__title{ font-size:28px; }

  .crl-artnav{ grid-template-columns:1fr; }

  .crl-artnav__next{ text-align:left; }

  .crl-footer__grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:480px){

  .crl-shell{ padding:0 16px; }

  .crl-hero__title{ font-size:23px; }

  .crl-hero__info{ font-size:14px; }

  .crl-grid,
  .crl-grid--related{
    grid-template-columns:1fr;
  }

  .crl-catgrid{ gap:8px; }

  .crl-footer__grid{
    grid-template-columns:1fr;
  }

  .crl-article__title{ font-size:24px; }

  .crl-list-title{ font-size:22px; }
}