/* 全站共用导航。放在页面样式之后，统一品牌排版与双层导航的高度。 */
:root {
    --site-nav-height: 72px;
    --site-subnav-height: 52px;
    --cities-nav-height: var(--site-nav-height);
    --site-nav-font: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
}
html { scrollbar-gutter: stable; }

body #navbar.navbar {
    --nav-ink: #193b38;
    --nav-muted: #52665d;
    --nav-accent: #936b35;
    --nav-line: rgba(25, 59, 56, .3);
    --nav-text-shadow: none;
    height: var(--site-nav-height) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background-color .3s ease, box-shadow .3s ease;
}
/* 照片首屏使用浅字；宣纸首屏使用深字。滚动只改变颜色，不改变尺寸。 */
body.home-page #navbar.navbar:not(.scrolled),
body.cd-page #navbar.navbar:not(.scrolled),
body.spot-page #navbar.navbar:not(.scrolled),
body.lh-page #navbar.navbar:not(.scrolled),
body.gc-page:not(.gc-sub) #navbar.navbar:not(.scrolled),
body #navbar.navbar.scrolled {
    --nav-ink: #f7f1e5;
    --nav-muted: #d8cbb2;
    --nav-accent: #e5c993;
    --nav-line: rgba(218, 192, 138, .38);
}
body.home-page #navbar.navbar:not(.scrolled),
body.cd-page #navbar.navbar:not(.scrolled),
body.spot-page #navbar.navbar:not(.scrolled),
body.lh-page #navbar.navbar:not(.scrolled),
body.gc-page:not(.gc-sub) #navbar.navbar:not(.scrolled) {
    --nav-text-shadow: 0 1px 8px rgba(12, 24, 20, .5);
}
body #navbar.navbar.scrolled {
    background: rgba(24, 49, 44, .96) !important;
    box-shadow: inset 0 -1px 0 rgba(218, 192, 138, .22), 0 4px 20px rgba(19, 37, 33, .08) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
}
/* 城市总览、美食和路线页从开头就保留深绿色导航。 */
body.cities-page #navbar.navbar,
body.food-page #navbar.navbar,
body.routes-page #navbar.navbar {
    --nav-ink: #f7f1e5;
    --nav-muted: #d8cbb2;
    --nav-accent: #e5c993;
    --nav-line: rgba(218, 192, 138, .38);
    background: rgba(24, 49, 44, .96) !important;
    box-shadow: inset 0 -1px 0 rgba(218, 192, 138, .22), 0 4px 20px rgba(19, 37, 33, .08) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
}
body #navbar.navbar::before { display: none !important; }
body #navbar.navbar::after {
    opacity: 0 !important;
    background-position: center 38%;
    filter: none;
}
body #navbar.navbar.scrolled::after { opacity: .2 !important; }
body.cities-page #navbar.navbar::after,
body.food-page #navbar.navbar::after,
body.routes-page #navbar.navbar::after { opacity: .2 !important; }
body #navbar.navbar .navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: calc(100% - 64px);
    max-width: 1280px;
    height: var(--site-nav-height);
    margin-inline: auto;
    padding: 0;
}
body #navbar.navbar .brand {
    flex: 0 0 auto;
    gap: 11px;
    color: var(--nav-ink);
}
body #navbar.navbar .brand__logo {
    width: 52px;
    height: 34px;
    flex: 0 0 52px;
    overflow: hidden;
    color: #d8bd87;
    transform: none;
}
body #navbar.navbar .brand__name {
    display: block;
    color: var(--nav-ink) !important;
    font-family: 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif;
    font-size: 25px !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .12em !important;
    white-space: nowrap;
    text-shadow: var(--nav-text-shadow) !important;
}
body #navbar.navbar .brand__name small {
    display: block;
    margin: 5px 0 0 2px;
    color: var(--nav-muted);
    font-family: var(--site-nav-font);
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .36em;
    opacity: .82;
}
body #navbar.navbar .nav { gap: clamp(20px, 2.1vw, 32px); }
body #navbar.navbar .nav__link {
    display: inline-flex;
    align-items: center;
    height: var(--site-nav-height);
    padding: 0;
    color: var(--nav-ink) !important;
    flex: 0 0 auto;
    font-family: var(--site-nav-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    line-height: 1.4 !important;
    text-shadow: var(--nav-text-shadow) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: color .2s ease, text-shadow .2s ease;
}
body #navbar.navbar .nav__link::after {
    bottom: 17px;
    height: 1px;
    background: var(--nav-accent);
}
body #navbar.navbar .nav__link:hover,
body #navbar.navbar .nav__link.active,
body #navbar.navbar .nav__link[aria-current="page"] { color: var(--nav-accent) !important; }
body #navbar.navbar .nav__link[aria-current="page"]::after { width: 100%; }
/* 预留登录入口宽度，异步挂载和账户状态切换不推挤左侧导航。 */
body #navbar.navbar .gs-nav-user { margin-left: 6px; width: 128px; flex: 0 0 128px; }
body #navbar.navbar .gs-login-btn,
body #navbar.navbar .nav__cta {
    min-height: 36px;
    padding: 7px 16px;
    border: 1px solid var(--nav-line);
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
    color: var(--nav-ink);
    font-family: var(--site-nav-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .04em;
    box-shadow: none;
    transform: none;
    transition: background .2s, border-color .2s;
}
body #navbar.navbar .gs-login-btn,
body #navbar.navbar .gs-avatar { width: 100%; justify-content: center; }
body #navbar.navbar .gs-avatar,
body #navbar.navbar .gs-avatar__name { color: var(--nav-ink) !important; font-family: var(--site-nav-font); }
body #navbar.navbar .gs-login-btn:hover,
body #navbar.navbar .nav__cta:hover {
    background: rgba(218, 192, 138, .12);
    border-color: var(--nav-accent);
    box-shadow: none;
    transform: none;
    filter: none;
}
body #navbar.navbar .menu-toggle {
    flex-shrink: 0;
    border: 1px solid var(--nav-line);
    border-radius: 6px;
    color: var(--nav-ink);
}
body #navbar.navbar .mobile-menu {
    background: #18312c;
    max-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body #navbar.navbar .mobile-menu.open { max-height: calc(100dvh - var(--site-nav-height)); }
body #navbar.navbar .mobile-menu__inner { padding: 12px 24px 24px; }
body #navbar.navbar .mobile-menu__inner > a {
    padding: 13px 4px;
    font-family: var(--site-nav-font);
    font-size: 14px;
    letter-spacing: .08em;
}
body #navbar.navbar .mobile-menu__inner > a[aria-current="page"] { color: #e5c993; }

body.home-page #cities { padding-top: var(--site-nav-height); }

/* 国潮分类独立成栏，与主导航紧贴；滚动时保持同一外观。 */
body.gc-page,
body.gc-page:not(.gc-sub) { padding-top: var(--site-nav-height) !important; }
body.gc-page .gc-subnav,
body.gc-page:not(.gc-sub) .gc-subnav,
body.gc-page.gc-sub .gc-subnav {
    position: sticky !important;
    top: var(--site-nav-height) !important;
    z-index: 40;
    background: rgba(250, 247, 239, .97) !important;
    border-bottom: 1px solid rgba(32, 63, 58, .12) !important;
    box-shadow: 0 3px 12px rgba(32, 63, 58, .035) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
}
body.gc-page .gc-subnav::before { display: none !important; }
body.gc-page .gc-subnav__inner {
    width: calc(100% - 64px);
    max-width: 1280px;
    height: var(--site-subnav-height);
    margin-inline: auto;
    padding: 0 2px;
    gap: clamp(24px, 3vw, 44px);
    align-items: stretch;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body.gc-page .gc-subnav .gc-subnav__inner > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    border-radius: 0;
    background: transparent !important;
    color: #626d62 !important;
    font-family: var(--site-nav-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .07em;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.gc-page .gc-subnav .gc-subnav__inner > a::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 0;
    left: 2px;
    height: 2px;
    background: #9f7d43;
    transform: scaleX(0);
    transition: transform .2s ease;
}
body.gc-page .gc-subnav .gc-subnav__inner > a:hover,
body.gc-page .gc-subnav .gc-subnav__inner > a[aria-current="page"] { color: #193b38 !important; }
body.gc-page .gc-subnav .gc-subnav__inner > a,
body.gc-page .gc-subnav .gc-subnav__inner > a[aria-current="page"] {
    font-weight: 400 !important;
    transform: none !important;
    transition: color .2s ease;
}
body.gc-page .gc-subnav .gc-subnav__inner > a:hover::after,
body.gc-page .gc-subnav .gc-subnav__inner > a[aria-current="page"]::after { transform: scaleX(1); }
body.gc-page .gc-subnav .gc-subnav__inner > a:focus-visible { outline-offset: -4px; }
body.gc-page:not(.gc-sub) .gch__copy { padding-top: 0; }
body.gc-page main [id] { scroll-margin-top: calc(var(--site-nav-height) + var(--site-subnav-height) + 20px); }

@media (min-width: 1024px) {
    body #navbar.navbar .nav { display: flex; }
    body #navbar.navbar .menu-toggle,
    body #navbar.navbar .mobile-menu { display: none; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
    body #navbar.navbar .nav { gap: 18px; }
    body #navbar.navbar .navbar__inner { gap: 20px; }
    body #navbar.navbar .brand__name { font-size: 23px !important; }
}
@media (max-width: 1023px) {
    :root { --site-nav-height: 64px; }
    body #navbar.navbar .nav { display: none; }
    body #navbar.navbar .menu-toggle { display: flex; }
    body #navbar.navbar .mobile-menu { display: block; }
    body #navbar.navbar .navbar__inner { width: calc(100% - 40px); }
    body #navbar.navbar .brand__name { font-size: 22px !important; }
    body #navbar.navbar .brand__logo { width: 25px; height: 30px; }
    body #navbar.navbar .brand__name small { margin-top: 4px; font-size: 8px; }
    body.gc-page .gc-subnav__inner { width: calc(100% - 40px); gap: 28px; }
}
@media (max-width: 680px) {
    :root { --site-subnav-height: 48px; }
    body.gc-page .gc-subnav__inner { justify-content: flex-start; gap: 24px; }
    body.gc-page .gc-subnav .gc-subnav__inner > a { font-size: 12px; letter-spacing: .03em; }
}
@media (prefers-reduced-motion: reduce) {
    body #navbar.navbar { transition: none; }
    body #navbar.navbar *, body.gc-page .gc-subnav .gc-subnav__inner > a::after { transition: none; }
}

/* 国潮首页与子页共用二级导航的左侧基线。 */
body.gc-page { --gc-home-content-left: 15%; }
/* 首页二级导航直接压进首屏图片。 */
body.gc-page:not(.gc-sub) {
    padding-top: 0 !important;
}
body.gc-page .gc-subnav__inner {
    width: auto;
    max-width: none;
    margin-inline: var(--gc-home-content-left);
    padding: 0;
    justify-content: flex-start;
}
body.gc-page:not(.gc-sub) .gch__copy {
    left: var(--gc-home-content-left);
    top: calc(var(--site-nav-height) + var(--site-subnav-height) + 24px);
    transform: none;
}
body.gc-page .gc-subnav .gc-subnav__inner > a:first-child { padding-left: 0; }
body.gc-page .gc-subnav .gc-subnav__inner > a:first-child::after { left: 0; }
@media (max-width: 1024px) {
    body.gc-page { --gc-home-content-left: 8%; }
}
@media (max-width: 760px) {
    body.gc-page { --gc-home-content-left: 1.2rem; }
}
body.gc-page:not(.gc-sub) .gc-subnav,
body.gc-page.gc-sub .gc-subnav {
    position: fixed !important;
    top: var(--site-nav-height) !important;
    left: 0;
    right: 0;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background-color .3s ease, box-shadow .3s ease;
}
body.gc-page:not(.gc-sub) .gc-subnav .gc-subnav__inner > a {
    color: rgba(250, 246, 236, .9) !important;
    text-shadow: 0 1px 8px rgba(12, 24, 20, .5);
}
body.gc-page:not(.gc-sub) .gc-subnav .gc-subnav__inner > a:hover,
body.gc-page:not(.gc-sub) .gc-subnav .gc-subnav__inner > a[aria-current="page"] {
    color: #F3E6C8 !important;
}
body.gc-page:not(.gc-sub) .gc-subnav .gc-subnav__inner > a::after {
    background: #D8BD87 !important;
}
body.gc-page:not(.gc-sub) .gc-subnav.is-solid {
    background: rgba(246, 241, 231, .96) !important;
    border-bottom: 1px solid rgba(32, 63, 58, .10) !important;
    box-shadow: 0 6px 18px -16px rgba(16, 32, 28, .9) !important;
}
body.gc-page:not(.gc-sub) .gc-subnav.is-solid .gc-subnav__inner > a {
    color: #35463F !important;
    text-shadow: none;
}
body.gc-page:not(.gc-sub) .gc-subnav.is-solid .gc-subnav__inner > a:hover,
body.gc-page:not(.gc-sub) .gc-subnav.is-solid .gc-subnav__inner > a[aria-current="page"] {
    color: #193B38 !important;
}

/* 国潮子页：二级导航也保持透明，露出页面背景画 */
body.gc-page.gc-sub {
    padding-top: calc(var(--site-nav-height) + var(--site-subnav-height)) !important;
}
body.gc-page.gc-sub .gc-subnav {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.gc-page.gc-sub .gc-subnav .gc-subnav__inner > a {
    color: #35463F !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, .42);
}
body.gc-page.gc-sub .gc-subnav .gc-subnav__inner > a:hover,
body.gc-page.gc-sub .gc-subnav .gc-subnav__inner > a[aria-current="page"] {
    color: #193B38 !important;
}

/* 双层导航一起随滚动显色，分类文字的位置和字重始终不变。 */
body.gc-page #navbar.scrolled ~ .gc-subnav {
    background: rgba(24, 49, 44, .96) !important;
    box-shadow: 0 4px 20px rgba(19, 37, 33, .08) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
}
body.gc-page #navbar.scrolled ~ .gc-subnav .gc-subnav__inner > a {
    color: #f7f1e5 !important;
    text-shadow: none !important;
}
body.gc-page #navbar.scrolled ~ .gc-subnav .gc-subnav__inner > a:hover,
body.gc-page #navbar.scrolled ~ .gc-subnav .gc-subnav__inner > a[aria-current="page"] {
    color: #e5c993 !important;
}
body.gc-page #navbar.scrolled ~ .gc-subnav .gc-subnav__inner > a::after { background: #d8bd87 !important; }