/* =============================================================
老济南四合院 · 组件库样式（朱红印章 + 金色点缀主题）
依赖 design-tokens.css
============================================================= */
* { box-sizing: border-box; }
figure { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-ink);
background-color: var(--color-paper);
background-image:
linear-gradient(rgba(250,247,240,.4), rgba(250,247,240,.4)),
url('../img/banner-shanshui.png');
background-size: auto, 100% auto;
background-repeat: no-repeat, repeat-y;
background-position: top left, top left;
}
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--sp-4); color: var(--color-stone); }
a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-strong); }
/* ---------- 布局容器 ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); }
.section { padding: var(--sp-8) 0 var(--sp-16); }
.section--tight { padding: var(--sp-10) 0; }
#court { padding-top: var(--sp-3); padding-bottom: var(--sp-26); }
#news { padding-top: var(--sp-26); }
/* ---------- 主导航（深墨底 + 金色文字） ---------- */
.nav { background-color: rgba(255, 255, 255, 0.25); position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid rgba(0, 0, 0, .06); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
/* 内页导航吸顶：首页（page--home）保持 fixed 浮于 hero 之上；
其余内页改用 sticky 吸顶——平时作为 banner 上方的独立横条，滚动时固定在顶部，
既吸顶又不像 fixed 那样初始就覆盖 banner（fixed 会从文档流脱离导致 banner 上移重叠） */
body:not(.page--home) .nav { position: sticky; top: 0; }
.nav .container { display: flex; align-items: center; gap: var(--sp-6); height: 72px; }
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 44px; width: auto; display: block; }
.nav__menu { display: flex; gap: var(--sp-1); margin-left: auto; list-style: none; padding: 0; align-items: center; }
.nav__menu a { color: #fff; padding: var(--sp-2) var(--sp-3); border-radius: 0; font-size: var(--fs-sm); transition: all var(--duration-fast); letter-spacing: 1px; }
.nav__menu a:hover, .nav__menu a.is-active { color: var(--color-accent); background: transparent; }
.nav__menu a.is-new { color: var(--color-accent); }
.nav__cta { background: var(--color-brand); color: #fff !important; padding: var(--sp-2) var(--sp-5) !important; border-radius: 0 !important; font-weight: var(--fw-medium); border: 1px solid rgba(200,155,60,.45); }
.nav__cta:hover { background: var(--color-brand-strong) !important; color: var(--color-accent) !important; }
.nav__toggle { display: none; background: transparent; border: 1px solid rgba(245,240,232,.25); border-radius: 0; color: #fff; width: 42px; height: 42px; cursor: pointer; margin-left: auto; }
/* 汉堡图标：三道杠 SVG，stroke 随 currentColor（桌面白 / 移动端深墨），绝对居中、比原 ☰ 更粗更醒目 */
.nav__bars { display: block; width: 22px; height: 22px; }
.nav__bars line { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* 导航二级下拉（关于我们） */
.nav__menu > li { position: relative; }
.nav__menu > li.has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; } /* 透明 hover 桥，防间隙闪烁 */
.nav__dropdown {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
min-width: 148px; list-style: none; margin: 0; padding: var(--sp-2) 0;
background: var(--color-dark); border: 1px solid rgba(200,155,60,.35); border-top: 2px solid var(--color-accent);
box-shadow: 0 14px 30px rgba(0,0,0,.4);
opacity: 0; visibility: hidden; transition: all var(--duration-fast); z-index: 60;
}
.nav__menu > li:hover > .nav__dropdown, .nav__menu > li:focus-within > .nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__dropdown a { display: block; padding: var(--sp-2) var(--sp-4); text-align: center; white-space: nowrap; color: rgba(245,240,232,.75); }
.nav__dropdown a:hover { color: var(--color-accent); background: rgba(200,155,60,.08); }
/* ---------- 按钮 ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium);
padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-full);
border: 1px solid transparent; cursor: pointer; transition: all var(--duration-fast); user-select: none;
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn--primary { background: var(--color-brand); color: #fff; }
/* 覆盖全局 a:hover 的品牌色，避免 hover 时字色与背景同色看不见 */
.btn--primary:hover,
a.btn--primary:hover { background: var(--color-brand-strong); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--color-accent); color: #1a1200; }
.btn--accent:hover { background: var(--color-accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn--ghost:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.1); }
.btn--text { background: transparent; color: var(--color-brand); padding: var(--sp-2) var(--sp-3); }
.btn--text:hover { color: var(--color-accent-strong); }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-md); }
.btn:disabled { opacity: .55; pointer-events: none; }
/* ---------- 徽章 / 标签 ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 4px 10px; border-radius: var(--radius-full); }
.badge--industry { background: var(--color-warm-soft); color: var(--color-warm); }
.badge--company { background: var(--color-brand-soft); color: var(--color-brand); }
.badge--cctv { background: #1a1200; color: var(--color-accent); border: 1px solid rgba(200,155,60,.4); }
.badge--gold { background: var(--color-accent-soft); color: var(--color-accent-strong); }
/* ---------- 卡片 ---------- */
.card { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--duration); }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--color-accent-soft); }
.card__body { padding: var(--sp-5); }
.card__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card__meta { font-size: var(--fs-xs); color: var(--color-stone-light); }
/* 招牌菜品标题区：标题在左，笔刷背景按钮在右 */
.dishes-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); }
.dishes-header__title h2 { margin-bottom: 0; }
.btn--more {
display: inline-flex; align-items: flex-start; justify-content: center;
min-width: 160px; min-height: 52px; padding: 12px var(--sp-6) 0 var(--sp-6);
font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 700;
color: #fff; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(18,18,18,.35);
background-image: url('../img/huaban-3859086710.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
border: none; transition: all var(--duration-fast);
}
.btn--more:hover { transform: translateY(-2px); filter: brightness(1.08); }
/* 招牌菜品网格：中间大，左右各二 */
.dishes-grid { display: grid; grid-template-columns: 1fr 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-8); align-items: stretch; }
.dish-card { border: 1px solid var(--color-line); background: var(--color-paper-2); display: flex; flex-direction: column; overflow: hidden; transition: all var(--duration); }
.dish-card:hover { border-color: var(--color-accent-soft); box-shadow: var(--shadow-md); }
.dish-card__thumb { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--color-dark-surface) 0%, var(--color-brand-strong) 100%); }
.dish-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.dish-card:hover .dish-card__thumb img { transform: scale(1.06); }
.dish-card__thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(200,155,60,.35), transparent 45%); }
.dish-card__body { position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.dish-card__title { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; color: var(--color-ink); margin-bottom: var(--sp-1); }
.dish-card__meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--color-stone-light); }
/* 有角标的卡片：副标题为右侧角标让出空间（限宽 → 长文案提前折行，盒子不越过角标） */
.dish-card__head:has(.dish-badge) + .dish-card__meta { max-width: calc(100% - 48px - var(--sp-3)); }
.dish-card--hero .dish-card__head:has(.dish-badge) + .dish-card__meta { max-width: calc(100% - 72px - var(--sp-3)); }
.dish-card--hero .dish-card__head:has(.dish-badge) ~ .dish-card__desc { padding-right: calc(72px + var(--sp-3)); }
.dish-card__desc { font-size: var(--fs-sm); color: var(--color-stone); line-height: 1.7; }
/* 中间大图的描述文字（即首页大卡「副标题」）同样限两行 + 省略号 */
.dish-card--hero .dish-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
/* 中间大卡片 */
.dish-card--hero { grid-column: 2; grid-row: 1 / 3; }
.dish-card--hero .dish-card__thumb { flex: 1 1 auto; }
.dish-card--hero .dish-card__body { flex: 0 0 auto; padding: var(--sp-5); }
.dish-card--hero .dish-card__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
/* 左右小卡片 */
.dish-card--side .dish-card__thumb { aspect-ratio: 3 / 2; flex: 0 0 auto; }
.dish-card--side .dish-card__body { flex: 0 0 auto; }
/* 招牌推荐角标：古风边框印章
绝对定位贴在标题行右上角，不参与行高计算 → 有/无角标的卡片，标题与副标题间距完全一致
（角标只挂在右侧，副标题文字在左侧，互不遮挡） */
.dish-card__head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: 0; }
.dish-card__head .dish-card__title { margin-bottom: 0; }
.dish-badge {
position: absolute;
top: 0;
right: 0;
flex: 0 0 auto;
width: 48px;
height: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-accent);
font-family: var(--font-serif);
font-size: 15px;
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.5px;
border: 1px solid rgba(200, 155, 60, 0.78);
background:
/* 四角 L 形金色装饰 */
linear-gradient(to right, var(--color-accent), var(--color-accent)) 4px 2px / 11px 2px no-repeat,
linear-gradient(to bottom, var(--color-accent), var(--color-accent)) 2px 4px / 2px 11px no-repeat,
linear-gradient(to left, var(--color-accent), var(--color-accent)) calc(100% - 4px) 2px / 11px 2px no-repeat,
linear-gradient(to bottom, var(--color-accent), var(--color-accent)) calc(100% - 2px) 4px / 2px 11px no-repeat,
linear-gradient(to right, var(--color-accent), var(--color-accent)) 4px calc(100% - 2px) / 11px 2px no-repeat,
linear-gradient(to top, var(--color-accent), var(--color-accent)) 2px calc(100% - 4px) / 2px 11px no-repeat,
linear-gradient(to left, var(--color-accent), var(--color-accent)) calc(100% - 4px) calc(100% - 2px) / 11px 2px no-repeat,
linear-gradient(to top, var(--color-accent), var(--color-accent)) calc(100% - 2px) calc(100% - 4px) / 2px 11px no-repeat,
rgba(55, 28, 20, 0.92);
box-shadow: 0 4px 12px rgba(18, 18, 18, .28);
pointer-events: none;
}
.dish-badge i { font-style: normal; font-size: 1em; margin-top: 1px; }
.dish-card--hero .dish-badge { width: 72px; height: 72px; font-size: 22px; margin-top: 5px; }
/* 必吃榜角标：暂用色块占位
拿到 PNG 后：把色块里的「必吃榜」文字换成 
即可，样式已就绪 */
.dish-badge--bib {
background: linear-gradient(155deg, #c8452a 0%, #8f2a12 55%, #6d1f0d 100%);
border: 1px solid rgba(255, 255, 255, .35);
color: #fff;
font-size: 13px;
letter-spacing: 1px;
line-height: 1.1;
}
.dish-badge--bib img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 图片版角标：直接用导出的 PNG（招牌推荐.png），去掉 CSS 装饰底，仅保留投影 */
.dish-badge--img { background: none; border: none; box-shadow: 0 4px 12px rgba(18, 18, 18, .28); }
.dish-badge--img img { width: 48px; height: 48px; object-fit: contain; display: block; }
/* 首页中间大图（hero）角标为 72px，图片按 72px 显示（源 96px 降采样，清晰） */
.dish-card--hero .dish-badge--img img { width: 72px; height: 72px; }
/* 招牌菜品内页（page-dishes）：副标题统一固定宽度 180px，右侧角标对齐一致
（180 + 48 角标仍有余量，故放开角标让位限宽，保证严格 180px） */
.page-dishes .dish-card__meta { width: 180px; }
.page-dishes .dish-card__head:has(.dish-badge) + .dish-card__meta { max-width: 100%; }
/* 首页副标题对齐内页：内页比例 = 180 / 268 ≈ 0.672，按各卡正文宽套用
侧卡正文 299 → 200px；中间大图（hero）正文 509 → 340px（按比例放大） */
.dishes-grid .dish-card--side .dish-card__meta { width: 200px; }
.dishes-grid .dish-card--hero .dish-card__desc { width: 400px; }
/* 所有菜品卡片固定当前高度（桌面端）；移动端恢复自适应，避免溢出 */
@media (min-width: 768px) {
.page-dishes .dish-card { height: 271px; }
.dishes-grid .dish-card--side { height: 291px; }
.dishes-grid .dish-card--hero { height: 603px; }
}
/* 副标题悬停全文本弹框（由 site.js 控制显隐与定位） */
.meta-tip {
position: fixed; z-index: 9999; max-width: 280px;
background: rgba(40, 22, 16, .96); color: #f3ead7;
font-size: 13px; line-height: 1.6; padding: 8px 12px;
border: 1px solid rgba(200, 155, 60, .6); border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
pointer-events: none; opacity: 0; transform: translateY(4px);
transition: opacity .15s ease, transform .15s ease;
}
.meta-tip.is-show { opacity: 1; transform: translateY(0); }
/* ---------- 新闻动态（头条大卡 + 右侧 Tab 列表） ---------- */
.news-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-8); align-items: stretch; margin-top: var(--sp-8); }
/* 头条大卡（右侧，固定高度作为等高基准，16:9 封面） */
.news-feature { border: 1px solid var(--color-line); background: var(--color-paper-2); display: flex; flex-direction: column; height: 100%; }
.news-feature__cover { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #16110f 0%, #5a0d10 100%); }
.news-feature__cover::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(200,155,60,.05) 0 1px, transparent 1px 30px); }
.news-feature__cap { position: absolute; right: 16px; bottom: 14px; z-index: 1; font-family: var(--font-serif); color: rgba(255,255,255,.72); font-size: var(--fs-xl); letter-spacing: 6px; }
.news-feature__body { padding: var(--sp-4); }
.news-feature__title { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 700; margin: 0 0 var(--sp-2); color: var(--color-ink); line-height: 1.3; }
.news-feature__desc { color: var(--color-stone); font-size: var(--fs-sm); line-height: 1.8; margin-bottom: var(--sp-2); }
.news-feature__meta { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--color-stone); }
.news-feature__more { margin-left: auto; color: var(--color-brand); font-weight: var(--fw-medium); transition: color var(--duration-fast); }
.news-feature__more:hover { color: var(--color-accent-strong); }
/* 左侧 Tab 切换列表（与右侧大卡等高，内容填充整列） */
.news-list { display: flex; flex-direction: column; height: 100%; }
.news-tabs { display: flex; gap: var(--sp-2); flex: none; margin-bottom: var(--sp-3); }
.news-tab { flex: 1; background: var(--color-paper-2); border: 1px solid var(--color-line); cursor: pointer; padding: var(--sp-3) var(--sp-4); font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 700; color: var(--color-stone); text-align: center; transition: all var(--duration-fast); }
.news-tab:hover:not(.is-active) { color: var(--color-brand); border-color: var(--color-brand-soft); background: var(--color-paper); }
.news-tab.is-active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.news-panels { flex: 1 1 auto; display: flex; border: 1px solid var(--color-line); }
.news-panel { display: flex; flex-direction: column; flex: 1; width: 100%; padding: var(--sp-4) var(--sp-5); }
.news-panel[hidden] { display: none; }
.news-item { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px dashed var(--color-line); align-items: baseline; transition: all var(--duration-fast); }
.news-item:hover { padding-left: var(--sp-2); }
.news-item__date { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--color-stone); font-family: var(--font-mono); letter-spacing: .5px; }
.news-item__title { font-size: var(--fs-sm); color: var(--color-ink); line-height: 1.6; transition: color var(--duration-fast); }
.news-item:hover .news-item__title { color: var(--color-brand); }
.news-more { margin-top: auto; padding-top: var(--sp-3); color: var(--color-brand); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.news-more { margin-top: auto; padding-top: var(--sp-3); color: var(--color-brand); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: color var(--duration-fast); }
.news-more:hover { color: var(--color-accent-strong); }
/* ---------- 央视报道视频卡 ---------- */
.video-card { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--duration); display: flex; flex-direction: column; }
.video-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--color-accent-soft); }
.video-card__cover { height: 180px; position: relative; background: radial-gradient(circle at 30% 30%, #2a1b1b, #0d0a0a); display: grid; place-items: center; }
.video-card__play { width: 56px; height: 56px; border-radius: 0; background: rgba(200,155,60,.2); backdrop-filter: blur(4px); display: grid; place-items: center; border: 1px solid rgba(200,155,60,.6); transition: transform var(--duration-fast); }
.video-card:hover .video-card__play { transform: scale(1.08); background: rgba(200,155,60,.35); }
.video-card__play::before { content: ""; border-left: 18px solid var(--color-accent); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.video-card__cctv { position: absolute; left: 12px; top: 12px; }
.video-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.video-card__title { font-family: var(--font-serif); font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--color-ink); }
.video-card__desc { font-size: var(--fs-sm); color: var(--color-stone); flex: 1; }
.video-card__date { font-size: var(--fs-xs); color: var(--color-stone-light); }
/* ---------- 统一配图规则 ----------
5 个配图模块（品牌介绍 / 招牌菜品 / 院落环境 / 行业新闻 / 央视报道）容器尺寸固定：
新上传图片比例与容器不一致时，宽度对齐容器、高度居中裁切（显示中间部分），不变形、不留白。 */
.brand-figure img,
.court-figure img,
.court-slide__img img,
.news-feature__cover img,
.video-card__cover img,
.dish-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover; /* 关键：对齐宽度 + 居中裁切高度 */
object-position: center;
display: block;
}
/* 院落环境：左轮播 + 右文字（右侧列适当收窄） */
.court-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-10);
align-items: center;
margin-top: var(--sp-6);
}
.court-text p { text-align: justify; line-break: strict; }
/* 重叠相片轮播 */
.court-carousel { position: relative; height: 420px; }
.court-slide {
position: absolute;
top: 45%;
left: 46%;
width: 85%;
aspect-ratio: 16 / 9; /* 固定 16:9，上传比例不符的新图由 .court-slide__img img 居中裁切 */
/* 由 JS 按「与激活卡片的距离」写入 --dx/--dy/--sc/--rot，形成层层叠起、向左露出边缘的相片堆 */
transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(var(--sc, .8)) rotate(var(--rot, 0deg));
background: var(--color-paper-2);
border: 6px solid var(--color-paper);
box-shadow: 0 18px 44px rgba(18, 18, 18, .28);
overflow: hidden;
opacity: var(--op, 0);
z-index: var(--z, 1);
pointer-events: none;
transition: opacity var(--duration), transform var(--duration);
}
.court-slide.is-active {
--dx: 0px;
--dy: 0px;
--sc: 1;
--rot: 0deg;
--op: 1;
--z: 4;
pointer-events: auto;
}
.court-slide__img {
position: absolute;
inset: 0;
background-image: linear-gradient(135deg, var(--g1, #1e1e1e), var(--g2, #a10e14));
}
.court-slide__img::after {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(135deg, rgba(200, 155, 60, .06) 0 1px, transparent 1px 32px);
}
.court-slide__cap {
position: absolute;
left: 14px;
bottom: 12px;
z-index: 1;
font-family: var(--font-serif);
color: rgba(255, 255, 255, .85);
font-size: var(--fs-lg);
letter-spacing: 4px;
background: linear-gradient(90deg, rgba(18, 18, 18, .55), transparent);
padding: 4px 14px 4px 6px;
}
/* 轮播控制 */
.court-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 6;
width: 44px;
height: 44px;
border: 1px solid rgba(200, 155, 60, .6);
background: rgba(18, 18, 18, .35);
color: var(--color-paper);
font-size: var(--fs-2xl);
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: all var(--duration-fast);
}
.court-arrow:hover { background: var(--color-brand); border-color: var(--color-brand); }
.court-arrow--prev { left: -77px; }
.court-arrow--next { right: -12px; }
.court-dots {
position: absolute;
left: 0;
right: 0;
bottom: -8px;
z-index: 5;
display: flex;
justify-content: center;
gap: var(--sp-3);
}
.court-dot {
width: 28px;
height: 4px;
border: none;
padding: 0;
background: var(--color-line);
cursor: pointer;
transition: background var(--duration-fast);
}
.court-dot.is-active { background: var(--color-brand); }
/* ---------- 栅格 ---------- */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* ---------- FAQ · 卡片式（一排三个） ----------
问/答 圆形徽标 + 题干 + 3 行截断答案 + 「展开更多」
⚠️ 徽标刻意用圆形（唯一破例），对齐参考稿；卡片本身仍为直角 */
.faq-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-5);
}
.faq-card {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-6);
background: var(--color-paper-2);
border: 1px solid var(--color-line);
border-left: 3px solid var(--color-brand);
transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.faq-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-brand-soft); border-left-color: var(--color-brand); }
.faq-card__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.faq-card__badge {
display: grid; place-items: center; flex: none;
width: 24px; height: 24px; border-radius: 50%;
font-family: var(--font-serif); font-weight: 700; font-size: 13px;
line-height: 1; color: #fff; margin-top: 1px;
}
.faq-card__badge--q { background: var(--color-brand); }
.faq-card__badge--a { background: #b9b1a5; }
.faq-card__q {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
font-weight: var(--fw-bold);
line-height: 1.65;
color: var(--color-ink);
}
.faq-card__a {
margin: 0;
font-size: var(--fs-sm);
line-height: 1.9;
color: var(--color-stone);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.faq-card.is-open .faq-card__a { -webkit-line-clamp: unset; overflow: visible; }
.faq-card__more {
align-self: flex-start;
margin-top: auto;
padding: 0;
background: none; border: none; cursor: pointer;
font-family: var(--font-sans);
font-size: var(--fs-sm);
letter-spacing: .5px;
color: var(--color-brand);
transition: color var(--duration-fast);
}
.faq-card__more:hover { color: var(--color-brand-strong); }
.faq-card__more::after { content: ""; }
@media (max-width: 1024px) { .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .faq-grid { grid-template-columns: 1fr; } }
/* ---------- 表单 ---------- */
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }
.field .req { color: var(--color-brand); }
.input, .select, .textarea { width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--fs-base); background: var(--color-surface); color: var(--color-ink); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.textarea { resize: vertical; min-height: 96px; }
/* ---------- 表格 ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; }
.table th, .table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-line); }
.table th { background: var(--color-brand-soft); color: var(--color-brand-strong); font-weight: var(--fw-medium); }
.table tr:hover td { background: var(--color-brand-50); }
/* ---------- 页脚 ---------- */
.footer { background: var(--color-dark); color: #b8b0a3; padding: var(--sp-12) 0 var(--sp-6); margin-top: var(--sp-16); }
.footer h4 { color: #fff; font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.footer a { color: #b8b0a3; }
.footer a:hover { color: var(--color-accent); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--sp-8); padding-top: var(--sp-5); font-size: var(--fs-xs); color: #8a8277; }
/* ---------- 深色区块工具类 ---------- */
.section--dark { background: var(--color-dark); color: var(--color-dark-ink); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #c9c1b4; }
/* 深色区块内的卡片：文字色不受 section 配色影响，与浅色底卡片完全一致
（否则 .section--dark h3 会把白卡上的菜名染成白色 → 白底白字看不见） */
.section--dark .dish-card__title { color: var(--color-ink); }
.section--dark .dish-card__meta { color: var(--color-stone-light); }
.section--dark .dish-card__desc { color: var(--color-stone); }
/* 常见问题卡片同理：.section--dark h3 / p 会把卡内题干/答案染成浅色 */
.section--dark .faq-card__q { color: var(--color-ink); }
.section--dark .faq-card__a { color: var(--color-stone); }
.section--dark .faq-card__a a { color: var(--color-brand); }
/* 品牌荣誉：深色荣誉墙背景已改为内联样式（仅 about.html 总览页保留），内页 honor.html 用 body 泼墨背景 */
/* 首页专用：浮于 Banner 上方的透明导航 */
.nav--floating {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, .06);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
backdrop-filter: blur(12px) saturate(1.1);
}
.nav--floating .container { height: 72px; } /* 首页导航加高，logo 44px 上下居中 */
.nav--floating .nav__menu > li.has-dropdown::after { height: 36px; } /* 桥到 nav 底，避免下拉菜单闪烁 */
.nav--floating .nav__menu a { color: rgba(245,240,232,.75); }
.nav--floating .nav__menu a:hover,
.nav--floating .nav__menu a.is-active { color: var(--color-brand); }
.nav--floating .nav__logo img { filter: none; }
.nav--floating .nav__cta {
background: var(--color-brand);
color: #fff !important;
border-color: var(--color-brand);
}
.nav--floating .nav__cta:hover {
background: var(--color-brand-strong);
color: #fff !important;
}
/* 滚出 Banner / page-hero：导航浮层加深底色 + 文字改黑（解决下方浅色区白字看不清） */
.nav.is-scrolled,
.nav--floating.is-scrolled {
background-color: rgba(255, 255, 255, 0.94);
border-bottom-color: rgba(0, 0, 0, .08);
}
.nav.is-scrolled .nav__menu a,
.nav--floating.is-scrolled .nav__menu a { color: var(--color-ink); }
.nav.is-scrolled .nav__menu a:hover,
.nav.is-scrolled .nav__menu a.is-active,
.nav--floating.is-scrolled .nav__menu a:hover,
.nav--floating.is-scrolled .nav__menu a.is-active { color: var(--color-brand); }
/* 下拉菜单字色始终保持白色（深底）—— 顺序在 is-scrolled 之后以同 specificity 覆盖 */
.nav.is-scrolled .nav__dropdown a,
.nav--floating.is-scrolled .nav__dropdown a { color: rgba(245, 240, 232, .75); }
.nav.is-scrolled .nav__dropdown a:hover,
.nav--floating .nav__dropdown a:hover { color: var(--color-accent); }
/* ---------- 首页 Banner（顶部英雄区，深色底 + 金色书法标题 + 菜品光晕视觉） ---------- */
.banner {
position: relative;
min-height: calc(100vh - var(--header-h)); /* 兜底：老浏览器 */
min-height: calc(100dvh - var(--header-h)); /* 首屏高度，移动端动态视口友好 */
display: grid;
place-items: center;
overflow: hidden;
color: #fff;
background: linear-gradient(135deg, #0d0808 0%, #1a0d0d 100%);
}
/* 首页 Banner：导航浮起后铺满首屏，不再减去 nav 高度 */
.banner--full {
min-height: 100vh;
min-height: 100dvh;
}
/* 背景视频：铺满 banner，居中对齐裁切 */
.banner__slides { position: absolute; inset: 0; z-index: 0; }
.banner__slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity .9s ease;
pointer-events: none;
}
.banner__slide.is-active { opacity: 1; }
.banner__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.banner__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
/* 轮播缩略图（右下角，仅多图/多视频时出现，可点击切换） */
.banner__thumbs {
position: absolute; right: 26px; top: 42%; transform: translateY(-50%);
z-index: 3; display: flex; flex-direction: column; gap: 10px;
}
.banner__thumb {
width: 112px; height: 63px; padding: 0; cursor: pointer;
border: 2px solid rgba(200,155,60,.55);
background-size: cover; background-position: center; background-color: #1a0d0d;
background-repeat: no-repeat;
opacity: .72; transition: opacity var(--duration-fast, .2s), border-color var(--duration-fast, .2s), transform var(--duration-fast, .2s);
position: relative; overflow: hidden;
}
.banner__thumb img,
.banner__thumb-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__thumb.is-active { opacity: 1; border-color: var(--color-accent); transform: scale(1.06); }
/* 向下滚动提示：鼠标图标 + 双箭头，居中底部，上下跳动 */
.banner__scroll {
position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px;
color: rgba(255, 255, 255, .82);
pointer-events: none;
animation: bannerScrollBounce 1.6s ease-in-out infinite;
}
.banner__scroll svg { display: block; }
.banner__chevrons { opacity: .9; }
@keyframes bannerScrollBounce {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 10px); }
}
.banner::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .5;
background-image: repeating-linear-gradient(135deg, rgba(200,155,60,.04) 0 1px, transparent 1px 30px);
}
.banner::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
opacity: .7; /* 整体淡化：统一压低下面三层渐变的浓度 */
background:
linear-gradient(90deg, rgba(13,8,8,.92) 0%, rgba(18,12,12,.74) 30%, rgba(26,10,10,.5) 100%),
radial-gradient(ellipse 60% 80% at 82% 50%, rgba(200,155,60,.14), transparent 55%),
radial-gradient(ellipse 44% 54% at 78% 44%, rgba(205,21,29,.18), transparent 46%);
}
.banner .container { position: relative; z-index: 2; width: 100%; max-width: var(--container-max); margin: 0 auto; }
/* 每张轮播自带文案，位置与原来居中的那一块相同，未激活的随幻灯片一起隐藏 */
.banner__slide .banner__copy {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
width: 100%;
margin: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
.banner__slide.is-active .banner__actions { pointer-events: auto; }
.banner__inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; width: 100%; padding: var(--sp-8) 0; transform: translateY(-6vh); }
.banner__eyebrow { font-size: var(--fs-sm); letter-spacing: 4px; color: var(--color-accent); font-weight: var(--fw-medium); margin-bottom: var(--sp-4); display: block; text-align: left; }
.banner__eyebrow::before { content: ""; display: block; width: 32px; height: 2px; background: var(--color-brand); margin-bottom: var(--sp-3); }
.banner__title { font-family: var(--font-calligraphy); font-size: clamp(3.25rem, 7vw, 5.25rem); font-weight: 400; color: var(--color-accent); letter-spacing: 6px; margin: 0 0 var(--sp-2); line-height: 1.1; }
.banner__title-img { width: clamp(280px, 50vw, 560px); height: auto; display: block; margin: 0 auto var(--sp-3); }
.banner__subtitle { font-family: var(--font-serif); font-size: var(--fs-xl); color: #d8cfc1; letter-spacing: 2px; margin: 0 0 36px; }
.banner__actions { margin-top: 0; }
/* ---------- 品牌介绍（左文右图 · 底部对齐 · 数据一排） ---------- */
.brand-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-10); align-items: center; }
.brand-split__text .eyebrow { margin-bottom: var(--sp-3); }
.brand-split__text h2 { max-width: 30ch; font-weight: var(--fw-black); }
.brand-split__text .lead { max-width: 44ch; }
.brand-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }
.brand-figure { position: relative; height: 340px; overflow: hidden; background: linear-gradient(135deg, #16110f 0%, #5a0d10 100%); }
.brand-figure::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(200,155,60,.05) 0 1px, transparent 1px 30px); }
.brand-figure__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.brand-figure__cap { position: absolute; right: 18px; bottom: 16px; z-index: 2; font-family: var(--font-serif); color: rgba(255,255,255,.72); font-size: var(--fs-2xl); letter-spacing: 6px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
/* 四合院由来 · 企业介绍正文（纯文字长文，去掉右侧视频后改为单栏阅读；宽度与下方配图/整块内容一致，满栏） */
.story-article { max-width: none; margin: var(--sp-8) 0 0; }
.story-article p { color: var(--color-stone); line-height: 1.95; margin-top: var(--sp-4); font-size: var(--fs-base); }
.story-article p:first-of-type { margin-top: 0; }
.story-article .lead { font-size: var(--fs-lg); color: var(--color-ink); line-height: 1.85; margin-top: 0; }
.story-article h3 { margin-top: var(--sp-10); font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--color-ink); font-weight: var(--fw-bold); position: relative; padding-left: var(--sp-4); }
.story-article h3::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 4px; background: var(--color-brand); }
.brand-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-8); }
.stat { position: relative; border: 1px solid var(--color-line); padding: var(--sp-4) var(--sp-5); overflow: hidden; }
.stat__bg { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; object-fit: contain; z-index: 0; }
.stat__content { position: relative; z-index: 1; padding-left: 78px; }
.stat__num { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 900; color: var(--color-brand); line-height: 1.1; }
.stat__num small { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.stat__label { font-size: var(--fs-xs); color: var(--color-stone); margin-top: 2px; }
/* 品牌荣誉：勋章条 + 下方 4 列荣誉卡片 */
.honor-badges img { width: 100%; height: auto; display: block; }
/* ---------- 通用工具类 ---------- */
.text-accent { color: var(--color-accent); }
.text-brand { color: var(--color-brand); }
.eyebrow { font-size: var(--fs-sm); letter-spacing: 4px; color: var(--color-accent); font-weight: var(--fw-medium); text-transform: uppercase; }
.lead { font-size: var(--fs-md); color: var(--color-stone); }
.divider { height: 1px; background: var(--color-line); border: 0; margin: var(--sp-10) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* ---------- 内页通用：面包屑 / 页头 / 二级导航 / 卡片媒体 / 视频框 / 联系栅格 ---------- */
/* 面包屑导航：位置在 banner 下方，与正文同色系融为一体（透明背景 + 顶部分隔线）
- 首页项：左侧房子 SVG（极简几何线条，与全局设计语言统一）
- 分隔符：1×12px 极细灰短线，比文字更安静
- 当前项：左侧 6×6 朱红方块（小一号版的 .eyebrow::before 指示器） */
.breadcrumb {
background: transparent;
border-top: 1px solid var(--color-line);
}
/* 页面翻页导航（关于我们 4 子页之间） */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin: var(--sp-16) 0 var(--sp-8); }
.pager a { display: block; padding: var(--sp-6) var(--sp-4); text-decoration: none; color: var(--color-ink); transition: all var(--duration-fast); }
.pager a:hover { background: var(--color-paper-2); color: var(--color-brand); }
.pager__next { text-align: right; }
.pager__hint { display: block; font-size: var(--fs-sm); color: var(--color-stone); margin-bottom: var(--sp-2); }
.pager__title { display: block; font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 700; }
.pager a:hover .pager__hint { color: var(--color-brand); }
/* 证书翻页：与站点按钮同语（直角 / 米白底 / 朱红激活 / 衬线字体） */
.honor-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-10); }
.honor-pager__btn,
.honor-pager__dot {
height: 40px;
border: 1px solid var(--color-line);
background: var(--color-paper-2);
cursor: pointer;
font-family: var(--font-serif);
color: var(--color-stone);
border-radius: 0;
transition: all var(--duration-fast);
display: inline-flex;
align-items: center;
justify-content: center;
}
.honor-pager__btn { width: 40px; font-size: 16px; line-height: 1; padding: 0; }
.honor-pager__dot { min-width: 40px; padding: 0 var(--sp-3); font-size: var(--fs-base); }
.honor-pager__btn:not(:disabled):hover,
.honor-pager__dot:not(.is-active):hover {
border-color: var(--color-brand);
color: var(--color-brand);
}
.honor-pager__dot.is-active {
background: var(--color-brand);
border-color: var(--color-brand);
color: #fff;
}
.honor-pager__btn:disabled { opacity: .35; cursor: not-allowed; }
/* 证书分页容器：每页一个 .honor-page，9 张/页 */
.honor-page { display: none; }
.honor-page.is-active { display: grid; }
/* 证书放大查看（lightbox） */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(18,18,18,.92); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 90vw; max-height: 78vh; object-fit: contain; border: 6px solid #fff; box-shadow: 0 24px 64px rgba(0,0,0,.6); }
.lightbox__cap { color: #fff; font-family: var(--font-serif); font-size: var(--fs-lg); letter-spacing: 2px; margin: 0; text-align: center; }
.lightbox__close { position: absolute; top: var(--sp-4); right: var(--sp-5); width: 48px; height: 48px; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 24px; cursor: pointer; border-radius: 0; transition: all var(--duration-fast); }
.lightbox__close:hover { color: var(--color-accent); border-color: var(--color-accent); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 20px; cursor: pointer; border-radius: 0; transition: all var(--duration-fast); }
.lightbox__nav:hover { background: var(--color-brand); border-color: var(--color-brand); }
.lightbox__nav--prev { left: var(--sp-5); }
.lightbox__nav--next { right: var(--sp-5); }
.honor-grid .card { cursor: zoom-in; }
/* 品牌荣誉：证书图标题字号放大（与首页 lead 文本一致） */
section#honor figure.card > figcaption.card__body {
font-size: var(--fs-md);
font-family: var(--font-serif);
text-align: center;
}
.breadcrumb .container {
display: flex;
justify-content: flex-end; /* 右对齐：与正文 .container 右内边缘贴齐 */
align-items: center;
padding-top: var(--sp-6);
padding-bottom: var(--sp-6);
}
.breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
font-size: var(--fs-sm);
letter-spacing: 1px;
}
.breadcrumb li {
display: inline-flex;
align-items: center;
color: var(--color-stone);
line-height: 1.4;
}
.breadcrumb li a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-stone);
transition: color var(--duration-fast);
}
.breadcrumb li a:hover { color: var(--color-brand); }
.breadcrumb li .home-icon {
width: 14px; height: 14px;
display: inline-block;
vertical-align: middle;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linejoin: round;
}
/* 分隔符：极细短竖线，替代 ›
而非箭头字符，宽度可控、与几何设计语言统一 */
.breadcrumb li + li::before {
content: "";
display: inline-block;
width: 1px;
height: 12px;
background: var(--color-line);
margin: 0 var(--sp-4);
vertical-align: middle;
}
/* 当前项：朱红方块指示器（与 .eyebrow::before 同语言，更小巧） */
.breadcrumb li.is-current {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--color-ink);
font-weight: var(--fw-medium);
}
.breadcrumb li.is-current::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: var(--color-brand);
flex: none;
border-radius: 1px;
}
@media (max-width: 640px) {
.breadcrumb .container {
padding-top: var(--sp-5);
padding-bottom: var(--sp-5);
justify-content: flex-start; /* 移动端保留左对齐，避免缩到角落 */
}
.breadcrumb li + li::before { margin: 0 var(--sp-3); }
.breadcrumb { font-size: var(--fs-xs); }
}
/* 内页页头：背景图仅来自栏目「栏目广告图」（inline background-image），无默认图；无图时模板不渲染整块 */
.page-hero {
position: relative;
background-color: var(--color-dark);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: var(--color-dark-ink);
padding: var(--sp-12) 0 var(--sp-11);
padding-top: var(--sp-12);
min-height: 290px;
display: flex;
align-items: center;
overflow: hidden;
}
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(200,155,60,.05) 0 1px, transparent 1px 30px); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; width: 100%; }
.page-hero .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.page-hero .eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--color-brand); }
.page-hero h1 { font-family: var(--font-serif); color: #fff; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 3px; margin: 0 0 var(--sp-3); text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35); }
.page-hero p {
color: #fff;
max-width: 62ch;
margin: 0;
font-size: var(--fs-sm);
line-height: 1.75;
text-shadow:
-1px 0 0 rgba(0,0,0,.55),
1px 0 0 rgba(0,0,0,.55),
0 -1px 0 rgba(0,0,0,.55),
0 1px 0 rgba(0,0,0,.55),
0 1px 3px rgba(0,0,0,.4);
}
.page-subnav { background: #fffbf1; border-bottom: 1px solid var(--color-line); }
.page-subnav .container { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.page-subnav a { display: inline-block; padding: var(--sp-3) var(--sp-5); color: var(--color-stone); font-size: var(--fs-sm); letter-spacing: 2px; border-bottom: 2px solid transparent; transition: all var(--duration-fast); }
.page-subnav a:hover, .page-subnav a.is-active { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #16110f 0%, #5a0d10 100%); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .45s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__title { font-family: var(--font-serif); }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video-frame video, .video-frame img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center; }
.video-frame p { margin: 0; }
.video-frame figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-family: var(--font-serif); color: rgba(255,255,255,.85); font-size: var(--fs-md); letter-spacing: 4px; background: linear-gradient(90deg, rgba(18,18,18,.55), transparent); padding: 4px 14px 4px 6px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--sp-10); align-items: start; }
.info-list { display: grid; gap: var(--sp-4); }
.info-list .item { border: 1px solid var(--color-line); background: var(--color-paper-2); padding: var(--sp-4) var(--sp-5); }
.info-list .item h4 { margin: 0 0 4px; font-family: var(--font-serif); color: var(--color-brand); font-size: var(--fs-md); }
.info-list .item p { margin: 0; color: var(--color-stone); font-size: var(--fs-sm); line-height: 1.8; }
a.video-card { text-decoration: none; color: inherit; }
.video-card__cover > img { position: absolute; inset: 0; z-index: 0; }
.video-card__play { position: relative; z-index: 1; }
.video-card__cctv { z-index: 2; }
.value-card { text-align: center; padding: var(--sp-8) var(--sp-6); border: 1px solid var(--color-line); background: var(--color-paper-2); }
.value-card .no { font-family: var(--font-serif); font-size: var(--fs-2xl); color: var(--color-accent); display: block; margin-bottom: var(--sp-3); }
.value-card h3 { font-family: var(--font-serif); font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.value-card p { color: var(--color-stone); font-size: var(--fs-sm); line-height: 1.9; margin: 0; text-align: justify; }
/* 主厨团队模块：左右等高（align-items: stretch），右侧 6 项 3 列 × 2 行 */
.founder {
display: grid;
grid-template-columns: 320px 1fr;
gap: var(--sp-8);
align-items: stretch; /* 关键：让两列等高 */
}
.founder__photo { border: 6px solid var(--color-paper); box-shadow: 0 18px 44px rgba(18,18,18,.22); }
.founder__photo img,
.founder__photo video { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
/* 主厨团队：让左侧创始人卡片内容垂直居中、与右侧网格高度对齐 */
.founder > .value-card { display: flex; flex-direction: column; justify-content: center; }
/* 主厨团队：右侧证书网格（3 列 × 2 行，与左侧卡片等高） */
.info-list--units {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 1fr; /* 两行等高 = 上下各三个 */
gap: var(--sp-3);
}
.info-list--units .item {
border: 1px solid var(--color-line);
background: var(--color-paper-2);
padding: var(--sp-3) var(--sp-3) var(--sp-4);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all var(--duration-fast);
overflow: hidden;
}
.info-list--units .item:hover { border-color: var(--color-accent-soft); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.info-list--units .item__icon {
width: 100%;
height: 96px;
margin-bottom: var(--sp-3);
display: grid;
place-items: center;
background: linear-gradient(135deg, #fdfbf6 0%, #f5ecd6 100%);
border: 1px solid var(--color-line);
overflow: hidden;
}
.info-list--units .item__icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.info-list--units .item__icon svg { width: 48px; height: 48px; color: var(--color-brand); }
/* 厨师照片占位色块（待换真实照片：把 .item__photo 替换为 ![]()
即可） */
.info-list--units .item__photo {
width: 100%;
aspect-ratio: 4 / 5;
margin-bottom: var(--sp-3);
background: linear-gradient(160deg, #f0e8d8 0%, #e0d2b6 55%, #cdbb98 100%);
border: 1px solid var(--color-line);
overflow: hidden;
}
.info-list--units .item__photo img,
.info-list--units .item__photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-list--units .item h4 {
margin: 0;
font-family: var(--font-serif);
color: var(--color-ink);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: 1.45;
}
.info-list--units .item .role {
display: block;
font-size: var(--fs-xs);
color: var(--color-accent-strong);
margin-top: 4px;
letter-spacing: 1px;
}
@media (max-width: 1024px) {
.contact-grid { grid-template-columns: 1fr; }
.founder { grid-template-columns: 1fr; }
.founder__photo { max-width: 320px; }
.info-list--units { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.info-list--units { grid-template-columns: 1fr; grid-template-rows: repeat(6, auto); }
.info-list--units .item__icon { height: 120px; }
}
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.news-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
/* 主导航折叠为汉堡菜单（平板/手机同档）
⚠️ 断点必须提到 1024：9 个导航项横排需要 ~1019px，769–1025px 区间放不下，
会把「关于我们」「联系我们」等项压成两行（菜单高度 27→54px）
top 必须等于 .nav .container 的 72px：写 68px 会让菜单上压导航条底边 4px */
/* 主导航折叠为汉堡菜单（白底手风琴，样式对齐设计稿）：
白色背景 / 一级深色字 + 右侧箭头 / 二级缩进 / 选中淡红底 */
.nav__menu {
display: none; position: absolute; top: 72px; left: 0; right: 0;
flex-direction: column; background: #fff;
padding: var(--sp-2) var(--sp-3); gap: 2px; align-items: stretch;
max-height: calc(100vh - 72px); overflow-y: auto;
border-top: 1px solid var(--color-line);
box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
}
.nav__menu.is-open { display: flex; }
.nav__menu > li.has-dropdown::after { display: none; }
/* 一级项：整行、深色字、右侧箭头；选中淡红底 + 朱红字 */
.nav .nav__menu > li > a:not(.nav__cta) {
display: flex; align-items: center; justify-content: space-between;
color: var(--color-ink); font-size: 16px; letter-spacing: 0;
padding: 13px 12px; border-radius: 8px; line-height: 1.25;
transition: background .15s ease, color .15s ease;
}
.nav .nav__menu > li > a:not(.nav__cta):hover,
.nav .nav__menu > li > a:not(.nav__cta).is-active {
color: var(--color-brand);
background: rgba(205, 21, 29, .08); /* 选中：淡红色底 */
}
.nav__menu > li.has-dropdown > a::after {
content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
opacity: .55;
}
.nav__menu > li.has-dropdown.is-open > a::after { transform: rotate(-135deg) translateY(-2px); }
.nav__menu > li.has-dropdown.is-open > a:not(.nav__cta) { color: var(--color-brand); }
/* 二级：缩进、深灰字、选中淡红圆角底；默认收起，点击一级展开
缩进口径：一级左 12px，二级再空一个汉字（1em=15px）→ calc(12px + 1em)=27px */
.nav__dropdown {
position: static; transform: none; opacity: 1; visibility: visible;
box-shadow: none; border: none; border-top: none; background: transparent;
padding: 2px 0 4px; min-width: 0; display: none;
}
.nav__menu > li.has-dropdown.is-open > .nav__dropdown { display: block; }
.nav .nav__menu .nav__dropdown a {
display: block; text-align: left;
color: rgba(0, 0, 0, .62); font-size: 15px; letter-spacing: 0;
padding: 11px 12px 11px calc(12px + 1em); border-radius: 8px; line-height: 1.3;
transition: background .15s ease, color .15s ease;
}
.nav .nav__menu .nav__dropdown a:hover,
.nav .nav__menu .nav__dropdown a.is-active {
color: var(--color-brand);
background: rgba(205, 21, 29, .08); /* 选中：淡红色底 */
}
.nav__toggle { display: inline-grid; place-items: center; }
/* 「立即预订」在移动端菜单底部：inline 不占垂直 margin → 改 inline-block 让上下留白生效，避免贴边 */
.nav__cta { display: inline-block; margin: var(--sp-3) var(--sp-3) var(--sp-5); }
.court-carousel { height: 360px; }
/* Banner 缩略图（右侧竖排 112px）：空间不足会压住标题区 → 隐藏，自动轮播仍在 */
.banner__thumbs { display: none; }
/* 新闻上下篇标题：单行省略在窄栏会切掉大半标题 → 放开为两行截断 */
.article__nav-item strong {
white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
}
/* 1025–1200（小笔记本 / 半屏窗口）：仍横排，但空间紧张 → 收紧间距字号，杜绝换行 */
@media (min-width: 1025px) and (max-width: 1200px) {
.nav .container { gap: var(--sp-3); }
.nav__menu { gap: 0; }
.nav__menu a { padding: var(--sp-2) var(--sp-2); font-size: var(--fs-xs); letter-spacing: 0; }
.nav__cta { padding: var(--sp-2) var(--sp-3) !important; font-size: var(--fs-xs); }
}
@media (max-width: 768px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.court-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
.court-carousel { height: 320px; }
.court-arrow--prev { left: 4px; }
.brand-split { grid-template-columns: 1fr; gap: var(--sp-6); }
.brand-stats { grid-template-columns: repeat(2, 1fr); }
.dishes-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
.dish-card--hero { grid-column: auto; grid-row: auto; }
/* 副标题 200px / 描述 400px 是桌面对齐用的定宽；单列后卡片可能不足 400px，
写死会被 .dish-card 的 overflow:hidden 裁掉右侧文字 → 窄屏一律放开为自适应 */
.dishes-grid .dish-card--side .dish-card__meta,
.dishes-grid .dish-card--hero .dish-card__desc,
.page-dishes .dish-card__meta { width: auto; max-width: 100%; }
.dish-card--side .dish-card__thumb { height: auto; aspect-ratio: 16 / 9; }
.dish-card--hero .dish-card__thumb { min-height: 240px; }
h1 { font-size: var(--fs-3xl); }
.section { padding: var(--sp-10) 0; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* =============================================================
第 1 周增量：返回顶部 / 表单校验 / Toast / 微信二维码 / 门店信息
============================================================= */
/* ---------- 返回顶部按钮（右下浮动，滚动 300px 后出现） ---------- */
.back-to-top {
position: fixed;
right: var(--sp-6);
bottom: var(--sp-6);
z-index: 90;
width: 48px;
height: 48px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--color-accent);
background: var(--color-dark);
color: var(--color-accent);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .28s ease, transform .28s ease, visibility .28s,
background var(--duration-fast), color var(--duration-fast);
box-shadow: 0 10px 28px rgba(18,18,18,.28);
}
.back-to-top:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; display: block; }
.back-to-top__label {
position: absolute;
right: calc(100% + 10px);
white-space: nowrap;
font-size: var(--fs-xs);
letter-spacing: 1px;
color: var(--color-ink);
background: var(--color-paper);
border: 1px solid var(--color-line);
padding: 4px 10px;
opacity: 0;
transform: translateX(6px);
transition: opacity var(--duration-fast), transform var(--duration-fast);
pointer-events: none;
}
.back-to-top:hover .back-to-top__label { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) {
.back-to-top { right: var(--sp-4); bottom: var(--sp-4); width: 44px; height: 44px; }
.back-to-top__label { display: none; }
}
/* ---------- 表单校验态（红框 + 提示文字） ---------- */
.field.has-error > label { color: var(--color-brand); }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
border-color: var(--color-brand);
background: #fff6f6;
}
.field__error {
margin: 6px 0 0;
font-size: var(--fs-xs);
color: var(--color-brand);
display: none;
align-items: center;
gap: 4px;
}
.field.has-error .field__error { display: flex; }
.field__error::before { content: "⚠"; font-size: 11px; }
/* 用餐日期：整框可点，日历跟页面的纸色和朱红走 */
input[data-date] { cursor: pointer; }
.date-pop {
position: fixed;
z-index: 40;
box-sizing: border-box;
padding: var(--sp-4);
background: var(--color-paper-2);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-md);
color: var(--color-ink);
}
.date-pop[hidden] { display: none; }
.date-pop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.date-pop__title { font-family: var(--font-serif); font-size: var(--fs-md); letter-spacing: 1px; }
.date-pop__nav {
width: 32px;
height: 32px;
border: 1px solid var(--color-line);
background: var(--color-paper);
color: var(--color-brand);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.date-pop__nav:hover:not(:disabled) { border-color: var(--color-brand); background: var(--color-brand-soft); }
.date-pop__nav:disabled { color: var(--color-stone-light); cursor: default; }
.date-pop__weeks,
.date-pop__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.date-pop__weeks { margin-bottom: var(--sp-2); font-size: var(--fs-xs); color: var(--color-stone-light); letter-spacing: 1px; }
.date-pop__day {
height: 36px;
border: 0;
background: transparent;
color: var(--color-ink);
font-family: var(--font-sans);
font-size: var(--fs-sm);
cursor: pointer;
}
.date-pop__day:hover:not(:disabled):not(.is-empty) { background: var(--color-brand-soft); color: var(--color-brand); }
.date-pop__day.is-today { box-shadow: inset 0 0 0 1px var(--color-accent); }
.date-pop__day.is-selected,
.date-pop__day.is-selected:hover { background: var(--color-brand); color: #fff; }
.date-pop__day:disabled { color: var(--color-stone-light); cursor: default; }
.date-pop__day.is-empty { cursor: default; }
/* ---------- Toast 反馈（右下浮出，2.6s 自动消失） ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 32px;
transform: translate(-50%, 16px);
z-index: 120;
display: flex;
align-items: center;
gap: var(--sp-3);
max-width: min(92vw, 460px);
padding: var(--sp-4) var(--sp-5);
background: var(--color-dark);
color: var(--color-dark-ink);
border-left: 3px solid var(--color-accent);
font-size: var(--fs-sm);
letter-spacing: .5px;
box-shadow: 0 18px 46px rgba(18,18,18,.4);
opacity: 0;
visibility: hidden;
transition: opacity .32s ease, transform .32s ease, visibility .32s;
}
.toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast--success { border-left-color: #3f9c5a; }
.toast--error { border-left-color: var(--color-brand); }
.toast__icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; }
.toast--success .toast__icon { background: #3f9c5a; color: #fff; }
.toast--error .toast__icon { background: var(--color-brand); color: #fff; }
.toast__text { line-height: 1.5; }
/* ---------- 微信二维码卡片（页脚 / 联系页） ---------- */
.wechat-card {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4);
background: rgba(250,247,240,.05);
border: 1px solid rgba(200,155,60,.32);
}
.wechat-card__qr {
flex: none;
width: 96px;
height: 96px;
padding: 5px;
background: var(--color-paper);
border: 1px solid var(--color-line);
}
.wechat-card__qr img { width: 100%; height: 100%; display: block; object-fit: contain; }
.wechat-card__meta h4 { margin: 0 0 6px; font-family: var(--font-serif); color: var(--color-accent); font-size: var(--fs-sm); letter-spacing: 1px; }
.wechat-card__meta p { margin: 0; font-size: var(--fs-xs); color: #b8b0a3; line-height: 1.7; }
.wechat-card__meta strong { color: var(--color-dark-ink); font-weight: 600; letter-spacing: .5px; }
@media (max-width: 640px) {
.wechat-card { flex-direction: row; }
.wechat-card__qr { width: 84px; height: 84px; }
}
/* ---------- 门店卡片的补充信息行（地址 / 停车 / 电话） ---------- */
.store-meta {
display: grid;
gap: var(--sp-3);
margin: var(--sp-5) 0 0;
padding-top: var(--sp-4);
border-top: 1px dashed var(--color-line);
}
.store-meta__row { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--color-stone); }
.store-meta__k { flex: none; color: var(--color-stone); letter-spacing: 2px; min-width: 3.5em; font-weight: var(--fw-medium); }
.store-meta__v { color: var(--color-ink); font-size: var(--fs-base); line-height: 1.6; }
.store-meta__v a { color: var(--color-ink); border-bottom: 1px solid var(--color-line); }
.store-meta__v a:hover { color: var(--color-brand); border-bottom-color: var(--color-brand); }
/* 电话行：标红 + 加大字号 + 取消下划线，最显眼 */
.store-meta__row--tel { margin-top: var(--sp-1); }
.store-meta__row--tel .store-meta__k { color: var(--color-brand); }
.store-meta__row--tel .store-meta__v,
.store-meta__row--tel .store-meta__v a {
color: var(--color-brand); font-size: var(--fs-lg); font-weight: var(--fw-bold);
font-family: var(--font-mono); letter-spacing: 1px; border-bottom: none;
}
.store-meta__row--tel .store-meta__v a:hover { color: var(--color-brand-strong); }
/* 模块标题下副标题（一句话简介） */
.dishes-header__lead { margin: var(--sp-3) 0 0; font-size: var(--fs-base); line-height: 1.85; color: var(--color-stone); max-width: 720px; }
/* ---------- 联系页"实用信息"三宫格（人均 / 停车 / 支付） ---------- */
.practical-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
margin-bottom: var(--sp-8);
}
.practical-card {
padding: var(--sp-5);
background: var(--color-paper);
border: 1px solid var(--color-line);
border-top: 3px solid var(--color-accent);
}
.practical-card__icon { width: 26px; height: 26px; color: var(--color-brand); margin-bottom: var(--sp-3); }
.practical-card h4 { margin: 0 0 var(--sp-2); font-family: var(--font-serif); font-size: var(--fs-md); color: var(--color-ink); }
.practical-card p { margin: 0; font-size: var(--fs-sm); color: var(--color-stone); line-height: 1.8; }
@media (max-width: 768px) {
.practical-grid { grid-template-columns: 1fr; }
}
/* ---------- 电话拨号链接（视觉与正文一致，仅 hover 提示可拨） ---------- */
a[href^="tel:"] { color: inherit; border-bottom: 1px solid transparent; transition: color var(--duration-fast), border-color var(--duration-fast); }
a[href^="tel:"]:hover { color: var(--color-brand); border-bottom-color: var(--color-brand); }
/* ---------- 404 / 隐私政策等内页共用版式 ---------- */
.policy { max-width: 76ch; margin: 0 auto; }
.policy h2 { font-family: var(--font-serif); font-size: var(--fs-xl); margin: var(--sp-8) 0 var(--sp-3); color: var(--color-ink); }
.policy h2:first-child { margin-top: 0; }
.policy p, .policy li { color: var(--color-stone); line-height: 1.95; font-size: var(--fs-sm); }
.policy ul { padding-left: 1.4em; margin: var(--sp-3) 0; }
.policy li { margin-bottom: var(--sp-2); }
.policy__updated { display: inline-block; margin-bottom: var(--sp-6); padding: 4px 12px; background: var(--color-paper-2); border-left: 3px solid var(--color-accent); font-size: var(--fs-xs); color: var(--color-stone); letter-spacing: 1px; }
.notfound { text-align: center; padding: var(--sp-20) 0 var(--sp-16); }
.notfound__code { font-family: var(--font-serif); font-weight: 900; font-size: clamp(5rem, 16vw, 10rem); line-height: 1; color: var(--color-brand); letter-spacing: 8px; }
.notfound__seal { display: inline-block; margin: var(--sp-4) auto var(--sp-6); padding: 6px 14px; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--fs-xs); letter-spacing: 3px; }
.notfound h1 { font-family: var(--font-serif); font-size: var(--fs-2xl); margin: 0 0 var(--sp-4); color: var(--color-ink); }
.notfound p { color: var(--color-stone); max-width: 46ch; margin: 0 auto var(--sp-8); line-height: 1.9; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
/* ---------- Footer 社交图标 + hover 二维码占位 ---------- */
.footer-socials { display: flex; gap: var(--sp-4); margin-top: 0; align-items: center; }
/* footer 品牌列小字段后距离收紧 */
.footer > .container > div:first-child p { margin-bottom: var(--sp-2); }
.social { position: relative; }
.social__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0; border-radius: 50%;
border: 0.5px solid rgba(186,186,186,0.5);
background: transparent; color: inherit; cursor: pointer;
text-decoration: none;
transition: transform var(--duration-fast) ease, background var(--duration-fast) ease;
}
.social__icon:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); }
.social__icon svg { display: block; }
.social__pop {
position: absolute; left: 50%; bottom: calc(100% + 12px);
transform: translateX(-50%) translateY(6px);
background: #fff; padding: 8px; border-radius: 2px;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
white-space: nowrap; z-index: 5;
}
.social:hover .social__pop,
.social:focus-within .social__pop {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.social__pop-qr {
width: 96px; height: 96px;
display: block; object-fit: contain; background: #fff;
}
.social__pop-cap {
display: block; font-size: 11px; color: #666;
text-align: center; margin-top: 6px; line-height: 1.4; font-weight: 500;
}
.social__pop::after {
content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 6px solid transparent; border-top-color: #fff;
}
/* ---------- 内页标题区（标题 + 查看更多按钮）：窄屏改为竖排 ---------- */
@media (max-width: 640px) {
.dishes-header--stack { flex-direction: column; align-items: flex-start; }
.dishes-header--stack .btn--more { align-self: flex-start; margin-top: var(--sp-2); }
}
/* ---------- 主厨团队：右侧厨师卡分页（左侧创始人卡片固定，不参与翻页） ---------- */
/* 右列只放 6 张/页的卡片网格，靠 .founder 的 align-items:stretch 与左侧创始人卡片等高等 */
.chef-pages { display: grid; }
.chef-page { grid-area: 1 / 1; display: none; }
.chef-page.is-active { display: grid; }
/* 翻页条独立成行：不计入左右等高，右缘与右侧卡片网格对齐 */
.chef-pager-bar { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-8); margin-top: var(--sp-5); }
.chef-pager-bar .honor-pager { grid-column: 2; justify-content: flex-end; margin-top: 0; }
/* 厨师照片色块占位（待补真人实拍：去掉 --ph 修饰类、内部放 ![]()
即可） */
.info-list--units .item__photo--ph {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #241b18 0%, #4a1216 55%, #6b1a1d 100%);
}
.info-list--units .item__photo--ph::after {
content: "待补照片";
font-family: var(--font-serif);
font-size: var(--fs-xs);
letter-spacing: 3px;
color: rgba(255, 255, 255, .45);
}
@media (max-width: 1024px) {
.chef-pager-bar { grid-template-columns: 1fr; }
.chef-pager-bar .honor-pager { grid-column: 1; justify-content: center; }
}
/* ---------- 招牌菜品子页：菜品卡分页（复用 chef-pages 重叠模式）+ 色块占位 ---------- */
.dish-pages { display: grid; }
.dish-page { grid-area: 1 / 1; display: none; }
.dish-page.is-active { display: grid; }
/* 色块占位卡（待补真实菜品：去掉 --ph 修饰类、内部放真实 ![]()
即可） */
.dish-card--ph .dish-card__thumb {
background: linear-gradient(160deg, #241b18 0%, #4a1216 55%, #6b1a1d 100%);
}
.dish-card--ph .dish-card__thumb::after {
content: "待补菜品";
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-serif);
font-size: var(--fs-sm);
letter-spacing: 4px;
color: rgba(255, 255, 255, .5);
}
.dish-card--ph .dish-card__title { color: var(--color-stone-light); }
.dish-card--ph .dish-card__body { opacity: .7; }
/* 宴席菜单：详情菜品区块 */
.banquet-meta { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--color-stone); line-height: 1.8; }
.banquet-meta strong { color: var(--color-brand); font-weight: 700; }
.banquet-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--color-stone-light); }
/* 宴席菜单：可展开 / 收起的列表行 */
.banquet-table { width: 100%; }
.banquet-row { cursor: pointer; }
/* 悬停 / 展开时整行高亮（下探到 td 层级，覆盖通用 .table tr:hover 的悬停色） */
.banquet-table .banquet-row:hover td,
.banquet-table .banquet-row.is-open td { background: var(--color-brand-soft); }
.banquet-row .banquet-name { font-family: var(--font-serif); font-weight: 700; color: var(--color-ink); white-space: nowrap; }
/* 人均列：金额靠左、展开按钮推到该行最右侧 */
.banquet-cost { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); white-space: nowrap; }
.banquet-toggle {
display: inline-block;
color: var(--color-brand); font-weight: 700; font-size: 1.05em;
transition: transform var(--duration-fast);
}
.banquet-row.is-open .banquet-toggle { transform: rotate(45deg); }
/* 展开后的详情区与上方展开的这一行同色，并去掉中间分隔线，视觉连成一体 */
.banquet-table .banquet-row.is-open td { border-bottom-color: transparent; }
.banquet-table tr.banquet-detail > td { background: var(--color-brand-soft); padding: var(--sp-6) var(--sp-4); }
.banquet-detail .dish-card { height: auto; }
/* ---------- 招牌菜品：长图主题横幅（图片 + 遮罩 + 文字，左右交替） ---------- */
.dish-banner {
position: relative; display: block; overflow: hidden;
min-height: 380px; color: #fff; background: var(--color-dark);
}
.dish-banner__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block; transition: transform .7s ease;
}
.dish-banner:hover .dish-banner__img { transform: scale(1.04); }
.dish-banner__mask {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
padding: var(--sp-8) var(--sp-10) var(--sp-8) 50%;
background: linear-gradient(90deg, rgba(18,10,10,.30) 0%, rgba(18,10,10,.90) 100%);
}
.dish-banner--reverse .dish-banner__mask {
padding: var(--sp-8) 50% var(--sp-8) var(--sp-10);
background: linear-gradient(270deg, rgba(18,10,10,.30) 0%, rgba(18,10,10,.90) 100%);
}
.dish-banner__eyebrow {
font-size: var(--fs-sm); letter-spacing: 4px; color: var(--color-accent);
font-weight: var(--fw-medium); margin-bottom: var(--sp-4);
}
.dish-banner__eyebrow::before { content: ""; display: block; width: 32px; height: 2px; background: var(--color-brand); margin-bottom: var(--sp-3); }
.dish-banner__title {
font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2.25rem);
font-weight: 700; color: #fff; letter-spacing: 2px; line-height: 1.25; margin: 0 0 var(--sp-3);
}
.dish-banner__desc { font-size: var(--fs-sm); color: #d8cfc1; line-height: 1.9; margin: 0 0 var(--sp-6); max-width: 440px; }
@media (max-width: 768px) {
.dish-banner { min-height: 0; }
.dish-banner__img { position: relative; height: 240px; }
.dish-banner__mask,
.dish-banner--reverse .dish-banner__mask {
position: relative; width: 100%; left: auto; right: auto;
padding: var(--sp-6) var(--sp-6) var(--sp-8);
background: linear-gradient(180deg, rgba(18,10,10,.94), rgba(18,10,10,.98));
}
}
/* ---------- 院落图集 / 院落视频：两列网格缩略图（点击放大，放大后可翻页） ----------
直接复用站内 .video-frame 卡片样式（16:9 媒体 + 底部 caption 角标 + 金色描边），
.media-item 只补充「可点击 / 可聚焦」的交互态；放大后的标题与说明由 data-* 传入 lightbox。 */
.media-list { gap: var(--sp-4); margin-top: var(--sp-8); }
.media-item { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.media-item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.media-item:hover figcaption { color: #fff; background: linear-gradient(90deg, rgba(205,21,29,.85), transparent); }
.media-item:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
.media-item__play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none; }
.media-item__play-btn { position: relative; display: block; width: 48px; height: 48px; background: rgba(200,155,60,.2); border: 1px solid rgba(200,155,60,.6); backdrop-filter: blur(4px); }
.media-item__play-btn::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-left: 14px solid var(--color-accent); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
/* ---------- 放大查看浮层（Lightbox）：图片/视频全屏查看，支持上下翻页 ---------- */
body.mediabox-open { overflow: hidden; }
.mediabox {
position: fixed; inset: 0; z-index: 9999; display: none;
align-items: center; justify-content: center;
padding: var(--sp-16) var(--sp-8); background: rgba(9,7,7,.94);
}
.mediabox.is-open { display: flex; }
.mediabox__stage { position: relative; width: min(1100px, 100%); display: flex; flex-direction: column; gap: var(--sp-4); }
.mediabox__frame {
position: relative; display: flex; align-items: center; justify-content: center;
min-height: 320px; background: #000; border: 1px solid rgba(200,155,60,.3);
}
.mediabox__frame img,
.mediabox__frame video { display: block; max-width: 100%; max-height: 68vh; width: auto; height: auto; object-fit: contain; }
.mediabox__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); color: #e8e0d2; }
.mediabox__cap { font-family: var(--font-serif); font-size: var(--fs-md); letter-spacing: 1px; color: #fff; }
.mediabox__cap small { display: block; margin-top: 6px; font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing: 0; font-weight: 400; color: #b8b0a3; line-height: 1.7; }
.mediabox__navs { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.mediabox__btn {
min-width: 92px; height: 40px; padding: 0 var(--sp-4);
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid rgba(232,224,210,.4); color: #e8e0d2;
font-family: inherit; font-size: var(--fs-sm); letter-spacing: 1px; cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mediabox__btn:hover:not(:disabled) { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.mediabox__btn:disabled { opacity: .35; cursor: not-allowed; }
.mediabox__counter { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 2px; color: var(--color-accent); }
.mediabox__close {
position: absolute; top: -46px; right: 0; width: 40px; height: 40px;
display: grid; place-items: center; font-size: 18px; line-height: 1; cursor: pointer;
background: transparent; border: 1px solid rgba(232,224,210,.4); color: #e8e0d2;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mediabox__close:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.mediabox__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer;
font-size: 24px; line-height: 1; color: var(--color-accent);
background: rgba(18,18,18,.55); border: 1px solid rgba(200,155,60,.5);
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mediabox__arrow--prev { left: -74px; }
.mediabox__arrow--next { right: -74px; }
.mediabox__arrow:hover:not(:disabled) { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.mediabox__arrow:disabled { opacity: .3; cursor: not-allowed; }
@media (max-width: 1280px) {
.mediabox__arrow--prev { left: 8px; }
.mediabox__arrow--next { right: 8px; }
}
@media (max-width: 768px) {
.mediabox { padding: var(--sp-12) var(--sp-3); }
.mediabox__arrow { display: none; }
.mediabox__bar { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}
/* 院落图集 / 院落视频：分页 + 待补色块占位 */
.media-page { display: none; }
.media-page.is-active { display: block; }
.media-item--ph { cursor: default; background: repeating-linear-gradient(45deg, #e8e1d6, #e8e1d6 8px, #efe9dd 8px, #efe9dd 16px); border: 1px dashed #c8c0b3; }
.media-item--ph:hover { transform: none; box-shadow: none; border-color: #c8c0b3; }
.media-item--ph figcaption { color: #8f887d; background: transparent; font-size: var(--fs-md); left: 50%; transform: translateX(-50%); bottom: 50%; margin-bottom: -10px; padding: 0; letter-spacing: 6px; }
/* =============================================================
新闻动态子页（行业新闻 / 公司动态）
列表行 = 日期块（hover 变朱红并出右指箭头）+ 标题/浏览量/摘要 + 缩略图
详情页 = 正文 + 免责声明 + 分享 + 上一篇下一篇 + 右侧热搜榜
============================================================= */
.news-rows { margin-top: var(--sp-8); border-top: 1px solid var(--color-line); }
.news-row {
position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr) 300px;
gap: var(--sp-6); align-items: center;
padding: var(--sp-6) 0; border-bottom: 1px solid var(--color-line);
}
.news-row__date {
position: relative; align-self: stretch; display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: var(--sp-4) var(--sp-2);
background: var(--color-paper); transition: background var(--duration);
}
.news-row__date::after {
content: ""; position: absolute; left: 100%; top: 50%; margin-top: -15px;
border-left: 15px solid var(--color-paper);
border-top: 15px solid transparent; border-bottom: 15px solid transparent;
transition: border-left-color var(--duration);
}
.news-row__day { font-family: var(--font-serif); font-size: 2.625rem; font-weight: 700; line-height: 1; color: var(--color-ink); transition: color var(--duration); }
.news-row__ym { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-stone); margin-top: var(--sp-2); transition: color var(--duration); }
.news-row__body { min-width: 0; }
.news-row__title { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; color: var(--color-ink); margin: 0 0 var(--sp-3); transition: color var(--duration); }
.news-row__meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-3); font-size: var(--fs-xs); color: var(--color-stone-light); }
.news-row__excerpt { font-size: var(--fs-sm); line-height: 1.9; color: var(--color-stone); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.news-row__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-dark); }
.news-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) ease; }
.news-row:hover .news-row__date { background: var(--color-brand); }
.news-row:hover .news-row__date::after { border-left-color: var(--color-brand); }
.news-row:hover .news-row__day,
.news-row:hover .news-row__ym { color: #fff; }
.news-row:hover .news-row__title { color: var(--color-brand); }
.news-row:hover .news-row__thumb img { transform: scale(1.05); }
@media (max-width: 768px) {
.news-row { grid-template-columns: 86px minmax(0, 1fr); gap: var(--sp-4); }
.news-row__day { font-size: 2rem; }
.news-row__thumb { grid-column: 1 / -1; }
}
/* 占位行（补齐到 12 条时使用，不可点击） */
.news-row--ph { cursor: default; }
.news-row--ph .news-row__date { background: repeating-linear-gradient(45deg, #e8e1d6, #e8e1d6 8px, #efe9dd 8px, #efe9dd 16px); }
.news-row--ph .news-row__date::after { border-left-color: #efe9dd; }
.news-row--ph .news-row__day,
.news-row--ph .news-row__ym { color: #b8b0a3; }
.news-row--ph .news-row__title { color: #b8b0a3; }
.news-row--ph .news-row__excerpt { color: #c0b8ab; }
.news-row--ph .news-row__meta { visibility: hidden; }
.news-row--ph .news-row__thumb { display: grid; place-items: center; border: 1px dashed #c8c0b3; background: repeating-linear-gradient(45deg, #e8e1d6, #e8e1d6 8px, #efe9dd 8px, #efe9dd 16px); }
.news-row--ph .news-row__thumb::after { content: "待补"; font-family: var(--font-serif); font-size: var(--fs-md); letter-spacing: 6px; color: #a9a196; }
/* 列表分页 */
.news-page { display: none; }
.news-page.is-active { display: block; }
/* 详情页：正文 + 右侧热搜榜 */
.news-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; margin-top: var(--sp-8); }
.article { min-width: 0; }
.article__title { margin: 0 0 var(--sp-4); font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1.4; letter-spacing: 1px; color: var(--color-ink); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--color-stone); }
.article__meta b { font-weight: var(--fw-regular); color: var(--color-ink); }
.article__meta a { color: var(--color-brand); }
.article__figure { margin: var(--sp-6) 0; }
.article__figure img { display: block; width: 100%; }
.article__figure figcaption { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-xs); color: var(--color-stone-light); }
.article__body { font-size: var(--fs-base); line-height: 2.05; color: var(--color-ink); }
.article__body p { margin: 0 0 var(--sp-5); text-align: justify; }
.article__body p:last-child { margin-bottom: 0; }
.article__disclaimer { margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5); background: var(--color-paper); border: 1px solid var(--color-line); font-size: var(--fs-xs); line-height: 1.95; color: var(--color-stone); }
.article__disclaimer h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 1px; color: var(--color-brand); }
.article__disclaimer ol { margin: 0; padding-left: 1.3em; }
.article__disclaimer li { margin-bottom: 4px; }
.article__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.article__actions-label { margin-right: var(--sp-1); font-size: var(--fs-sm); color: var(--color-stone); }
.article__share { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--sp-4); border: 1px solid var(--color-line); background: var(--color-paper-2); font-size: var(--fs-sm); color: var(--color-ink); transition: all var(--duration-fast); }
.article__share:hover { border-color: var(--color-brand); background: var(--color-brand-50); color: var(--color-brand); }
.article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--color-line); }
.article__nav-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--sp-4); border: 1px solid var(--color-line); background: var(--color-paper-2); transition: all var(--duration-fast); }
.article__nav-item:hover { border-color: var(--color-brand); background: var(--color-brand-50); }
.article__nav-item span { font-size: var(--fs-xs); letter-spacing: 1px; color: var(--color-stone-light); }
.article__nav-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-serif); font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); }
.article__nav-item--next { text-align: right; }
.article__nav-item.is-empty { visibility: hidden; }
/* 热搜榜 */
.hot-list { border: 1px solid var(--color-line); background: var(--color-paper-2); }
.hot-list__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-line); background: var(--color-paper); }
.hot-list__head h3 { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 700; letter-spacing: 2px; color: var(--color-ink); }
.hot-list__head::before { content: ""; width: 14px; height: 14px; background: var(--color-brand); }
.hot-list__item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px dashed var(--color-line); }
.hot-list__item:last-child { border-bottom: none; }
.hot-list__rank { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; color: var(--color-stone-light); }
.hot-list__item:nth-child(-n+3) .hot-list__rank { color: var(--color-brand); }
.hot-list__title { display: block; margin-bottom: 6px; font-size: var(--fs-sm); line-height: 1.7; color: var(--color-ink); transition: color var(--duration-fast); }
.hot-list__item:hover .hot-list__title { color: var(--color-brand); }
.hot-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-stone-light); }
.hot-list__tag { padding: 2px 8px; font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 1px; color: #fff; background: var(--color-brand); }
.hot-list__tag--company { background: var(--color-accent); }
@media (max-width: 1024px) {
.news-detail { grid-template-columns: 1fr; gap: var(--sp-6); }
.article__nav { grid-template-columns: 1fr; }
}
/* =============================================================
联系我们页：扫码关注（微信 / 抖音 / 小红书 三码横排）+ 门店地址两列（带定位图标）
============================================================= */
.qr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.qr-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.qr-item img {
display: block; width: 100%; max-width: 118px; aspect-ratio: 1 / 1;
padding: 5px; background: #fff; border: 1px solid var(--color-line); object-fit: contain;
}
.qr-item figcaption { font-size: var(--fs-xs); letter-spacing: .5px; color: var(--color-stone); }
.addr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; list-style: none; }
.addr-grid li {
display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 7px; align-items: start;
font-size: var(--fs-sm); line-height: 1.8; color: var(--color-stone);
}
.addr-grid__icon { width: 15px; height: 15px; margin-top: 5px; flex: none; color: var(--color-brand); }
@media (max-width: 640px) {
.addr-grid { grid-template-columns: 1fr; }
}
/* =============================================================
滚动揭示动效（首页模块进入动效 · opt-in）
- 由 与 prefers-reduced-motion 双重保护：
JS 关 / 用户偏好减弱动效 → 直接显示，无任何位移
- 方向：默认 fade-up；reveal--left/--right 横向；reveal--scale 缩放
- 错峰：父元素加 .reveal-stagger，子元素按 nth-child 80ms 递增
- 触发：scripts/site.js → initReveal（IntersectionObserver）
============================================================= */
@keyframes reveal-in {
from { opacity: 0; transform: translate3d(0, 24px, 0); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-in-left {
from { opacity: 0; transform: translate3d(-32px, 0, 0); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-in-right {
from { opacity: 0; transform: translate3d(32px, 0, 0); }
to { opacity: 1; transform: none; }
}
/* 窄屏收敛：位移量按视口减半，避免 reveal 初始态把元素推出视口造成横向溢出 */
@keyframes reveal-in-sm {
from { opacity: 0; transform: translate3d(0, 16px, 0); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-in-left-sm {
from { opacity: 0; transform: translate3d(-12px, 0, 0); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-in-right-sm {
from { opacity: 0; transform: translate3d(12px, 0, 0); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-in-scale {
from { opacity: 0; transform: scale(.94); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
.js .reveal {
opacity: 0;
animation: reveal-in .8s cubic-bezier(.2,.7,.2,1) both;
animation-play-state: paused;
}
.js .reveal--left { animation-name: reveal-in-left; }
.js .reveal--right { animation-name: reveal-in-right; }
.js .reveal--scale { animation-name: reveal-in-scale; }
.js .reveal.is-visible { animation-play-state: running; }
/* 错峰：父级加 .reveal-stagger，子元素用 animation-delay 递增
⚠️ 刻意用 animation 而非 transition —— 若用 transition 会覆盖子组件
自身的 transition（如 .dish-card 的 250ms hover），导致 hover 动效丢失 */
.js .reveal-stagger > * {
opacity: 0;
animation: reveal-in .7s cubic-bezier(.2,.7,.2,1) both;
animation-play-state: paused;
}
.js .reveal-stagger.is-visible > * { animation-play-state: running; }
.js .reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.js .reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 80ms; }
.js .reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 160ms; }
.js .reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 240ms; }
.js .reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 320ms; }
.js .reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 400ms; }
.js .reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 480ms; }
.js .reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 560ms; }
}
/* 窄屏动效位移收敛（≤1000px）：横向位移 32px→12px，纵向 24px→16px，
避免动画初始帧把元素推出视口产生横向滚动条 */
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
.js .reveal:not(.reveal--scale) { animation-name: reveal-in-sm; }
.js .reveal--left { animation-name: reveal-in-left-sm; }
.js .reveal--right { animation-name: reveal-in-right-sm; }
.js .reveal--scale { animation-name: reveal-in-scale; }
.js .reveal-stagger > * { animation-name: reveal-in-sm; }
}
/* =============================================================
门店内页（store-*.html）
- .store-profile 基础信息：左图右档
- .store-map 位置导航：地图色块占位 + 到店方式
- .card__link 整卡可点（stretched link，避开卡内 tel 链接）
⚠️ 深底区块内的文字一律用 承载，不用
/
——
.section--dark p 与 .section--dark h1,h2,h3 权重 (0,1,1)
会盖掉本块 (0,1,0) 的颜色，导致白底白字 / 深底浅字失效
============================================================= */
/* ---- 基础信息 ---- */
.store-profile { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-10); align-items: start; }
.store-profile__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #16110f 0%, #5a0d10 100%); }
.store-profile__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.store-profile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,18,18,.5), transparent 55%); }
.store-profile__cap { position: absolute; left: var(--sp-5); bottom: var(--sp-5); z-index: 1; font-family: var(--font-serif); font-size: var(--fs-lg); color: #fff; letter-spacing: 4px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.store-profile__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.store-profile__list { border-top: 1px solid var(--color-line); }
.store-profile__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-line); align-items: baseline; }
.store-profile__k { font-family: var(--font-serif); color: var(--color-brand); font-size: var(--fs-sm); letter-spacing: 2px; }
.store-profile__v { color: var(--color-ink); font-size: var(--fs-base); line-height: 1.7; }
.store-profile__v a { color: var(--color-brand); border-bottom: 1px solid var(--color-brand-soft); }
.store-profile__v a:hover { color: var(--color-brand-strong); border-bottom-color: var(--color-brand); }
.store-profile__row--tel .store-profile__v { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 700; color: var(--color-brand); }
.store-profile__row--tel .store-profile__v a { border-bottom: 0; }
.store-profile__tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
/* ---- 位置导航 · 地图色块占位 ---- */
.store-map { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-10); align-items: center; }
.store-map__ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(200,155,60,.35); background: linear-gradient(135deg, #1e1e1e 0%, #2a1416 55%, #3a2418 100%); display: grid; place-items: center; }
.store-map__ph::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(200,155,60,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(200,155,60,.09) 1px, transparent 1px); background-size: 48px 48px; }
.store-map__pin { position: relative; z-index: 1; text-align: center; color: var(--color-accent); }
.store-map__pin svg { width: 52px; height: 52px; margin: 0 auto var(--sp-3); display: block; }
.store-map__label { font-family: var(--font-serif); font-size: var(--fs-lg); color: #f5f0e8; letter-spacing: 4px; }
.store-map__hint { margin-top: var(--sp-2); font-size: var(--fs-xs); color: #8f887d; letter-spacing: 1px; }
.store-map__note { position: absolute; left: var(--sp-4); bottom: var(--sp-4); z-index: 2; font-size: var(--fs-xs); color: #8f887d; letter-spacing: 1px; }
.store-map__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.store-map__ways { display: grid; gap: var(--sp-4); }
.store-map__way { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.12); }
.store-map__way:last-child { border-bottom: 0; padding-bottom: 0; }
.store-map__way-ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(200,155,60,.45); color: var(--color-accent); }
.store-map__way-ic svg { width: 22px; height: 22px; }
.store-map__way-t { font-family: var(--font-serif); font-size: var(--fs-md); color: #fff; margin-bottom: 4px; letter-spacing: 1px; }
.store-map__way-d { font-size: var(--fs-sm); color: #b8b0a3; line-height: 1.8; }
/* ---- 门店卡片 · 整卡可点 ---- */
.card { position: relative; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.store-meta__row--tel, .store-meta__row--tel a { position: relative; z-index: 2; }
.card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-brand); transition: gap var(--duration-fast); }
.card:hover .card__more { gap: 12px; }
@media (max-width: 1024px) {
.store-profile, .store-map { grid-template-columns: 1fr; gap: var(--sp-8); }
}
@media (max-width: 640px) {
.store-profile__row { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-3); }
.store-map__way { grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-3); }
.store-map__way-ic { width: 36px; height: 36px; }
}
/* ---------------- 页脚响应式（窄屏 4 列挤压 → 阶梯降列，修复长邮箱撑破） ---------------- */
/* ⚠️ 列宽一律用 minmax(0, Nfr)：否则 1fr 的隐含最小值 = min-content，
会被页脚 logo（height:56px + width:auto → 实测 310px 宽）撑破，造成整站横向滚动 */
.footer__grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.2fr);
gap: var(--sp-8); align-items: start; }
.footer__grid > div > p, .footer__bottom { overflow-wrap: anywhere; word-break: break-word; }
/* 品牌列 logo：窄屏按比例收缩（覆盖内联 height:56px，避免被 max-width 压扁变形） */
@media (max-width: 640px) {
.footer__grid > div:first-child > a > img {
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: 56px;
}
}
@media (max-width: 1024px) {
.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); }
}
@media (max-width: 640px) {
.footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.footer > .container > div:first-child { max-width: none; }
}
/* =============================================================
响应式统一收口 · 窄屏收敛
全站唯一断点阶梯：1024 → 768 → 640
· 1024：多栏降为单栏 / 双栏
· 768 ：栅格归 1、导航转移动端菜单
· 640 ：手机竖屏细节（固定高度改比例、字号与留白收紧）
============================================================= */
/* ---- ≤1440：轮播箭头收进卡片内 ----
默认 left:-77px / right:-12px 是「悬浮在卡片外侧」的桌面摆法，需要卡片左侧留足 77px。
容器顶满视口后余量消失，箭头被裁到屏幕外（实测 1280px 时 left=-13、1024px 时 left=-53，
按钮完全看不见）；实测 1440px 悬浮位仍有 35px 余量，故以 1440 为切换点。 */
@media (max-width: 1440px) {
.court-arrow--prev { left: 8px; }
.court-arrow--next { right: 8px; }
}
/* ---- ≤1024：多栏降栏 ---- */
@media (max-width: 1024px) {
/* 表格：nowrap 的菜名 / 人均列会把表格撑破容器 → 固定布局 + 允许折行 */
.table { table-layout: fixed; }
.table th, .table td { padding: var(--sp-3); }
.banquet-row .banquet-name,
.banquet-cost { white-space: normal; word-break: break-word; }
}
/* ---- ≤768：栅格归 1，固定高度改比例 ---- */
@media (max-width: 768px) {
/* 角标字号过大易压住画面，同步收紧 */
.news-feature__cap { font-size: var(--fs-md); letter-spacing: 3px; right: 12px; bottom: 10px; }
.court-slide__cap { font-size: var(--fs-md); letter-spacing: 2px; left: 10px; bottom: 8px; }
/* 固定 180px 在单列（宽 ~327）下比例偏矮 → 改 16:9 */
.video-card__cover { height: auto; aspect-ratio: 16 / 9; }
/* 固定高度在单列下留白过多，按视口收敛 */
.brand-figure { height: 260px; }
.page-hero { min-height: 145px; padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
/* 内页 banner 下方小导航：手机端单行横滑（不再换行），可左右滑动 */
.page-subnav .container { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.page-subnav .container::-webkit-scrollbar { display: none; }
.page-subnav a { flex: 0 0 auto; white-space: nowrap; }
.banner__subtitle { font-size: var(--fs-md); letter-spacing: 1px; margin-bottom: var(--sp-6); }
.banner__inner { padding: var(--sp-6) 0; transform: none; }
/* 首页院落↔新闻之间 104+104=208px 的留白在窄屏过于空旷 → 收敛到 64px */
#court { padding-bottom: var(--sp-16); }
#news { padding-top: var(--sp-16); }
/* 首页 Banner：手机端不占满整屏，等比例缩小 */
.banner { min-height: 0; }
.banner--full { min-height: 0; height: 62vh; }
/* 首页招牌菜品 / 央视报道：手机端标题独占整行，查看更多按钮移到标题下方 */
#dishes .dishes-header,
#cctv .dishes-header { flex-direction: column; align-items: flex-start; }
#dishes .dishes-header .btn--more,
#cctv .dishes-header .btn--more { align-self: flex-start; margin-top: var(--sp-2); }
/* 手机端页脚：仅留 logo / 联系方式 / 二维码，去掉导航列、栏目列与介绍文字 */
.footer__grid > div:nth-child(2),
.footer__grid > div:nth-child(3) { display: none; }
.footer__grid > div:first-child > p { display: none; }
.footer-socials { flex-wrap: wrap; gap: var(--sp-5); }
/* 二维码直接展开显示（不再 hover 弹层） */
.social__pop {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; background: transparent; padding: 0; margin: 0; pointer-events: auto;
}
.social__pop::after { display: none; }
.social__icon { display: none; }
.social__pop-qr { width: 88px; height: 88px; border-radius: 4px; }
}
/* ---- ≤640：手机竖屏细节 ---- */
@media (max-width: 640px) {
/* 数据条两列时正文仅剩 ~88px（装饰图占 78px）→ 单列更可读 */
.brand-stats { grid-template-columns: minmax(0, 1fr); }
.court-carousel { height: 260px; }
.brand-figure { height: 220px; }
/* 分页条按钮不换行会挤出容器 */
.honor-pager { flex-wrap: wrap; }
/* 表格进一步收紧 */
.table { font-size: var(--fs-xs); }
.table th, .table td { padding: var(--sp-2); }
/* 面包屑与页脚：窄屏内边距减半，换取正文宽度 */
.container { padding: 0 var(--sp-5); }
.notfound { padding: var(--sp-16) 0 var(--sp-12); }
}
/* =============================================================
首页提亮（R41·客户反馈「banner / 底部偏暗」）
仅作用于 ，内页保持原样；
客户确认效果后，把 .page-home 前缀去掉即可全站生效。
============================================================= */
/* ---- 首页 Banner 主遮罩：R63 按客户需求隐藏（不再压暗画面，完全露出 banner 图） ---- */
.page--home .banner::after {
display: none; /* 主遮罩层整体隐藏，仅留 .banner::before 金线纹理 */
}
.page--home .banner::before { opacity: .4; } /* .5 → .4：斜纹金线退后一点，不抢画面 */
/* 文字：遮罩变浅后补偿对比——提亮 + 轻投影 */
.page--home .banner__title-img {
filter: drop-shadow(0 3px 14px rgba(12,6,4,.55));
}
.page--home .banner__subtitle {
color: #ece4d6; /* #d8cfc1 → 提亮 */
text-shadow: 0 2px 12px rgba(12,6,4,.6);
}
.page--home .banner__eyebrow {
text-shadow: 0 1px 10px rgba(12,6,4,.7);
}
.page--home .banner__scroll { color: rgba(255,255,255,.92); }
/* ---- 首页底部：R48 起与内页完全一致（朱红版已取消），不再有首页专属页脚规则 ---- */
/* =============================================================
全站页脚改白底（R42 草案 → R47 全站同步）
白底上必须处理三处隐形风险：白色 logo / 白字标题 h4 / 灰色社交图标
R48：首页页脚取消朱红，全站统一白底 + 底部浅金剪影(50%)，不再有首页特例
（R43 金剪影版已撤销：图是透明底，压白底会隐形；.footer-skyline 通用类保留备用）
============================================================= */
/* 金剪影装饰带（R43 留下，供后续其他页面复用；about 页当前不引用）
图为透明底金色山峦剪影，需叠深色底才可见 */
.footer-skyline {
display: block; width: 100%; height: auto;
margin-top: var(--sp-6);
pointer-events: none; user-select: none;
}
.footer {
background: #fff;
color: #5a5550; /* 灰米 #b8b0a3 在白底只有 1.9:1 → 改青砖灰 */
border-top: 1px solid var(--color-line); /* 白底失去色差，靠细线界定边界 */
}
.footer h4 { color: #1a1a1a; } /* 原 #fff 白底白字 → 看不见 */
.footer a { color: #5a5550; }
.footer a:hover { color: var(--color-brand); } /* 白底上朱红 hover 更合适 */
.footer__bottom {
border-top-color: var(--color-line);
color: #5a5550; /* R45: #6b6560 压底部剪影较深处仅 4.11:1 → 提到与正文同色 5.17:1 */
}
/* 社交图标：内联 fill=#bababa 灰在白底仅 2.0:1 → 压深 */
.footer .social__icon { border-color: rgba(26,26,26,.25); }
.footer .social__icon svg path { fill: #5a5550; }
.footer .social__icon:hover { background: rgba(26,26,26,.06); }
/* 底部浅金剪影背景层（R45 · R47 起全站）：1920×145 纯白底 JPG，四角实测 (255,255,255)，
与 #fff 页脚无缝融合；贴 bottom 对齐，背景层不占布局 → 页脚高度不变
R46：剪影不透明度 50% —— 背景图无 opacity 属性，用叠 50% 白遮罩等效实现
（底色纯白，叠加后色值 = 图×0.5 + 白×0.5，与 opacity:.5 数学等价；
想调其他数值：遮罩 alpha = 1 − 目标不透明度） */
.footer {
background:
linear-gradient(rgba(255,255,255,.50), rgba(255,255,255,.50)),
url('../img/footer-hill-light.jpg') bottom center / 100% auto no-repeat,
#fff;
}
/* ---- R49 首页导航白色 70% + 深字 → R51 全站同步 → R52 内页改实心纯白 ----
内页：实心纯白 #fff（不加透明度、无模糊视觉），深色字对比天然充足。
首页：白色 70% + 模糊（R49 定稿，覆盖在下面的全局实心白之上，压在深色 banner 上更通透）。 */
.nav,
.nav.is-scrolled {
background-color: #fff;
border-bottom-color: rgba(0,0,0,.08);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
backdrop-filter: blur(12px) saturate(1.1);
}
/* ⚠️ 首页维持 70%（R49 定稿）：用 .page--home 提高特异性覆盖上面的全局实心白 */
.page--home .nav,
.page--home .nav.is-scrolled {
background-color: rgba(255,255,255,.70);
}
.nav .nav__menu a { color: var(--color-ink); text-shadow: none; }
.nav .nav__menu a:hover,
.nav .nav__menu a.is-active { color: var(--color-brand); }
/* 「央视报道」金色标记：金色在浅底上对比天然吃亏 ——
70% 白叠加在深色画面上最不利底色 ≈(178,178,178)，#c89b3c 仅 2.6:1、#8a6620 仅 2.47:1，
逐级加深到 #554010 才达标 4.65:1（保留金棕调性，是浅底上金色可读的代价） */
.nav .nav__menu a.is-new { color: #554010; }
/* 下拉菜单：白底 + 深字（默认深墨底 + 浅字，需覆盖）
⚠️ border-top 金色顶边是全站设计，R49 用 border 简写时误丢失，此处补回 */
.nav__dropdown {
background: #fff;
border: 1px solid var(--color-line);
border-top: 2px solid var(--color-accent);
box-shadow: 0 14px 30px rgba(26,26,26,.18);
}
/* ⚠️ 两处坑：
1) 全站 .nav.is-scrolled .nav__dropdown a 会把下拉字拉回浅色 → 必须同特异性覆盖
2) .nav__dropdown 是 .nav__menu 的后代，`.nav .nav__menu a`(0,2,1) 会连带命中下拉链接，
只写 `.nav__dropdown a`(0,1,1) 会被它压过 → 必须提高特异性到 (0,3,1) 才稳定一致 */
.nav .nav__menu .nav__dropdown a,
.nav.is-scrolled .nav__menu .nav__dropdown a { color: var(--color-ink); }
.nav__dropdown a:hover {
color: var(--color-brand);
background: var(--color-brand-50);
}
/* 移动端汉堡按钮：默认 #fff 白底上隐形 → 改深色 */
.nav__toggle { color: var(--color-ink); border-color: rgba(26,26,26,.25); }
/* R89/R90 移动端二级面板（必须放文件末尾）：
R49 的下拉面板规则（白底+金顶边+投影）与本断点内 1057 行的 transparent 重置
同特异性、但源码位置靠后 → 会盖掉移动端重置，展开二级时残留白色面板。
在此（更靠后）再重置一次，仅 ≤1024px 生效，桌面下拉白底面板不受影响。
R90 补充（用户截图）：二级高亮底通铺到面板边缘（参考蓝框）→ 负外边距抵消
.nav__menu 的左右 12px 内边距，a 的左内边距同步 +12px 保持一个汉字缩进不变；
二级默认字色显式定为深墨 var(--color-ink)（此前被 R49 的 (0,3,1) 规则间接决定） */
@media (max-width: 1024px) {
.nav__dropdown {
background: transparent;
border: none;
box-shadow: none;
margin-left: calc(-1 * var(--sp-3));
margin-right: calc(-1 * var(--sp-3));
}
.nav .nav__menu .nav__dropdown a {
color: var(--color-ink);
padding: 11px calc(12px + var(--sp-3)) 11px calc(12px + var(--sp-3) + 1em);
}
.nav .nav__menu .nav__dropdown a:hover,
.nav .nav__menu .nav__dropdown a.is-active {
color: var(--color-brand);
background: rgba(205, 21, 29, .08); /* 选中：淡红色底，通铺整行 */
}
/* R90 关键修复：真实点按（tap）会让一级 获得焦点 → 命中桌面 :focus-within 规则
`.nav__menu > li:focus-within > .nav__dropdown { transform: translateX(-50%) }`，
特异性 (0,3,0) 高于断点内重置 (0,1,0) → 二级面板整体左移 50% 出屏，内容全部不可见。
此处同特异性、更靠后，覆盖回 transform:none（悬停/焦点态一并处理） */
.nav__menu > li:hover > .nav__dropdown,
.nav__menu > li:focus-within > .nav__dropdown {
transform: none;
opacity: 1;
visibility: visible;
}
}