/* ============================================================
   品牌覆盖层 —— Story (HTML5 UP, CCA 3.0) × 艺丰服饰
   叠加在 assets/tpl/main.css 之上，只做品牌化与补充组件
   ============================================================ */
:root{
  --brand:#1B3A4B; --brass:#9C7B4E; --ink:#17150F; --ink2:#3C3830;
  --muted:#6E6A60; --line:#E3DFD6; --paper:#FBFAF7; --paper2:#F4F1EA;
}

/* ---------- 顶部导航（Story 原版无导航，多页站补齐） ---------- */
.topnav{position:sticky;top:0;z-index:10005;display:flex;align-items:center;gap:20px;
padding:0 32px;min-height:64px;background:rgba(251,250,247,.94);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topnav .brand{font-weight:600;color:var(--ink);font-size:16px;white-space:nowrap;line-height:1.35;margin:0}
.topnav .brand small{display:block;font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.02em}
.topnav nav{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.topnav nav::-webkit-scrollbar{display:none}
.topnav nav a{padding:8px 13px;color:var(--ink2);font-size:14px;border-radius:4px;white-space:nowrap}
.topnav nav a:hover{background:var(--paper2);color:var(--brand);text-decoration:none}
.topnav .tel{margin-left:12px;font-size:13px;font-weight:600;color:var(--brand);
border:1px solid var(--line);border-radius:999px;padding:7px 15px;white-space:nowrap}
.topnav .tel:hover{border-color:var(--brass);color:var(--brass);text-decoration:none}
@media(max-width:900px){.topnav .tel{display:none}.topnav{padding:0 18px}}

/* ---------- Banner 文案补充 ---------- */
.banner .content p.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--brass);margin:0 0 1.2em}
.banner .content p.factline{font-size:.85rem;color:var(--muted);margin:1.6em 0 0;letter-spacing:.02em}
.banner .content h1,.spotlight .content h2{letter-spacing:-.02em;color:var(--ink)}

/* ---------- 文章 / 栏目正文 ---------- */
#prose{max-width:780px;margin:0 auto;padding:56px 32px 72px;background:var(--paper)}
#prose .crumb{font-size:.8rem;margin:0 0 20px}
#prose .crumb a{color:var(--muted)}
#prose h1{font-size:clamp(24px,3vw,32px);line-height:1.32;margin:0 0 .5em;color:var(--ink)}
#prose .meta{font-size:.8rem;color:var(--muted);margin:0 0 2.2em;padding-bottom:1.2em;
border-bottom:1px solid var(--line)}
#prose h2{font-size:1.3rem;margin:2.4em 0 .8em;padding-left:.6em;border-left:3px solid var(--brass);line-height:1.5}
#prose h3{font-size:1.05rem;margin:1.8em 0 .6em}
#prose p,#prose li{line-height:1.9;color:var(--ink2)}
#prose ul,#prose ol{padding-left:1.4em}
#prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.9rem;display:block;overflow-x:auto}
#prose th,#prose td{border-bottom:1px solid var(--line);padding:10px 13px;text-align:left}
#prose th{background:var(--paper2);font-weight:600;white-space:nowrap}
#prose blockquote{margin:1.5em 0;padding:14px 20px;background:#F6F0E6;border-left:3px solid var(--brass);color:var(--ink2)}
#prose img{max-width:100%;height:auto;border-radius:6px;display:block;margin:.6em 0 1em}
#prose figure{margin:0 0 1.6em}
#prose figcaption{font-size:.82rem;color:var(--muted);margin-top:8px}
#prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* ---------- 栏目卡片网格 ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));text-align:left;margin:0}
.grid.single{grid-template-columns:1fr}
.grid.duo{grid-template-columns:repeat(2,1fr)}
@media(max-width:680px){.grid,.grid.duo{grid-template-columns:1fr}}
.card{display:block;border:1px solid var(--line);border-radius:6px;padding:22px 24px;background:#fff;
color:inherit;transition:all .25s ease}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.07);transform:translateY(-2px);text-decoration:none;color:inherit}
.card h3{font-size:1rem;margin:0 0 8px;color:var(--ink)}
.card:hover h3{color:var(--brand)}
.card p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.7}
.card .more{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--brass);letter-spacing:.05em}

/* ---------- 内容导航清单（首页） ---------- */
.navlist{max-width:860px;margin:2.5em auto 0;border-top:1px solid var(--line);text-align:left}
.navlist a{display:flex;align-items:center;gap:22px;padding:20px 0;border-bottom:1px solid var(--line);color:inherit}
.navlist a:hover{color:inherit}
.navlist .count{flex:0 0 auto;min-width:52px;text-align:center;font-size:.75rem;color:var(--muted);
border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.navlist .nl-main{flex:1;min-width:0}
.navlist .nl-title{display:block;font-size:1.05rem;font-weight:600;color:var(--ink)}
.navlist a:hover .nl-title{color:var(--brand)}
.navlist .nl-blurb{display:block;font-size:.85rem;color:var(--muted);margin-top:2px}
.navlist .nl-arrow{font-size:1.05rem;color:#C9C3B5;transition:all .25s ease}
.navlist a:hover .nl-arrow{color:var(--brass);transform:translateX(5px)}
@media(max-width:640px){.navlist a{gap:14px}.navlist .nl-blurb{display:none}}

/* ---------- 联系页 NAP 列表 ---------- */
.nap-list{margin:1.5em 0 0;border-top:1px solid var(--line)}
.nap-row{display:grid;grid-template-columns:9.5em 1fr;gap:4px 18px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.nap-row dt{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.03em}
.nap-row dd{margin:0;font-size:15px;color:var(--ink);line-height:1.6;word-break:break-all}
@media(max-width:560px){.nap-row{grid-template-columns:1fr;gap:2px}.nap-row dd{font-size:14.5px}}

/* ---------- FAQ 折叠 ---------- */
.faq-list{max-width:780px;margin:2.5em auto 0;text-align:left}
.faq-list details{border-bottom:1px solid var(--line);padding:0}
.faq-list summary{cursor:pointer;font-weight:600;font-size:.98rem;list-style:none;
display:flex;gap:14px;align-items:flex-start;padding:16px 0;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:"";flex:0 0 7px;height:7px;margin-top:8px;border-radius:50%;background:var(--brass)}
.faq-list summary::after{content:"+";margin-left:auto;color:var(--muted);transition:transform .25s ease}
.faq-list details[open] summary::after{transform:rotate(45deg);color:var(--brass)}
.faq-list details p{margin:0;padding:0 0 18px 21px;color:var(--muted);font-size:.9rem;line-height:1.8}

/* ---------- 产品跑马灯 ---------- */
.marquee{overflow:hidden;position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:24px 0;margin:3.5em 0 0}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(to right,#FBFAF7,rgba(251,250,247,0))}
.marquee::after{right:0;background:linear-gradient(to left,#FBFAF7,rgba(251,250,247,0))}
.marquee-track{display:flex;width:max-content;animation:mq 44s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;gap:14px;padding-right:14px}
.marquee-item{flex:0 0 auto;width:220px;display:block;color:inherit}
.marquee-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:4px;
border:1px solid var(--line);background:var(--paper2)}
.marquee-cap{display:block;padding:8px 2px 0;font-size:12px;color:var(--muted)}
.marquee-item:hover .marquee-cap{color:var(--brand)}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.6);padding:44px 32px 36px;font-size:.85rem}
.site-footer .fin{max-width:62rem;margin:0 auto;display:flex;justify-content:space-between;
gap:20px;flex-wrap:wrap;align-items:flex-end}
.site-footer p{margin:0 0 6px;line-height:1.8}
.site-footer a{color:rgba(255,255,255,.6)}
.site-footer a:hover{color:#fff;text-decoration:none}
.site-footer strong{color:#fff}
.site-footer .fb{width:100%;font-size:.75rem;color:rgba(255,255,255,.35);margin-top:16px;
padding-top:14px;border-top:1px solid rgba(255,255,255,.12);display:flex;
justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.site-footer .fb p{margin:0}
/* ---------- 全局缩放（Story 默认 18pt 过大，整体下调一档） ---------- */
html{font-size:13pt}
@media screen and (max-width:1680px){html{font-size:12pt}}
@media screen and (max-width:1280px){html{font-size:11.5pt}}
@media screen and (max-width:980px){html{font-size:11pt}}
@media screen and (max-width:736px){html{font-size:10.5pt}}
@media screen and (max-width:480px){html{font-size:10pt}}

/* ---------- 垂直节奏收紧（Story 默认 7rem/5rem 太空） ---------- */
.wrapper.style1 > .inner{padding:3.25rem 3rem 2.75rem 3rem}
.spotlight > .content{padding:3rem 3.5rem}
ul.actions.stacked li{padding:.45rem 0 0 0}
.banner .content h1{margin-bottom:.5em}
.banner .content p.major{margin-bottom:1.1em}
.banner .content p.factline{margin-top:1em}
#prose{padding-top:40px}

/* Banner：文 2/3 / 图 1/3 —— 关键修正 content 的 max-width/margin:auto，否则与图错位 */
/* Hero：复用全站 wrapper.style1 > .inner 容器，保证与下方区块左右边界完全一致；
   内部再用 grid 分栏（Story 原生 .banner 是 flex，与 .inner 宽度体系不兼容）。 */
.hero-band .inner{max-width:64rem}
.banner-grid{display:grid;grid-template-columns:1fr 33%;gap:2.5rem;align-items:center;text-align:left}
.banner-grid .content{max-width:none;margin:0;padding:0;min-width:0}
/* Story 的 .actions.stacked 是 flex-direction:column（竖排），Hero 里改为横排 */
.banner-grid .content ul.actions.stacked{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;margin:0}
.banner-grid .content ul.actions.stacked li{padding:0}
.banner-grid .content .button{font-size:13.5px;padding:.6em 1.25em}
/* Hero 文本段落不应带任何装饰线（Story 的 a{text-decoration:underline} 会传播到块级后代） */
.banner-grid .content p,.banner-grid .content h1,.banner-grid .content li{text-decoration:none}
.banner-grid .image{margin:0;align-self:center}
.banner-grid .image img{width:100%;height:240px;object-fit:cover;border-radius:4px;
  box-shadow:var(--sh-1);animation:fadeUp .7s var(--ease) both}
.banner-grid .content>*{animation:fadeUp .7s var(--ease) both}
.banner-grid .content>*:nth-child(2){animation-delay:.06s}
.banner-grid .content>*:nth-child(3){animation-delay:.12s}
.banner-grid .content>*:nth-child(4){animation-delay:.18s}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .banner-grid{grid-template-columns:1fr;gap:1.5rem}
  .banner-grid .image img{height:200px}
}
.banner.style1 .image img{width:100%;height:240px;object-fit:cover;border-radius:4px}
.banner .content h1{font-size:clamp(23px,2.2vw,30px);line-height:1.32;margin:0 0 .6em;letter-spacing:-.02em}
.banner .content p.eyebrow{font-size:10.5px;letter-spacing:.18em;margin:0 0 .8em}
.banner .content p.major{font-size:14px;line-height:1.85;margin:0 0 1.25em;max-width:34em}
.banner .content p.factline{font-size:12.5px;color:var(--muted-2);margin-top:1.25em}
.banner .content ul.actions.stacked{display:flex;flex-wrap:wrap;gap:.55rem;margin:0}
.banner .content ul.actions.stacked li{padding:0}
.banner .content .button{font-size:13.5px;padding:.6em 1.25em}

/* Spotlight 图片减半 */
.spotlight .image img{max-height:300px;object-fit:cover;width:100%;border-radius:6px}

/* 工厂图减半 */
.factory-media img{max-height:240px}

/* 跑马灯图片再收一档 */
.marquee-item{width:150px}

/* 顶部导航微收 */
.topnav{min-height:58px}
.topnav .brand{font-size:15px}

/* ---------- 链接下划线：全站统一去除 ----------
   Story 全局 a{text-decoration:underline}，且 text-decoration 会从祖先 a 传播到块级后代，
   因此用 !important 一刀切干净，避免漏网（导航/清单/卡片/页脚/正文全部不显示下划线）。
   可识别性改由颜色与字重承担：正文链接用品牌色 + 500 字重，悬停转黄铜色。 */
a,a:hover,a:focus,a:active,a:visited{text-decoration:none !important}

/* 正文链接的可识别性：颜色 + 字重 + 悬停反馈 */
#prose a{color:var(--brand);font-weight:500}
#prose a:hover{color:var(--brass)}

/* 悬停反馈统一改为颜色/背景变化，不再借用下划线 */
.navlist a:hover .nl-title,.card:hover h3,.topnav nav a:hover{color:var(--brand)}
.marquee-item:hover .marquee-cap{color:var(--brand)}

@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}