/* ============================================================
   homepage-hero.css — 首页品牌头图（绿底版）
   2026-10-27 luoyu-content：在 site.css 深绿 hero 之上，只叠加
   品牌行 / 口号行 / 铅笔便签装饰 / 扫码卡，并做文字浅色适配。
   背景与基础配色交回 site.css（#183c34→#78917b 深绿渐变 + 白字）。
   ============================================================ */

/* ---- 顶部品牌行（浅奶白，绿底可读） ---- */
.hero-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font: 700 1.05rem/1 var(--serif);
  letter-spacing: .1em;
  color: #f2ead2;
}
/* 品牌行左侧的六爻标识（与品牌页刊头同构，深绿底上用亮一档的金） */
.hero-mark-icon{
  display: block;
  width: 22px;
  height: 29px;
  flex-shrink: 0;
}
.hero-mark-icon rect{
  fill: #e0b45f;
  transition: fill .18s ease;
}
.hero-brand small{
  font: 700 .62rem/1 var(--sans);
  letter-spacing: .22em;
  color: #c8d2cb;
  margin-left: 4px;
  transform: translateY(1px);
}
/* 品牌名中间的间隔号：橘红点睛（深绿底上用亮一档的橘，保证可读） */
.hero-name i{
  font-style: normal;
  color: #d9a13f;
  font-size: 1.5em;
  line-height: 0;
  padding: 0 .1em;
  margin-right: -.06em;
}
/* 品牌行可点击进入品牌页（brand/） */
a.hero-brand{
  text-decoration: none;
  width: fit-content;
  padding: 6px 0;
  margin-top: -6px;
  margin-bottom: 10px;
  transition: color .18s ease;
}
a.hero-brand:hover{
  color: #f3dcae;
  background-image: linear-gradient(#e3c99f, #e3c99f);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
a.hero-brand:hover .hero-mark-icon rect{
  fill: #f3dcae;
}
a.hero-brand:focus-visible{
  outline: 2px solid #e3c99f;
  outline-offset: 5px;
  border-radius: 3px;
}

/* ---- 大标题金色 span 加淡金下划线点缀（颜色交回 site.css 的 #e4c89f） ---- */
.hero h1 span{
  border-bottom: 5px solid #e4c89f66;
  padding-bottom: 3px;
}

/* ---- 右侧装饰：便签 + 铅笔 + 手写批注（绿底上的浅色便利贴） ---- */
.hero-sketch{
  position: absolute;
  right: max(6vw, 35px);
  top: 58px;
  width: min(330px, 30vw);
  z-index: 1;
  opacity: .92;
  pointer-events: none;
}
.hero-sketch svg{ display: block; width: 100%; height: auto; }

/* ---- 页脚：品牌块 + 二维码（2026-10-27 由 hero 右侧移入，原 .hero-qr 已停用） ---- */
.site-footer{ align-items: center; }
.footer-info{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.footer-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
}
.footer-brand-text strong{
  font: 600 .92rem/1.3 var(--serif);
  letter-spacing: .06em;
  color: var(--green);
}
.footer-brand-text span{
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--muted);
}
/* 二维码：图片本身已含 4 模块安静区（border=4），边框用 content-box 避免吃掉绘制尺寸 */
.footer-qr{
  display: block;
  box-sizing: content-box;
  width: 72px;
  height: 72px;
  padding: 0;
  background: #fff;
  border: 1px solid #d8cdb2;
  border-radius: 3px;
}

/* ---- 响应式 ---- */
@media (max-width: 960px){
  .hero-sketch{ display: none; }
}
@media (max-width: 680px){
  .hero-brand{ margin-bottom: 12px; font-size: .98rem; }
  .hero-inner{ padding-top: 44px; }
  .hero h1 span{ border-bottom-width: 4px; padding-bottom: 2px; }
  .hero .hero-mark{ font-size: 11rem; }
  .site-footer{ align-items: center; }
  .footer-info{ flex-direction: column; gap: 2px; }
  .footer-brand{ gap: 10px; }
  .footer-brand-text{ text-align: left; }
  /* 移动端也保持 72px：低于 60px 解码可靠性下降（实测 54px 是下限） */
  .footer-qr{ width: 72px; height: 72px; }
}