/**
 * Simply Local — 主样式表
 *
 * 设计语言：深色杂志风（Dark Editorial）
 * 配色：暖黑基底 / 琥珀金主色 / 青绿辅助；光晕与细网格构成氛围层
 * 字体：Archivo 800（大字标题）+ Barlow（正文）+ Noto Sans SC（中文兜底）+ IBM Plex Mono（数据标注）
 *
 * 目录
 *  1. 设计令牌（:root）
 *  2. 基础重置与排版
 *  3. 通用组件（按钮 / 标签 / 徽章 / 表格 / 表单）
 *  4. 站点框架（头部 / 导航 / 页脚）
 *  5. 首页板块
 *  6. 场所卡片与详情
 *  7. 归档 / 分类法 / 矩阵页
 *  8. 文章正文与评论
 *  9. 侧栏与分页
 * 10. 响应式
 * 11. 无障碍与打印
 *
 * @package Simply_Local
 */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   —— 配色方案（通过 <html data-sl-theme="..."> 切换，见 inc/palette.php）
   默认「极简象牙 · 靛蓝」浅色；另有「暖玉青」「藏蓝夜」「暖黑琥珀」可选。
   全部使用令牌，禁止在下方规则里写死颜色，否则换肤会漏改。
   ========================================================================== */

:root{
  /* 基底 —— 象牙阶 */
  --paper:#FCFBF9;
  --paper-warm:#F1F0EC;

  /* 表面 —— 卡片与分区 */
  --mist:#FFFFFF;
  --mist-2:#F1F0EC;

  /* 前景 —— 最深文字阶 */
  --ink:#14151A;
  --ink-2:#33353D;
  --strong:#14151A;

  /* 文字 */
  --text:#1F2126;
  --text-2:#5B5E66;
  --text-3:#85878E;
  --text-4:#A9ABB1;

  /* 主强调色 —— 靛蓝 */
  --accent:#1B4FD8;
  --accent-rgb:27,79,216;
  --accent-2:#4667E8;
  --accent-2-deep:#153FAD;
  --accent-soft:rgba(27,79,216,.09);
  --accent-ink:#FFFFFF;

  /* 辅助色 —— 青玉（成功态） */
  --teal:#1F8A6D;
  --teal-rgb:31,138,109;

  /* 线 —— 浅色底上的深色细线 */
  --line:rgba(20,21,26,.10);
  --line-2:rgba(20,21,26,.18);
  --line-strong:rgba(20,21,26,.30);

  /* 状态 */
  --ok:#1F8A6D;
  --warn:#B26A12;

  /* 层与影 —— 浅色底需要更柔的投影 */
  --fade:rgba(20,21,26,.035);
  --overlay:rgba(18,19,24,.55);
  --surface-blur:rgba(252,251,249,.86);
  --shadow-lg:rgba(20,21,26,.14);
  --shadow-md:rgba(20,21,26,.10);
  --shadow-color:rgba(20,21,26,.14);

  /* 代码与滚动条 */
  --code-bg:#F5F4F0;
  --pre-ink:#2A2C33;
  --scroll-track:#EFEEE9;
  --scroll-thumb:#D2D0CA;
  --scroll-thumb-hover:#B8B6AF;

  /* 装饰网格线 */
  --grid-line:rgba(20,21,26,.035);
  --grid-dot:rgba(20,21,26,.10);

  /* 字号阶梯 */
  --fs-display:clamp(38px,6vw,72px);
  --fs-h1:clamp(27px,3.6vw,38px);
  --fs-h2:clamp(22px,2.8vw,30px);
  --fs-h3:clamp(17px,1.9vw,20px);
  --fs-lead:clamp(16px,1.7vw,18px);
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:12.5px;
  --fs-micro:11.5px;

  /* 间距节奏（8px 基准） */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* 容器 */
  --wrap:1180px;
  --wrap-narrow:760px;
  --gutter:clamp(20px,4vw,40px);

  /* 圆角 */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:10px;
  --r-full:999px;

  /* 字体 */
  --font-display:"Archivo","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:"Barlow","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Microsoft YaHei",monospace;

  /* 动效 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.3s;

  /* 层级 */
  --z-header:60;
  --z-drawer:90;
  --z-modal:120;

  /* 浏览器原生控件跟随主题着色 */
  color-scheme:light;
}

/* ==========================================================================
   1a. 配色方案：极简象牙 · 靛蓝（浅色，默认）
   —— 默认方案直接写在上面「1. 设计令牌」的 :root 里，因此本块只做显式声明。
      保留它的目的是让全部方案在 CSS 中一眼可见，并固定 data-sl-theme 的
      切换语义（即使日后更换默认方案，这里也不会失效）。
   ========================================================================== */

html[data-sl-theme="ivory-indigo"]{
  /* 令牌继承 :root，见上方 */
  --accent:#1B4FD8;
  --accent-rgb:27,79,216;
  --accent-2:#4667E8;
  --accent-2-deep:#153FAD;
  --accent-soft:rgba(27,79,216,.09);
  --accent-ink:#FFFFFF;
  color-scheme:light;
}

/* ==========================================================================
   1b. 配色方案：暖玉青 · 米纸（浅色）
   ========================================================================== */

html[data-sl-theme="jade-ivory"]{
  --paper:#F7F4ED;
  --paper-warm:#EFEAE0;
  --mist:#FDFBF6;
  --mist-2:#F0EBE1;

  --ink:#1C1A17;
  --ink-2:#3A3733;
  --strong:#1C1A17;

  --text:#242220;
  --text-2:#5E5A53;
  --text-3:#8A857C;
  --text-4:#ADA79D;

  --accent:#1E7A6B;
  --accent-rgb:30,122,107;
  --accent-2:#2A9C88;
  --accent-2-deep:#155A4E;
  --accent-soft:rgba(30,122,107,.10);
  --accent-ink:#FFFFFF;

  --teal:#1E7A6B;
  --teal-rgb:30,122,107;

  --line:rgba(28,26,23,.11);
  --line-2:rgba(28,26,23,.19);
  --line-strong:rgba(28,26,23,.31);

  --ok:#1E7A6B;
  --warn:#A9691B;

  --fade:rgba(28,26,23,.04);
  --overlay:rgba(24,22,19,.55);
  --surface-blur:rgba(247,244,237,.86);
  --shadow-lg:rgba(28,26,23,.15);
  --shadow-md:rgba(28,26,23,.10);
  --shadow-color:rgba(28,26,23,.15);

  --code-bg:#EFEAE0;
  --pre-ink:#2C2A26;
  --scroll-track:#EAE4D8;
  --scroll-thumb:#CEC7B9;
  --scroll-thumb-hover:#B5AD9D;

  --grid-line:rgba(28,26,23,.04);
  --grid-dot:rgba(28,26,23,.10);
  color-scheme:light;
}

/* ==========================================================================
   1c. 配色方案：藏蓝夜 · 香槟金（深色）
   ========================================================================== */

html[data-sl-theme="navy-night"]{
  --paper:#0B1620;
  --paper-warm:#101E2A;
  --mist:#132232;
  --mist-2:#1A2E42;

  --ink:#EAF0F5;
  --ink-2:#C4D0DB;
  --strong:#080F16;

  --text:#EAF0F5;
  --text-2:#A9B8C6;
  --text-3:#7C8B99;
  --text-4:#5A6773;

  --accent:#E0B25C;
  --accent-rgb:224,178,92;
  --accent-2:#F0CE8C;
  --accent-2-deep:#B98C36;
  --accent-soft:rgba(224,178,92,.15);
  --accent-ink:#0B1620;

  --teal:#4FB39A;
  --teal-rgb:79,179,154;

  --line:rgba(234,240,245,.11);
  --line-2:rgba(234,240,245,.18);
  --line-strong:rgba(234,240,245,.30);

  --ok:#4FB39A;
  --warn:#E0B25C;

  --fade:rgba(234,240,245,.05);
  --overlay:rgba(6,12,18,.62);
  --surface-blur:rgba(11,22,32,.86);
  --shadow-lg:rgba(0,0,0,.55);
  --shadow-md:rgba(0,0,0,.4);
  --shadow-color:rgba(0,0,0,.5);

  --code-bg:#0A141D;
  --pre-ink:#DCE5EC;
  --scroll-track:#0A141D;
  --scroll-thumb:#25384A;
  --scroll-thumb-hover:#33495E;

  --grid-line:rgba(234,240,245,.03);
  --grid-dot:rgba(234,240,245,.07);
  color-scheme:dark;
}

/* ==========================================================================
   1d. 配色方案：暖黑琥珀（原版深色，保留以便随时切回）
   ========================================================================== */

html[data-sl-theme="ember"]{
  --paper:#0E0C0A;
  --paper-warm:#16130F;
  --mist:#171310;
  --mist-2:#221C16;

  --ink:#F5F1EA;
  --ink-2:#D8D2C6;
  --strong:#F5F1EA;

  --text:#F5F1EA;
  --text-2:#B8AFA1;
  --text-3:#847B6E;
  --text-4:#5C554C;

  --accent:#E9A23B;
  --accent-rgb:233,162,59;
  --accent-2:#F5C771;
  --accent-2-deep:#C77F1E;
  --accent-soft:rgba(233,162,59,.14);
  --accent-ink:#17120A;

  --teal:#4FA98A;
  --teal-rgb:79,169,138;

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.28);

  --ok:#4FA98A;
  --warn:#E9A23B;

  --fade:rgba(255,255,255,.055);
  --overlay:rgba(8,7,6,.6);
  --surface-blur:rgba(14,12,10,.88);
  --shadow-lg:rgba(0,0,0,.85);
  --shadow-md:rgba(0,0,0,.8);
  --shadow-color:rgba(0,0,0,.85);

  --code-bg:#0A0908;
  --pre-ink:#E8E2D6;
  --scroll-track:#0A0908;
  --scroll-thumb:#2C2620;
  --scroll-thumb-hover:#3D362E;

  --grid-line:rgba(255,255,255,.028);
  --grid-dot:rgba(255,255,255,.06);
  color-scheme:dark;
}

/* ==========================================================================
   2. 基础重置与排版
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  /* 底部固定导航会盖住页面末尾内容；给锚点定位预留等高的避让量。
     桌面端没有底部导航，由下方媒体查询覆盖为 0。 */
  scroll-padding-bottom:0;
  /* ⚠️ 关键：移动端抽屉菜单是 position:fixed; inset:0; transform:translateX(100%)，
     它会把文档 scrollWidth 撑到「视口宽 + 抽屉宽」。若只在 body 上写 overflow-x:hidden，
     iOS Safari 并不会真正阻止文档横向滚动 —— 结果是整页可左右拖动，
     而底部固定导航是 left:0;right:0 定位，会跟着文档宽度变宽，
     最后一项（QQ）就被推到屏幕外，必须横向滑动才能看到。
     这里在 html 上也钳住横向溢出，才能同时兼容新旧浏览器。 */
  overflow-x:hidden;
}

/* overflow-x:clip 比 hidden 更彻底：它不会把元素变成滚动容器，
   因此 position:fixed 的子元素仍以视口为参照。
   支持的浏览器用它，不支持的浏览器由上面的 hidden 兜底。 */
@supports (overflow:clip){
  html{overflow-x:clip}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
  overflow-x:hidden;
  /* 让 body 也不超过视口宽度，避免内部宽元素把文档撑开 */
  max-width:100%;
  width:100%;
}

@supports (overflow:clip){
  body{overflow-x:clip}
}

/* 氛围层 1/4：点缀色聚光 + 青玉余晖（固定，不随滚动重绘） */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    /* 顶部主聚光：给首屏纵深。焦点压到视口之上，避免顶部形成一条"色带" */
    radial-gradient(1150px 620px at 74% -26%, rgba(var(--accent-rgb),.11), transparent 58%),
    /* 左上青玉余晖：与点缀色形成冷暖对比 */
    radial-gradient(860px 540px at 2% 4%, rgba(var(--teal-rgb),.08), transparent 60%),
    /* 一道很淡的斜向光带：避免整页只有"点光"而缺少方向感 */
    linear-gradient(118deg, transparent 26%, rgba(var(--accent-rgb),.032) 44%, transparent 62%);
}

/* 氛围层 2/4：页顶细噪点纹理。
   用内联 SVG 的 feTurbulence 生成：无网络请求、无额外资源。
   挂在 html 上是为了让它落在内容之下、同时不占用 body 的伪元素。
   深色方案下进一步压低透明度，否则会显脏。 */
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  /* 顶部略浓、向下渐隐，避免整页发灰 */
  -webkit-mask-image:linear-gradient(180deg, rgba(20,21,26,.06), rgba(20,21,26,.015) 40%, transparent 76%);
          mask-image:linear-gradient(180deg, rgba(20,21,26,.06), rgba(20,21,26,.015) 40%, transparent 76%);
}

html[data-sl-theme="navy-night"]::before,
html[data-sl-theme="ember"]::before{opacity:.3}

/* 氛围层 3/4：页底托底渐变，让内容结束处视觉上"落地" */
html::after{
  content:"";
  position:fixed;
  inset:auto 0 0 0;
  height:38vh;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--paper-warm) 88%);
}

/* 氛围层 4/4：细网格 + 细点阵，叠加成"方格纸"般的编辑肌理，向四周渐隐。
   用固定定位层而不是 body 的 background-attachment:fixed ——
   后者在移动端会随滚动每帧重绘，代价明显更高。
   点阵用 radial-gradient 画，不引入任何图片资源。 */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  opacity:.6;
  background-image:
    /* 细点阵：每个格子的交点上一个小点 */
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0),
    /* 细网格线 */
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:74px 74px, 74px 74px, 74px 74px;
  background-position:0 0, 0 0, 0 0;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 18%, #000 6%, rgba(0,0,0,.35) 52%, transparent 84%);
          mask-image:radial-gradient(ellipse 120% 90% at 50% 18%, #000 6%, rgba(0,0,0,.35) 52%, transparent 84%);
}

main{position:relative;z-index:1}

h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.03em;
  color:var(--ink);
}

h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-body);font-weight:600;letter-spacing:0}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

a{color:var(--ink);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--accent)}

img{max-width:100%;height:auto;display:block}
figure{margin:0}

ul,ol{padding-left:1.4em;margin:0 0 1.15em}
li{margin-bottom:.4em}

hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

blockquote{
  margin:var(--s6) 0;
  padding:var(--s2) 0 var(--s2) var(--s5);
  border-left:2px solid var(--accent);
  font-size:var(--fs-lead);
  color:var(--ink-2);
}

code,kbd,pre,samp{font-family:var(--font-mono);font-size:.9em}
code{background:var(--code-bg);padding:2px 6px;border-radius:var(--r-xs);color:var(--accent-2-deep)}
pre{background:var(--code-bg);color:var(--pre-ink);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-sm);overflow-x:auto}
pre code{background:none;color:inherit;padding:0}

table{width:100%;border-collapse:collapse;margin:var(--s5) 0;font-size:var(--fs-sm)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--text);background:var(--mist);font-size:var(--fs-xs);
   letter-spacing:.04em;text-transform:uppercase}

::selection{background:var(--accent);color:var(--accent-ink)}

/* 滚动条 —— 桌面端细线风格 */
@media (min-width:1024px){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--scroll-track)}
  ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:var(--r-full)}
  ::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
}

/* ---- 布局工具 ---- */
.sl-wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sl-wrap--narrow{max-width:var(--wrap-narrow)}
.sl-wrap--wide{max-width:1340px}

.sl-section{padding-block:clamp(56px,8vw,104px);position:relative;z-index:1}
.sl-section--mist{background:var(--paper-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sl-section--tight{padding-block:clamp(40px,5vw,64px)}
.sl-section--rule{border-top:1px solid var(--line)}

.sl-grid{display:grid;gap:var(--s5)}
.sl-grid--2{grid-template-columns:repeat(2,1fr)}
.sl-grid--3{grid-template-columns:repeat(3,1fr)}
.sl-grid--4{grid-template-columns:repeat(4,1fr)}

.sl-stack{display:flex;flex-direction:column;gap:var(--s4)}
.sl-row{display:flex;align-items:center;gap:var(--s3)}
.sl-row--between{justify-content:space-between}
.sl-row--wrap{flex-wrap:wrap}

.sl-center{text-align:center}
.sl-muted{color:var(--text-2)}
.sl-micro{font-size:var(--fs-micro);color:var(--text-3)}
.sl-mono{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em}

/* 板块标题 —— 编号（点缀色） + 标题 + 右侧链接，编号前有一条短装饰线 */
.sl-head{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:var(--s4);
  margin-bottom:var(--s7);
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.sl-head__num{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--accent);
  letter-spacing:.16em;
  padding-bottom:3px;
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:var(--s3);
}
/* 装饰条：给标题区一个视觉锚点 */
.sl-head__num::before{
  content:"";
  width:3px;
  height:1.1em;
  border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--accent),var(--accent-2-deep));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.45);
  flex:none;
}
.sl-head__text{flex:1 1 auto;min-width:0}
.sl-head__title{margin:0;font-size:var(--fs-h2);letter-spacing:-.03em}
.sl-head__sub{margin:var(--s1) 0 0;color:var(--text-2);font-size:var(--fs-sm);line-height:1.6;font-weight:300}
.sl-head__more{
  flex:none;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--accent);
  border-bottom:1px solid rgba(var(--accent-rgb),.38);
  padding-bottom:2px;
  white-space:nowrap;
  transition:border-color var(--dur) var(--ease);
}
.sl-head__more:hover{border-color:var(--accent);color:var(--accent-2)}

/* ==========================================================================
   3. 通用组件
   ========================================================================== */

/* 按钮 —— 胶囊形，主按钮琥珀带辉光 */
.sl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  padding:13px 26px;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:1.4;
  letter-spacing:.01em;
  border:1px solid var(--accent);
  border-radius:var(--r-full);
  background:var(--accent);
  color:var(--accent-ink);
  cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  text-align:center;
}
.sl-btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink);
  transform:translateY(-2px);box-shadow:0 12px 32px var(--shadow-md)}
.sl-btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.sl-btn--ghost:hover{background:var(--fade);border-color:var(--line-strong);color:var(--text);
  box-shadow:none}
.sl-btn--sm{padding:8px 18px;font-size:var(--fs-xs)}
.sl-btn--block{display:flex;width:100%}

/* 标签 */
.sl-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 11px;
  font-size:var(--fs-micro);
  line-height:1.5;
  color:var(--text-2);
  background:var(--mist-2);
  border:1px solid transparent;
  border-radius:var(--r-full);
  white-space:nowrap;
}
.sl-tag--line{background:transparent;border-color:var(--line-2)}
.sl-tag--accent{background:var(--accent-soft);color:var(--accent)}
.sl-tag--ink{background:var(--strong);color:var(--paper)}

/* 区域角标 */
.sl-district{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:var(--fs-micro);
  font-weight:600;
  color:var(--accent);
  letter-spacing:.02em;
}
.sl-district::before{
  content:"";
  width:5px;height:5px;
  background:var(--accent);
  border-radius:var(--r-full);
  flex:none;
}

/* 徽章 */
.sl-badge{
  display:inline-block;
  padding:2px 9px;
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.04em;
  border-radius:var(--r-full);
}
.sl-badge--new{background:var(--accent);color:var(--accent-ink)}
.sl-badge--ok{background:rgba(var(--teal-rgb),.15);color:var(--teal)}

/* 面包屑 */
.sl-crumb{
  font-size:var(--fs-xs);
  color:var(--text-3);
  padding-block:var(--s4);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1;
}
.sl-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.sl-crumb li{margin:0;display:flex;align-items:center;gap:6px}
.sl-crumb li+li::before{content:"/";color:var(--text-4)}
.sl-crumb a{color:var(--text-2)}
.sl-crumb a:hover{color:var(--accent)}
.sl-crumb [aria-current]{color:var(--text);font-weight:500}

/* 表单 */
.sl-field{margin-bottom:var(--s4)}
.sl-field label{
  display:block;
  margin-bottom:6px;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--text);
  letter-spacing:.02em;
}
.sl-field .req{color:var(--accent)}
.sl-input,.sl-select,.sl-textarea{
  width:100%;
  padding:11px 14px;
  font-family:var(--font-body);
  font-size:16px; /* 移动端防 iOS 聚焦放大 */
  line-height:1.5;
  color:var(--text);
  background:var(--mist);
  border:1px solid var(--line-2);
  border-radius:var(--r-xs);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
  appearance:none;
}
.sl-input:focus,.sl-select:focus,.sl-textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--mist-2);
}
.sl-textarea{min-height:132px;resize:vertical}
.sl-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23B8AFA1' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}
.sl-select option{background:var(--mist);color:var(--text)}
.sl-field__hint{display:block;margin-top:5px;font-size:var(--fs-micro);color:var(--text-3)}

/* 提示条 */
.sl-note{
  padding:var(--s4);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  background:var(--mist);
  border-radius:var(--r-xs);
  font-size:var(--fs-sm);
  color:var(--text-2);
}
.sl-note--ok{border-left-color:var(--ok)}
.sl-note--err{border-left-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}

/* 空状态 */
.sl-empty{
  padding:var(--s8) var(--s5);
  text-align:center;
  color:var(--text-3);
  border:1px dashed var(--line-2);
  border-radius:var(--r-md);
  font-size:var(--fs-sm);
}

/* 隐藏但可读 */
.sl-sr{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* 跳转链接 */
.sl-skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:var(--z-modal);
  padding:12px 20px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:var(--fs-sm);
  font-weight:600;
  border-radius:0 0 var(--r-xs) 0;
}
.sl-skip:focus{left:0;color:var(--accent-ink)}

/* ==========================================================================
   4. 站点框架
   ========================================================================== */

.sl-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background:var(--surface-blur);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur) var(--ease);
}
.sl-header.is-stuck{box-shadow:0 1px 0 var(--line),0 12px 32px -20px var(--shadow-md)}

.sl-header__bar{
  display:flex;
  align-items:center;
  gap:var(--s5);
  min-height:70px;
}

/* 品牌 —— flex-shrink 必须为 1 且 min-width:0，
   否则长站点名会把同一行的搜索/汉堡按钮挤出屏幕（手机端无法打开菜单）。 */
.sl-brand{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0}
.sl-brand:hover{color:inherit}
.sl-brand__mark{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2-deep));
  color:var(--accent-ink);
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.03em;
  border-radius:var(--r-xs);
  flex:none;
  box-shadow:0 4px 16px rgba(var(--accent-rgb),.24);
}
/* 品牌文字必须可被压缩：站点名往往很长（例如 21 个汉字），
   若 min-width 保持 auto，flex 无法收缩它，整个页头条内容宽度会溢出，
   把右侧的搜索与汉堡按钮挤出屏幕 —— 手机上就点不到菜单了。 */
.sl-brand__text{display:flex;flex-direction:column;line-height:1.2;min-width:0;overflow:hidden}
.sl-brand__name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:-.02em;
  color:var(--text);
  /* 超长站点名单行截断，绝不允许顶到视口边缘 */
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sl-brand__tag{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-3);
  letter-spacing:.14em;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 主导航 */
.sl-nav{margin-left:auto}
.sl-nav ul{display:flex;align-items:center;gap:var(--s1);list-style:none;margin:0;padding:0}
.sl-nav li{margin:0;position:relative}
.sl-nav a{
  display:block;
  padding:8px 14px;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-2);
  border-radius:var(--r-xs);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.sl-nav a:hover{color:var(--text);background:var(--fade)}
.sl-nav .current-menu-item>a,
.sl-nav .current_page_item>a,
.sl-nav .current-menu-parent>a,
.sl-nav .current-menu-ancestor>a{
  color:var(--accent);
  background:var(--accent-soft);
}
.sl-nav .menu-item-has-children>a::after{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  margin-left:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.sl-nav .sub-menu{
  position:absolute;
  top:100%;left:-14px;
  min-width:190px;
  padding:var(--s2) 0;
  background:var(--mist);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  box-shadow:0 24px 48px -24px var(--shadow-lg);
  list-style:none;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:10;
}
.sl-nav li:hover>.sub-menu,
.sl-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.sl-nav .sub-menu li{margin:0}
.sl-nav .sub-menu a{padding:8px 16px;border-bottom:0;font-size:var(--fs-xs);border-radius:0}
.sl-nav .sub-menu a:hover{background:var(--mist-2);color:var(--accent)}

/* 头部动作区 */
.sl-actions{display:flex;align-items:center;gap:var(--s3);flex:none}
.sl-iconbtn{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.sl-iconbtn:hover{background:var(--fade);border-color:var(--line-2)}
.sl-iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}

/* 汉堡 */
.sl-burger{display:none;flex-direction:column;gap:5px;width:38px;height:38px;
  align-items:center;justify-content:center}
.sl-burger span{display:block;width:19px;height:1.5px;background:var(--strong);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.sl-burger.is-on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.sl-burger.is-on span:nth-child(2){opacity:0}
.sl-burger.is-on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* 搜索条 */
.sl-searchbar{
  display:none;
  border-top:1px solid var(--line);
  padding-block:var(--s4);
}
.sl-searchbar.is-open{display:block}
.sl-searchbar form{display:flex;gap:var(--s2)}
.sl-searchbar input{flex:1}

/* 抽屉菜单 */
.sl-drawer{
  position:fixed;
  top:0;
  left:0;
  /* 用 vw/vh 明确定尺寸并限制上限，替代 inset:0。
     抽屉平时停在屏幕右外侧（translateX(100%)），若宽度仍然等于视口宽，
     它会精确落在 [视口宽, 视口宽×2] 这段区间里 —— 对文档而言就是横向溢出。
     配合 html/body 的 overflow-x 钳制后它已不可见，
     这里再把尺寸收紧一次，对容器宽度计算异常的浏览器同样成立。 */
  width:100%;
  max-width:100vw;
  height:100%;
  max-height:100vh;
  z-index:var(--z-drawer);
  background:var(--paper-warm);
  padding:var(--s5) var(--gutter) var(--s7);
  display:flex;
  flex-direction:column;
  gap:var(--s5);
  transform:translateX(100%);
  transition:transform .38s var(--ease);
  overflow-y:auto;
  /* 抽屉自身不得横向溢出 */
  overflow-x:hidden;
  box-sizing:border-box;
}
.sl-drawer.is-open{transform:none}
.sl-drawer__top{display:flex;align-items:center;justify-content:space-between}
.sl-drawer__nav ul{list-style:none;margin:0;padding:0}
.sl-drawer__nav li{margin:0;border-bottom:1px solid var(--line)}
.sl-drawer__nav a,
.sl-drawer__nav .sl-drawer__label{
  display:block;
  padding:14px 0;
  font-size:18px;
  font-weight:600;
  font-family:var(--font-display);
  letter-spacing:-.02em;
  color:var(--text);
}
.sl-drawer__nav .sub-menu{padding-left:var(--s4);border-top:1px solid var(--line)}
.sl-drawer__nav .sub-menu a{font-size:var(--fs-sm);font-weight:400;font-family:var(--font-body);color:var(--text-2)}
.sl-drawer__foot{margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-2)}
.sl-drawer__foot a{display:block;padding:5px 0}

/* 页脚 —— 最深底色 */
.sl-footer{
  margin-top:0;
  background:var(--paper-warm);
  color:var(--text-2);
  padding-block:var(--s8) var(--s5);
  font-size:var(--fs-sm);
  border-top:1px solid var(--line);
  position:relative;
  z-index:1;
}
.sl-footer a{color:var(--text-2)}
.sl-footer a:hover{color:var(--accent)}
.sl-footer__grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1fr 1.3fr;
  gap:var(--s6);
  padding-bottom:var(--s7);
  border-bottom:1px solid var(--line);
}
.sl-footer__brand .sl-brand__mark{background:linear-gradient(140deg,var(--accent),var(--accent-2-deep));color:var(--accent-ink)}
.sl-footer__brand .sl-brand__name{color:var(--text)}
.sl-footer__brand p{margin-top:var(--s4);color:var(--text-3);line-height:1.75;max-width:34ch;font-weight:300}
.sl-footer h3{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:var(--s4);
}
.sl-footer ul{list-style:none;margin:0;padding:0}
.sl-footer li{margin-bottom:9px}
.sl-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3) var(--s5);
  justify-content:space-between;
  align-items:center;
  padding-top:var(--s5);
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
}
.sl-footer__bottom p{margin:0}
.sl-footer__nap{font-style:normal;line-height:1.8}
.sl-footer__nap b{color:var(--text);font-weight:500}

/* 回到顶部 */
.sl-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:50;
  width:42px;height:42px;
  display:grid;place-items:center;
  background:var(--mist-2);
  color:var(--text);
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur),background var(--dur),border-color var(--dur);
}
.sl-top.is-on{opacity:1;visibility:visible;transform:none}
.sl-top:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sl-top svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ==========================================================================
   5. 首页板块
   ========================================================================== */

/* Hero —— 左文右数据，氛围由全局光晕提供 */
.sl-hero{
  padding-block:clamp(56px,8vw,104px);
  border-bottom:1px solid var(--line);
}
.sl-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);
  align-items:end;
}
.sl-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:var(--s5);
  padding:6px 15px 6px 10px;
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:var(--r-full);
  background:var(--accent-soft);
}
.sl-hero__eyebrow::before{
  content:"";
  width:6px;height:6px;
  background:var(--accent);
  border-radius:var(--r-full);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
  animation:sl-pulse 2.4s ease-in-out infinite;
  flex:none;
}
@keyframes sl-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.sl-hero__title{
  font-size:var(--fs-display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.045em;
  margin:0 0 var(--s5);
  max-width:15ch;
}
.sl-hero__title em{
  font-style:normal;
  position:relative;
  white-space:nowrap;
  color:var(--accent);
}
.sl-hero__title em::after{
  content:"";
  position:absolute;
  left:-2px;right:-2px;bottom:.05em;
  height:.28em;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.26),rgba(var(--accent-rgb),.07));
  z-index:-1;
  border-radius:2px;
}
.sl-hero__lead{
  font-size:var(--fs-lead);
  color:var(--text-2);
  max-width:46ch;
  line-height:1.75;
  margin-bottom:var(--s6);
  font-weight:300;
}
.sl-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.sl-contact-prompt{max-width:560px;margin-top:24px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(var(--accent-rgb),.06);display:grid;gap:6px}
.sl-contact-prompt strong{font-size:15px;color:var(--text-1)}
.sl-contact-prompt>span{font-size:13px;color:var(--text-2);line-height:1.6}
.sl-contact-prompt__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sl-contact-prompt__id{align-self:center;font:12px var(--font-mono);color:var(--text-3)}
.sl-contact-prompt__actions button{display:none}
.sl-footer__contact-lead{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:10px}
@media (max-width:640px){.sl-contact-prompt{margin-top:18px}.sl-contact-prompt__actions button{display:inline-flex}.sl-contact-prompt__actions .sl-btn{flex:1;min-width:120px}}

/* Hero 右侧数据块 */
.sl-hero__aside{
  border-left:1px solid var(--line);
  padding-left:clamp(24px,3vw,40px);
}
.sl-stats{list-style:none;margin:0;padding:0}
.sl-stats li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s4);
  padding:var(--s4) 0;
  border-bottom:1px solid var(--line);
  margin:0;
}
.sl-stats li:last-child{border-bottom:0}
.sl-stats__num{
  font-family:var(--font-display);
  font-size:clamp(26px,3vw,34px);
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--accent);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.sl-stats__num sup{font-size:.45em;font-weight:500;color:var(--text-3);margin-left:3px;letter-spacing:0}
.sl-stats__label{font-size:var(--fs-xs);color:var(--text-2);text-align:right;line-height:1.5}

/* 区域快捷入口 —— 深色卡片，悬停左侧琥珀竖线扫入 */
.sl-quick{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.sl-quick__item{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  padding:var(--s5);
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  position:relative;
  overflow:hidden;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.sl-quick__item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--dur) var(--ease);
}
.sl-quick__item:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--mist-2)}
.sl-quick__item:hover::before{transform:scaleY(1)}
.sl-quick__item:hover .sl-quick__arrow{transform:translateX(3px);color:var(--accent)}
.sl-quick__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
}
.sl-quick__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);letter-spacing:-.025em;color:var(--text)}
.sl-quick__arrow{transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);color:var(--text-4);font-size:14px}
.sl-quick__desc{font-size:var(--fs-xs);color:var(--text-3);line-height:1.65}
.sl-quick__count{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--text-3);
  letter-spacing:.06em;
}
.sl-quick__count b{color:var(--accent);font-weight:500}

/* 品类横排 */
.sl-chips{display:flex;flex-wrap:wrap;gap:10px}
.sl-chips a{
  padding:9px 18px;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  transition:all var(--dur) var(--ease);
}
.sl-chips a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-2px)}

/* ==========================================================================
   6. 场所卡片与详情
   ========================================================================== */

.sl-venues{display:grid;gap:var(--s5);grid-template-columns:repeat(3,1fr)}

.sl-venue{
  display:flex;
  flex-direction:column;
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  /* 浅色底需要投影才有"浮起"的层次；深色底几乎看不出，无副作用 */
  box-shadow:0 1px 2px rgba(20,21,26,.05), 0 10px 26px -20px rgba(20,21,26,.22);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.sl-venue:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:0 2px 4px rgba(20,21,26,.06), 0 20px 40px -24px rgba(20,21,26,.3);
}

.sl-venue__media{position:relative;background:var(--mist-2);aspect-ratio:16/10;overflow:hidden}
.sl-venue__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sl-venue:hover .sl-venue__media img{transform:scale(1.04)}
.sl-venue__badge{position:absolute;top:12px;left:12px;z-index:2}
.sl-venue__price{
  position:absolute;
  right:12px;bottom:12px;
  z-index:2;
  padding:5px 11px;
  background:var(--surface-blur);
  border:1px solid rgba(var(--accent-rgb),.30);
  border-radius:var(--r-full);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--accent-2);
  letter-spacing:.01em;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.sl-venue__body{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);flex:1}
.sl-venue__head{display:flex;flex-direction:column;gap:6px}
.sl-venue__title{
  margin:0;
  font-size:var(--fs-h3);
  letter-spacing:-.02em;
  line-height:1.3;
}
.sl-venue__title a{color:inherit}
.sl-venue__title a:hover{color:var(--accent)}
.sl-venue__desc{
  margin:0;
  font-size:var(--fs-sm);
  color:var(--text-2);
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sl-venue__tags{display:flex;flex-wrap:wrap;gap:6px}
.sl-venue__foot{
  margin-top:auto;
  padding-top:var(--s3);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  font-size:var(--fs-micro);
  color:var(--text-3);
}
.sl-venue__meta{display:flex;align-items:center;gap:10px}
.sl-venue__meta span{display:inline-flex;align-items:center;gap:4px}
.sl-venue__meta svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none}

/* 列表式场所条目 —— 归档页用 */
.sl-venues--list{grid-template-columns:1fr}
.sl-venues--list .sl-venue{flex-direction:row}
.sl-venues--list .sl-venue__media{width:260px;flex:none;aspect-ratio:auto}
.sl-venues--list .sl-venue__body{flex:1;min-width:0}
.sl-venues--list .sl-venue__desc{-webkit-line-clamp:3;line-clamp:3}

/* 场所详情 */
.sl-venue-hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.sl-venue-hero__media{
  aspect-ratio:16/10;
  background:var(--mist-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.sl-venue-hero__media img{width:100%;height:100%;object-fit:cover}
.sl-venue-facts{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--line);
  margin-top:var(--s5);
}
.sl-venue-facts__row{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:var(--s4);
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
}
.sl-venue-facts__row dt{color:var(--text-3);font-size:var(--fs-xs);padding-top:2px}
.sl-venue-facts__row dd{margin:0;color:var(--text)}
.sl-venue-facts__row a{color:var(--text);border-bottom:1px solid var(--line-2)}
.sl-venue-facts__row a:hover{color:var(--accent);border-color:var(--accent)}
.sl-hours{list-style:none;margin:0;padding:0}
.sl-hours li{display:flex;gap:var(--s4);font-variant-numeric:tabular-nums;padding:1px 0}
.sl-hours li span:first-child{color:var(--text-3);min-width:66px}

/* 图集网格 */
.sl-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.sl-gallery-grid a{display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--mist-2);aspect-ratio:4/3;border:1px solid var(--line)}
.sl-gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.sl-gallery-grid a:hover img{transform:scale(1.05)}
.sl-gallery-grid a:hover{border-color:var(--line-2)}

/* 灯箱 */
.sl-lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:none;
  place-items:center;
  padding:var(--s5);
  background:var(--overlay);
}
.sl-lightbox.is-open{display:grid}
.sl-lightbox img{max-width:min(1100px,94vw);max-height:88vh;width:auto;object-fit:contain;border-radius:var(--r-sm)}
.sl-lightbox__close{
  position:absolute;
  top:20px;right:22px;
  width:42px;height:42px;
  display:grid;place-items:center;
  background:transparent;
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,.30);
  border-radius:var(--r-full);
  cursor:pointer;
}
.sl-lightbox__close:hover{background:rgba(255,255,255,.16)}
.sl-lightbox__close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ==========================================================================
   7. 归档 / 分类法 / 矩阵页
   ========================================================================== */

.sl-archive-head{
  padding-block:clamp(36px,5vw,60px) var(--s6);
  border-bottom:1px solid var(--line);
}
.sl-archive-head__kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s3);
  display:block;
}
.sl-archive-head h1{
  font-size:var(--fs-h1);
  margin:0 0 var(--s4);
  letter-spacing:-.03em;
  max-width:24ch;
  font-weight:800;
}
.sl-archive-head__desc{
  color:var(--text-2);
  font-size:var(--fs-lead);
  max-width:62ch;
  line-height:1.75;
  margin:0;
  font-weight:300;
}
.sl-archive-head__meta{
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3) var(--s5);
  font-size:var(--fs-xs);
  color:var(--text-3);
}
.sl-archive-head__meta strong{color:var(--accent);font-weight:600}

/* 归档工具条 */
.sl-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3) var(--s4);
  padding-block:var(--s4);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s6);
  font-size:var(--fs-xs);
  color:var(--text-3);
}
.sl-toolbar__group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.sl-toolbar__label{font-weight:600;color:var(--text)}
.sl-toolbar a{
  padding:5px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-full);
  color:var(--text-2);
  transition:all var(--dur) var(--ease);
}
.sl-toolbar a:hover{border-color:var(--line-strong);color:var(--text)}
.sl-toolbar a.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* 矩阵页 —— 无边框交叉表，可点格为琥珀胶囊 */
.sl-matrix{
  width:100%;
  border-collapse:separate;
  border-spacing:0 6px;
  font-size:var(--fs-sm);
  margin:var(--s6) 0;
  table-layout:fixed;
}
.sl-matrix th{
  padding:0 8px 10px;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-3);
  text-align:center;
  background:transparent;
  border:0;
}
.sl-matrix th:first-child{text-align:left;padding-left:0}
.sl-matrix td{
  border:0;
  padding:0 4px;
  text-align:center;
  background:transparent;
}
.sl-matrix td:first-child{
  text-align:left;
  padding-left:0;
  padding-right:14px;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}
.sl-matrix td a,
.sl-matrix td span{
  display:block;
  padding:11px 6px;
  border-radius:var(--r-xs);
  font-size:var(--fs-xs);
  line-height:1.5;
}
.sl-matrix td a{
  background:var(--accent-soft);
  border:1px solid rgba(var(--accent-rgb),.22);
  color:var(--accent-2);
  transition:all var(--dur) var(--ease);
}
.sl-matrix td a:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sl-matrix td.is-empty span{color:var(--text-4)}

/* ==========================================================================
   8. 文章正文与评论
   ========================================================================== */

.sl-entry{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,68px);align-items:start}
.sl-entry--full{grid-template-columns:minmax(0,1fr)}
.sl-entry--full .sl-content{max-width:var(--wrap-narrow);margin-inline:auto}

.sl-content{min-width:0;font-size:17px;line-height:1.85}
.sl-content>h2{
  margin-top:var(--s8);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
  scroll-margin-top:96px;
}
.sl-content>h2:first-child{margin-top:0;border-top:0;padding-top:0}
.sl-content>h3{margin-top:var(--s6);scroll-margin-top:96px}
.sl-content>p:first-of-type{font-size:var(--fs-lead);color:var(--ink-2)}
.sl-content img{border-radius:var(--r-sm);margin:var(--s5) 0;border:1px solid var(--line)}
.sl-content ul,.sl-content ol{padding-left:1.3em}
.sl-content li{margin-bottom:.55em}
.sl-content a{border-bottom:1px solid var(--line-2);color:var(--accent-2)}
.sl-content a:hover{color:var(--accent);border-color:var(--accent)}
.sl-content figcaption{font-size:var(--fs-xs);color:var(--text-3);text-align:center;margin-top:var(--s2)}

/* 文章头 */
.sl-post-head{padding-block:clamp(36px,5vw,64px) var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s7)}
.sl-post-head h1{font-size:var(--fs-h1);letter-spacing:-.03em;margin-bottom:var(--s4);max-width:26ch;font-weight:800}
.sl-post-head__meta{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  font-size:var(--fs-xs);color:var(--text-3);
  align-items:center;
}
.sl-post-head__meta span{display:inline-flex;align-items:center;gap:5px}
.sl-post-head__meta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
.sl-post-lead{
  font-size:var(--fs-lead);
  color:var(--text-2);
  line-height:1.75;
  margin:var(--s5) 0 0;
  max-width:62ch;
  font-weight:300;
}

/* 作者盒 */
.sl-author{
  display:flex;
  gap:var(--s4);
  padding:var(--s5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--mist);
  margin-top:var(--s8);
}
.sl-author__avatar{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2-deep));color:var(--accent-ink);
  font-family:var(--font-display);font-weight:700;font-size:17px;
  border-radius:var(--r-xs);
}
.sl-author__name{margin:0 0 2px;font-size:var(--fs-body);font-weight:600}
.sl-author__role{font-size:var(--fs-micro);color:var(--text-3);margin:0 0 8px;letter-spacing:.02em}
.sl-author__bio{margin:0;font-size:var(--fs-sm);color:var(--text-2);line-height:1.7}

/* 文章导航 */
.sl-postnav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:var(--s7);
}
.sl-postnav a{
  padding:var(--s5);
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.sl-postnav a:hover{background:var(--mist-2);border-color:var(--line-2)}
.sl-postnav__dir{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
.sl-postnav__title{font-size:var(--fs-sm);font-weight:600;color:var(--text);line-height:1.5}
.sl-postnav__next{text-align:right;align-items:flex-end}
.sl-postnav__empty{background:var(--mist);border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--s5);color:var(--text-3);font-size:var(--fs-xs)}

/* 相关文章 */
.sl-related{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.sl-related h2{font-size:var(--fs-h3);margin-bottom:var(--s5)}

/* 评论 */
.sl-comments{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.sl-comments h2{font-size:var(--fs-h3);margin-bottom:var(--s5)}
.sl-comments ol{list-style:none;margin:0;padding:0}
.sl-comments ol li{margin:0}
.sl-comment{
  padding:var(--s5) 0;
  border-bottom:1px solid var(--line);
}
.sl-comment__head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.sl-comment__avatar{
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;
  background:var(--mist-2);
  border:1px solid var(--line-2);
  color:var(--accent-2);
  font-family:var(--font-display);font-weight:700;font-size:14px;
  border-radius:var(--r-full);
}
.sl-comment__who{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.sl-comment__when{font-size:var(--fs-micro);color:var(--text-3)}
.sl-comment__body{font-size:var(--fs-sm);color:var(--text-2);line-height:1.75}
.sl-comment__body p:last-child{margin-bottom:0}
.sl-comment .children{padding-left:var(--s6);border-left:1px solid var(--line);margin-top:var(--s4)}
.sl-comment-respond{margin-top:var(--s6)}
.sl-comment-respond .comment-reply-title{font-size:var(--fs-h3);font-weight:700;font-family:var(--font-display);margin-bottom:var(--s4);display:block}
.sl-comment-respond .logged-in-as,
.sl-comment-respond .comment-notes{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:var(--s4)}
.sl-comment-respond input[type=text],
.sl-comment-respond input[type=email],
.sl-comment-respond input[type=url],
.sl-comment-respond textarea{
  width:100%;
  padding:11px 14px;
  font-family:var(--font-body);
  font-size:16px;
  color:var(--text);
  border:1px solid var(--line-2);
  border-radius:var(--r-xs);
  background:var(--mist);
  margin-bottom:var(--s3);
}
.sl-comment-respond textarea{min-height:120px;resize:vertical}
.sl-comment-respond input:focus,
.sl-comment-respond textarea:focus{outline:none;border-color:var(--accent)}
.sl-comment-respond .submit{
  padding:12px 28px;
  background:var(--accent);
  color:var(--accent-ink);
  border:1px solid var(--accent);
  border-radius:var(--r-full);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor:pointer;
  font-family:var(--font-display);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.sl-comment-respond .submit:hover{background:var(--accent-2);border-color:var(--accent-2);
  transform:translateY(-1px);box-shadow:0 8px 24px var(--shadow-md)}

/* ==========================================================================
   9. 侧栏与分页
   ========================================================================== */

.sl-side{display:flex;flex-direction:column;gap:var(--s6);position:sticky;top:96px}
.sl-widget h2,
.sl-widget .widget-title{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  margin:0 0 var(--s4);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);
}
.sl-widget ul{list-style:none;margin:0;padding:0}
.sl-widget li{
  margin:0;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
}
.sl-widget li:last-child{border-bottom:0}
.sl-widget a{color:var(--text-2);display:block;line-height:1.6}
.sl-widget a:hover{color:var(--accent)}
.sl-widget select{width:100%}
.sl-widget .tagcloud{display:flex;flex-wrap:wrap;gap:6px}
.sl-widget .tagcloud a{
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-full);
  font-size:var(--fs-micro)!important;
  color:var(--text-2);
}
.sl-widget .tagcloud a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* 侧栏场所小卡 */
.sl-side-venue{
  display:flex;
  gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
}
.sl-side-venue:last-child{border-bottom:0}
.sl-side-venue__thumb{
  width:64px;height:52px;flex:none;
  background:var(--mist-2);
  border-radius:var(--r-xs);
  overflow:hidden;
}
.sl-side-venue__thumb img{width:100%;height:100%;object-fit:cover}
.sl-side-venue__body{min-width:0}
.sl-side-venue__name{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin:0 0 3px;line-height:1.4}
.sl-side-venue__name a{color:inherit}
.sl-side-venue__name a:hover{color:var(--accent)}
.sl-side-venue__meta{font-size:var(--fs-micro);color:var(--text-3);margin:0}

/* 分页 */
.sl-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  margin-top:var(--s8);
  padding-top:var(--s6);
  border-top:1px solid var(--line);
}
.sl-pager .page-numbers{
  display:grid;
  place-items:center;
  min-width:40px;height:40px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:var(--r-full);
  font-size:var(--fs-sm);
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
  transition:all var(--dur) var(--ease);
}
.sl-pager .page-numbers:hover{border-color:var(--line-strong);color:var(--text)}
.sl-pager .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sl-pager .page-numbers.dots{border-color:transparent}
.sl-pager .prev,.sl-pager .next{padding:0 18px}

/* ==========================================================================
   10. 响应式
   ========================================================================== */

@media (max-width:1200px){
  .sl-footer__grid{grid-template-columns:repeat(3,1fr)}
  .sl-footer__brand{grid-column:1 / 2}
}

@media (max-width:1024px){
  .sl-nav{display:none}
  .sl-burger{display:flex}
  .sl-actions .sl-btn{display:none}
  .sl-entry{grid-template-columns:minmax(0,1fr)}
  .sl-side{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6)}
  .sl-venues{grid-template-columns:repeat(2,1fr)}
  .sl-quick{grid-template-columns:repeat(2,1fr)}
  .sl-gallery-grid{grid-template-columns:repeat(2,1fr)}
  .sl-venue-hero{grid-template-columns:minmax(0,1fr)}
  .sl-venues--list .sl-venue__media{width:200px}
}

/* ========================================================================== */
/* 16. 暖橙本地生活风（覆盖层） */
/* 适合区域推荐、到店决策与微信/QQ咨询场景；不改变 HTML 与 SEO 输出。 */
/* ========================================================================== */
:root{
  --paper:#FFF9F2;--paper-warm:#F7EBDD;--mist:#FFFFFF;--mist-2:#FFF1E4;
  --ink:#2B1D17;--ink-2:#513B31;--strong:#2B1D17;--text:#35251E;--text-2:#735F54;--text-3:#A18C80;--text-4:#C4B2A6;
  --accent:#E76532;--accent-rgb:231,101,50;--accent-2:#F29445;--accent-2-deep:#B94320;--accent-soft:rgba(231,101,50,.11);--accent-ink:#fff;
  --teal:#278A73;--teal-rgb:39,138,115;--line:rgba(79,45,28,.12);--line-2:rgba(79,45,28,.21);--line-strong:rgba(79,45,28,.32);
  --fade:rgba(79,45,28,.045);--overlay:rgba(50,29,19,.58);--surface-blur:rgba(255,249,242,.9);--shadow-lg:rgba(110,60,27,.16);--shadow-md:rgba(110,60,27,.1);--shadow-color:rgba(110,60,27,.14);--grid-line:rgba(110,60,27,.035);--grid-dot:rgba(110,60,27,.1);
  --r-xs:8px;--r-sm:12px;--r-md:18px;
}
body{background:var(--paper);color:var(--text)}
.sl-header{background:rgba(255,249,242,.92);border-bottom:1px solid rgba(110,60,27,.12);box-shadow:0 5px 24px -20px rgba(110,60,27,.45)}
.sl-brand__mark{background:linear-gradient(145deg,var(--accent),#F39A4A);border-radius:12px;box-shadow:0 7px 18px rgba(231,101,50,.25)}
.sl-brand__name,.sl-nav a{color:var(--ink)}
.sl-nav a:hover,.sl-nav .current-menu-item>a{color:var(--accent)}
.sl-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#FFF4E7 0%,#FFF9F2 58%,#FBE4D1 100%);border-bottom:1px solid var(--line)}
.sl-hero:after{content:"";position:absolute;right:-100px;top:-130px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(231,101,50,.19),rgba(231,101,50,0) 66%);pointer-events:none}
.sl-hero__title{color:var(--ink);letter-spacing:-.045em}
.sl-hero__title em{color:var(--accent);font-style:normal}
.sl-hero__eyebrow{color:var(--accent-2-deep);font-weight:700;letter-spacing:.12em}
.sl-hero__lead{color:var(--text-2)}
.sl-btn{border-radius:var(--r-full);box-shadow:0 8px 16px -11px rgba(178,67,32,.8);font-weight:700}
.sl-btn:hover{transform:translateY(-2px);box-shadow:0 12px 20px -12px rgba(178,67,32,.85)}
.sl-btn--ghost{background:rgba(255,255,255,.55);border-color:rgba(231,101,50,.35);color:var(--accent-2-deep)}
.sl-section--mist{background:linear-gradient(180deg,#FFF1E4 0%,#FFF9F2 100%)}
.sl-head__num{color:var(--accent)}
.sl-head__title{color:var(--ink);letter-spacing:-.025em}
.sl-head__sub{color:var(--text-2)}
.sl-quick__item,.sl-venue,.sl-widget{border-color:var(--line);border-radius:var(--r-md);box-shadow:0 14px 30px -25px var(--shadow-color);background:var(--mist)}
.sl-quick__item:hover,.sl-venue:hover{border-color:rgba(231,101,50,.42);box-shadow:0 18px 34px -25px rgba(178,67,32,.6);transform:translateY(-3px)}
.sl-quick__name,.sl-venue__title a{color:var(--ink)}
.sl-quick__arrow,.sl-venue__meta{color:var(--accent)}
.sl-chips a{border-radius:var(--r-full);background:#FFF0E3;border-color:rgba(231,101,50,.2);color:var(--accent-2-deep)}
.sl-chips a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.sl-venue__media{border-radius:var(--r-sm);overflow:hidden}
.sl-venue__media img{transition:transform .35s ease}.sl-venue:hover .sl-venue__media img{transform:scale(1.04)}
.sl-badge{border-radius:var(--r-full);background:var(--accent);color:#fff}
.sl-contact-prompt{background:linear-gradient(110deg,#FFF0E2,#FFF9F2);border-color:rgba(231,101,50,.25);box-shadow:0 15px 30px -24px rgba(178,67,32,.8)}
.sl-footer{background:#2B1D17;color:#FBEBDD}.sl-footer a{color:#FBEBDD}.sl-footer a:hover{color:#F5A46A}.sl-footer__contact-lead{color:#D8BFB0}
.sl-mbar{background:rgba(255,249,242,.96);border-top-color:rgba(110,60,27,.16)}
@media(max-width:640px){.sl-hero{padding-top:16px}.sl-hero__title{font-size:clamp(31px,9vw,45px)}.sl-section{padding-block:42px}.sl-venue__body{padding:15px 14px 17px}}

/* Hero 移动端改 flex —— grid 会为隐藏列保留空间导致内容偏左 */
@media (max-width:768px){
  html{scroll-padding-top:76px}
  .sl-hero__inner{display:flex;flex-direction:column;gap:var(--s6);align-items:stretch}
  .sl-hero__title{max-width:none;font-size:clamp(30px,8.4vw,42px)}
  .sl-hero__aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--s5)}
  .sl-header__bar{min-height:62px;gap:var(--s3)}
  .sl-grid--2,.sl-grid--3,.sl-grid--4{grid-template-columns:1fr}
  .sl-venues{grid-template-columns:1fr}
  .sl-side{grid-template-columns:1fr}
  .sl-footer__grid{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
  .sl-footer__brand{grid-column:1 / -1}
  .sl-postnav{grid-template-columns:1fr}
  .sl-postnav__next{text-align:left;align-items:flex-start}
  .sl-matrix{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .sl-head{flex-wrap:wrap;align-items:flex-start;gap:var(--s2) var(--s4)}
  .sl-head__more{margin-left:auto}
  .sl-venues--list .sl-venue{flex-direction:column}
  .sl-venues--list .sl-venue__media{width:100%;aspect-ratio:16/10}
  .sl-venue-facts__row{grid-template-columns:80px 1fr;gap:var(--s3)}
  .sl-author{flex-direction:column;gap:var(--s3)}
  .sl-toolbar{gap:var(--s2) var(--s3)}
  .sl-comment .children{padding-left:var(--s3)}
}

@media (max-width:480px){
  :root{--gutter:18px}
  .sl-quick{grid-template-columns:1fr}
  .sl-gallery-grid{grid-template-columns:1fr}
  .sl-section{padding-block:52px}
  .sl-hero{padding-block:44px}
  .sl-hero__cta{flex-direction:column;align-items:stretch}
  .sl-hero__cta .sl-btn{width:100%}
  .sl-footer__grid{grid-template-columns:1fr}
  .sl-stats__num{font-size:26px}
  .sl-stats li{flex-direction:column;align-items:flex-start;gap:4px}
  .sl-stats__label{text-align:left}
  .sl-post-head__meta{gap:var(--s2) var(--s4)}
  .sl-venue-facts__row{grid-template-columns:1fr;gap:2px}
  .sl-venue-facts__row dt{padding-top:0}
  .sl-top{right:14px;bottom:14px}
  .sl-header__bar{gap:var(--s2)}
}

/* ==========================================================================
   11. 无障碍与打印
   ========================================================================== */

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.sl-btn:focus-visible,
.sl-iconbtn:focus-visible{outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .sl-fade{opacity:1;transform:none}
  .sl-venue__media img,.sl-gallery-grid img{transition:none}
  .sl-hero__eyebrow::before{animation:none}
}

/* 滚动入场 —— 默认可见（禁用 JS 时不至于白屏），加 .sl-fade 后才需要触发 */
.sl-fade{opacity:1;transform:none}
.sl-js .sl-fade{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sl-js .sl-fade.is-in{opacity:1;transform:none}

@media print{
  .sl-header,.sl-footer,.sl-side,.sl-top,.sl-lightbox,.sl-drawer,.sl-breadcrumb{display:none!important}
  body{color:#000;background:#fff;font-size:12pt}
  body::before,body::after{display:none!important}
  .sl-entry{display:block}
  .sl-content a{color:#000;border:0}
  .sl-content a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .sl-content>h2{border-top:0;padding-top:0;page-break-after:avoid}
  .sl-venue,.sl-author,.sl-postnav a{background:#fff;border-color:#ddd;color:#000}
  img{page-break-inside:avoid}
}

/* ==========================================================================
   12. 移动端体验层（底部固定导航 / 首屏推荐区 / 微信 QQ 弹层）

   SEO 说明：本节所有隐藏都走媒体查询，桌面与手机输出的是同一份 HTML，
   爬虫按移动端视口抓取时推荐区与导航均为可见状态，因此不影响收录与权重。
   ========================================================================== */

/* ---- 底部固定导航 —— 随滚动常驻，仅 ≤1024px 显示 ---- */
.sl-mbar{
  position:fixed;
  left:0;right:0;bottom:0;
  /* 用 vw 给宽度兜底：即使 document 被某个宽元素撑开（例如右侧停靠的
     抽屉菜单在旧浏览器下仍参与溢出计算），导航条也始终等于视口宽度，
     这样 5 个入口一定平分屏宽，不会出现最后一项被推出屏幕的情况。 */
  width:100%;
  max-width:100vw;
  box-sizing:border-box;
  z-index:70;
  display:flex;
  align-items:stretch;
  background:var(--surface-blur);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  backdrop-filter:saturate(150%) blur(16px);
  border-top:1px solid var(--line);
  /* 全面屏底部安全区（iPhone 刘海屏 / 手势条） */
  padding-bottom:env(safe-area-inset-bottom,0);
}
.sl-mbar__item{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:56px;
  padding:7px 2px 6px;
  background:transparent;
  border:0;
  color:var(--text-3);
  font-family:var(--font-body);
  font-size:10.5px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.sl-mbar__item svg{
  width:22px;height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
  transition:transform var(--dur) var(--ease);
}
.sl-mbar__item span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sl-mbar__item:hover{color:var(--text)}
.sl-mbar__item:active{color:var(--accent)}
.sl-mbar__item.is-on,
.sl-mbar__item[aria-current="page"]{color:var(--accent)}

/* ---- 弹层背板 ---- */
.sl-mbackdrop{
  position:fixed;
  inset:0;
  z-index:85;
  background:var(--overlay);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.sl-mbackdrop.is-open{opacity:1}

/* ---- 底部弹层（bottom sheet） ---- */
.sl-msheet{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:92;
  background:var(--mist);
  border-top:1px solid var(--line-2);
  border-radius:16px 16px 0 0;
  padding:var(--s3) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom,0));
  transform:translateY(102%);
  transition:transform .34s var(--ease);
  box-shadow:0 -24px 64px -24px var(--shadow-lg);
  /* 弹层自身可滚，避免小屏横向或纵向溢出 */
  overflow-y:auto;
  max-height:82vh;
}
.sl-msheet.is-open{transform:none}
.sl-msheet__handle{
  width:38px;height:4px;
  margin:0 auto var(--s4);
  background:var(--line-strong);
  border-radius:var(--r-full);
}
.sl-msheet__title{
  margin:0 0 var(--s3);
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  text-align:center;
}
.sl-msheet__id{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--s2) var(--s3);
  margin:0 0 var(--s5);
}
.sl-msheet__label{font-size:var(--fs-xs);color:var(--text-3)}
.sl-msheet__id strong{
  font-family:var(--font-mono);
  font-size:clamp(20px,6vw,24px);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--accent);
  word-break:break-all;
}
.sl-msheet__actions{display:flex;flex-direction:column;gap:var(--s3)}
.sl-msheet__hint{
  margin:var(--s4) 0 0;
  font-size:var(--fs-micro);
  color:var(--text-3);
  text-align:center;
  line-height:1.6;
}

/* ---- 复制成功提示 ---- */
.sl-mtoast{
  position:fixed;
  left:50%;
  bottom:calc(76px + env(safe-area-inset-bottom,0));
  transform:translate(-50%,8px);
  z-index:130;
  max-width:calc(100vw - 40px);
  padding:9px 20px;
  background:var(--mist-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  font-size:var(--fs-xs);
  color:var(--text);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sl-mtoast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---- 首屏推荐区（移动端专属，横滑卡片） ---- */
.sl-mfeat{
  padding-block:var(--s5) var(--s6);
  border-bottom:1px solid var(--line);
  background:var(--paper-warm);
  display:flex;
  flex-direction:column;
  gap:var(--s6);
}
.sl-mfeat__block{min-width:0}
/* 横滑轨道的溢出只在轨道内部滚动，不允许影响文档宽度 */
.sl-mfeat{overflow-x:hidden}
.sl-mfeat__rail{max-width:100%}
.sl-mfeat__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s4);
  padding-inline:var(--gutter);
  margin-bottom:var(--s4);
}
.sl-mfeat__head h2{
  margin:0;
  font-size:var(--fs-h3);
  letter-spacing:-.02em;
}
.sl-mfeat__head a{
  flex:none;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
}

/* 横滑轨道：scroll-snap 吸附 + 隐藏滚动条 + 触控惯性 */
.sl-mfeat__rail{
  display:flex;
  gap:var(--s3);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  padding:0 var(--gutter) var(--s2);
  scrollbar-width:none;
}
.sl-mfeat__rail::-webkit-scrollbar{display:none}

/* 卡片 */
.sl-mcard{
  flex:0 0 68%;
  max-width:250px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  transition:border-color var(--dur) var(--ease);
}
.sl-mcard:active{border-color:var(--line-2)}
.sl-mcard--post{flex-basis:58%;max-width:210px}
.sl-mcard__media{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--mist-2);
}
.sl-mcard__media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.sl-mcard__badge{position:absolute;top:8px;left:8px;z-index:2}
.sl-mcard__body{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:11px 13px 13px;
}
.sl-mcard__title{
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sl-mcard__price{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent-2);
}
.sl-mcard__meta{
  font-size:var(--fs-micro);
  color:var(--text-3);
}

/* ==========================================================================
   移动端适配：底部留白 / 元素避让 / 桌面端彻底隐藏
   ========================================================================== */

@media (max-width:1024px){
  /* 只有开启导航时才留白，避免用户关掉后出现多余空白。
     留白 = 导航实高(59) + 余量(15)，安全区单独叠加。
     必须给足：页面末尾可能存在页脚之外的区块（例如 WordPress 分类区块），
     留白不够时它们会落在固定导航下面，手机上点不到。 */
  body.sl-has-mbar{
    padding-bottom:calc(90px + env(safe-area-inset-bottom,0));
  }
  html{scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom,0) + 12px)}
  /* 回到顶部按钮上移到导航之上，避免被遮住 */
  body.sl-has-mbar .sl-top{
    bottom:calc(90px + env(safe-area-inset-bottom,0));
    right:16px;
  }
  /* 页脚之后不再留白（body 的 padding-bottom 已负责），
     真正需要额外避让的是"页面内容直接结束"的情形 */
  body.sl-has-mbar .sl-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom,0))}
  /* 文章页侧栏在手机上不再吸顶（固定导航会与吸顶元素互相压盖） */
  .sl-side{position:static}
  /* 移动端弹层打开时锁定背景滚动由 JS 控制，这里只兜底 */
  .sl-mbackdrop[hidden],
  .sl-msheet[hidden]{display:none}
}

/* 桌面端：移动端体验层不参与布局、不可聚焦、不占空间 */
@media (min-width:1025px){
  .sl-mbar,
  .sl-mbackdrop,
  .sl-msheet,
  .sl-mtoast,
  .sl-mfeat{display:none!important}
}

/* 小屏进一步收窄卡片，保证一屏能看到下一张的边缘（提示可横滑） */
@media (max-width:420px){
  /* 16px 太挤，正文会贴到屏幕边缘；18px 是手机上更舒服的安全留白 */
  :root{--gutter:18px}
  .sl-mcard{flex-basis:76%;max-width:230px}
  .sl-mcard--post{flex-basis:66%;max-width:200px}
  .sl-msheet__id strong{font-size:20px}
  .sl-mbar__item{font-size:11px}
  .sl-mbar__item svg{width:21px;height:21px}
}

/* 打印时不要出现底部导航与弹层 */
@media print{
  .sl-mbar,.sl-mbackdrop,.sl-msheet,.sl-mtoast,.sl-mfeat{display:none!important}
  body.sl-has-mbar{padding-bottom:0}
}


/* ==========================================================================
   14. 手机端体验优化（仅 ≤768px 生效）

   设计目标：把"能用"提升到"舒展"，同时保持信息密度。
   全部为 CSS 层调整，不改动任何 HTML 结构与文案，对 SEO 无影响。
   ========================================================================== */

@media (max-width:768px){

  /* ---- 页头条：给长站点名让出空间，保证搜索/汉堡按钮永远在屏幕内 ---- */
  .sl-header__bar{gap:var(--s3);min-height:60px}
  .sl-brand{gap:10px}
  .sl-brand__mark{width:32px;height:32px;font-size:14px}
  .sl-brand__name{font-size:16px}
  /* 副标只有 10px，手机上读不出信息却要占一行高度，直接隐去 */
  .sl-brand__tag{display:none}
  .sl-actions{gap:var(--s2);flex:none}

  /* ---- 首屏节奏 ---- */
  .sl-section{padding-block:44px}
  .sl-hero{padding-block:38px 34px}
  .sl-hero__lead{font-size:15.5px;line-height:1.8}
  .sl-hero__eyebrow{font-size:11px;margin-bottom:18px}
  .sl-hero__cta{gap:10px}

  /* ---- 板块标题：小屏收紧，避免右侧"查看全部"被挤到第二行 ---- */
  .sl-head{margin-bottom:24px;padding-bottom:12px}
  .sl-head__title{font-size:21px}
  .sl-head__sub{font-size:13px;margin-top:2px}
  .sl-head__more{font-size:12px}

  /* ---- 卡片内边距收紧一档，一屏能看到更多内容 ---- */
  .sl-venue__body{padding:18px}
  .sl-venue__title{font-size:17px}
  .sl-venue__desc{font-size:13.5px}

  /* ---- 区域快捷卡：按压反馈（手机上 hover 不可靠） ---- */
  .sl-quick__item{padding:18px}
  .sl-quick__item:active{transform:scale(.985);border-color:var(--line-2)}

  /* ---- 品类胶囊：加大触控面积 ---- */
  .sl-chips{gap:8px}
  .sl-chips a{padding:10px 16px;font-size:13.5px}

  /* ---- 文章正文：行高与标题层级更适应小屏阅读 ---- */
  .sl-post-head h1{font-size:26px;line-height:1.25}
  .sl-post-head__meta{font-size:12px;gap:var(--s2) var(--s4)}
  .sl-content{font-size:16.5px;line-height:1.9}
  .sl-content>p:first-of-type{font-size:16.5px}
  .sl-content h2{font-size:21px;margin-top:36px;padding-top:20px}
  .sl-content h3{font-size:18px;margin-top:28px}

  /* ---- 问答：加大点击行高 ---- */
  .sl-faq summary{font-size:16px;padding:18px 0}

  /* ---- 表单：输入框高度更适合手指 ---- */
  .sl-input,.sl-select,.sl-textarea{padding:13px 15px}

  /* ---- 侧栏小工具：卡片化，与正文区分开 ---- */
  .sl-side{gap:var(--s5)}
  .sl-widget{
    background:var(--mist);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:var(--s4) var(--s5);
    box-shadow:0 8px 24px -20px rgba(20,21,26,.25);
  }

  /* ---- 页脚：小屏留白更透气 ---- */
  .sl-footer{padding-block:44px 20px}
  .sl-footer__grid{gap:28px var(--s5)}
  .sl-footer__bottom{justify-content:flex-start;gap:8px}
}

/* ==========================================================================
   15. 手机端底部导航微调（仅 ≤1024px）
   ========================================================================== */

@media (max-width:1024px){
  /* 11.5px 在手机上清晰可读，同时 5 项仍能平分屏宽 */
  .sl-mbar__item{
    gap:4px;
    min-height:58px;
    padding:8px 2px 7px;
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.01em;
    position:relative;
  }
  /* 选中项：图标微放大 + 上方一条短指示条，比单纯变色更明确 */
  .sl-mbar__item.is-on svg,
  .sl-mbar__item[aria-current="page"] svg{transform:translateY(-1px) scale(1.06)}
  .sl-mbar__item.is-on::before,
  .sl-mbar__item[aria-current="page"]::before{
    content:"";
    position:absolute;
    top:2px;
    left:50%;
    transform:translateX(-50%);
    width:18px;
    height:2px;
    border-radius:var(--r-full);
    background:var(--accent);
    box-shadow:0 0 8px rgba(var(--accent-rgb),.55);
  }
  /* 按钮类（微信/QQ）按下时给一点背景反馈 */
  .sl-mbar__item:active{background:var(--fade)}
}