/* 主题 v1 · 老相册 · 与《设计规范-v1.md》一一对应 */
:root{
  --paper:#F2E8D5;
  --paper-2:#F8F1E2;
  --paper-3:#FCF7EA;
  --ink:#3A2C1B;
  --ink-2:#6E5A3E;
  --ink-3:#9A8666;
  --line:rgba(74,58,34,.16);
  --line-strong:rgba(74,58,34,.30);

  --accent:#A6532C;
  --accent-ink:#7A3B1E;

  --p1:#A6532C;
  --p2:#5C7A4F;
  --p3:#77589A;

  --photo:#FFFFFF;
  --photo-back:#E7DCC4;

  --serif:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:4px;
  --r-md:6px;

  --sh-1:0 1px 2px rgba(74,58,34,.08);
  --sh-2:0 6px 18px rgba(74,58,34,.12);

  --hdr:64px;
  /* 详情页头部条高度（含 1px 下边线）与内容上内边距，左栏的 sticky 起点靠这两者算 */
  --tvbar:57px;
  --tvpad:30px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- 顶栏 ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; height:var(--hdr); z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 24px; background:rgba(242,232,213,.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:9px; white-space:nowrap}
.brand b{font-weight:600; font-size:17px; letter-spacing:.12em}
.brand span{font-size:10px; color:var(--ink-3); letter-spacing:.18em}
.head-right{display:flex; align-items:center; gap:20px}
.nav{display:flex; gap:2px}
.nav a{
  font-size:14px; color:var(--ink-2); padding:6px 10px;
  border-bottom:2px solid transparent; transition:.16s; letter-spacing:.06em;
}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--ink); border-bottom-color:var(--ink)}

/* ---------- 阶段筛选 ---------- */
.phase{display:flex; gap:2px}
.phase button{
  appearance:none; border:0; border-bottom:2px solid transparent; background:transparent;
  color:var(--ink-2); font-family:var(--serif); font-size:13px; padding:7px 11px 5px;
  cursor:pointer; display:flex; align-items:center; gap:6px; transition:.16s; letter-spacing:.06em;
}
.phase button i{width:7px; height:7px; border-radius:50%; display:block; border:1px solid currentColor}
.phase button[data-p="全部"] i{border-color:var(--ink-3)}
.phase button[data-p="恋爱"] i{background:var(--p1); border-color:var(--p1)}
.phase button[data-p="婚后"] i{background:var(--p2); border-color:var(--p2)}
.phase button[data-p="有娃"] i{background:var(--p3); border-color:var(--p3)}
.phase button:hover{color:var(--ink)}
.phase button.active{color:var(--ink); border-bottom-color:var(--ink)}
.phase.overlay{
  position:absolute; z-index:20; left:50%; top:18px; transform:translateX(-50%);
  background:rgba(248,241,226,.92); border:1px solid var(--line);
  padding:4px 6px; border-radius:var(--r-md); box-shadow:var(--sh-1);
}

/* ---------- 视图容器 ---------- */
.view-scroll{
  padding:calc(var(--hdr) + 28px) 24px 88px;
  max-width:1040px; margin:0 auto;
}
.view-map{position:fixed; top:var(--hdr); left:0; right:0; bottom:0}

/* ---------- 总览：地图 ---------- */
.map{position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.35), transparent 60%)}
.map .arcs{position:absolute; inset:0; width:100%; height:100%}
/* z-index:0 是为了形成独立层叠上下文 —— 腾讯地图 SDK 会在容器内部塞入
   z-index:1000 的图层，不隔离的话它会盖住弹卡、筛选项等所有界面元素。 */
.tmap{position:absolute; inset:0; z-index:0; background:#EFEDE8}
.arc{fill:none; stroke:#9A7B52; stroke-width:.3; stroke-dasharray:1.4 .9; opacity:.8}
.dots{position:absolute; inset:0}
.pin{position:absolute; width:0; height:0}
.dot{
  position:absolute; left:-10px; top:-10px; width:20px; height:20px;
  border-radius:50%; border:1.5px solid #6A563A; background:transparent;
  cursor:pointer; transition:transform .18s; padding:0;
}
.dot::before{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--c)}
.dot:hover{transform:scale(1.15)}
.dot.on{transform:scale(1.3); border-color:var(--ink)}
/* 点旁标注：年月 + 目的地 */
.pin-lb{
  position:absolute; left:15px; top:0; transform:translateY(-50%);
  white-space:nowrap; font-size:11.5px; color:#4A3B28; letter-spacing:.06em;
  background:rgba(248,241,226,.92); border:1px solid #D6C9AE; padding:1px 5px;
  font-family:var(--serif); pointer-events:none;
}
.pin-lb.flip{left:auto; right:15px}

.stat{
  position:absolute; top:20px; left:20px; z-index:20;
  background:var(--paper-2); border:1px solid var(--line); padding:16px 20px 13px;
  min-width:230px; box-shadow:var(--sh-1); border-radius:var(--r-md);
}
.stat .big{font-size:38px; font-weight:600; line-height:1; display:flex; align-items:baseline; font-family:var(--mono)}
.stat .big .n{font-family:var(--mono); letter-spacing:-.02em}
/* 单位只作用于 .u，别写成 .big span —— 那会把数字也一起压成小字号、并多出 7px 缩进 */
.stat .big .u{font-size:13px; font-weight:400; color:var(--ink-2); margin-left:7px; letter-spacing:.08em; font-family:var(--serif)}
.stat .row{margin-top:9px; font-size:12px; color:var(--ink-2); line-height:1.75}
.stat .row b{font-weight:600; color:var(--ink)}
.stat .tagline{margin-top:11px; padding-top:9px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-3); letter-spacing:.08em}

.map-note{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:19;
  font-size:10px; letter-spacing:.14em; color:var(--ink-3); opacity:.8; white-space:nowrap;
}

/* ---------- 弹卡 ---------- */
.trip{
  /* 桌面端留出底部 52px，让腾讯地图的 logo 与比例尺保持可见 */
  position:absolute; left:20px; bottom:52px; z-index:22; width:322px;
  background:var(--paper-2); border:1px solid var(--line); padding:15px 16px 13px;
  border-radius:var(--r-md); box-shadow:var(--sh-2);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.trip.show{opacity:1; transform:none; pointer-events:auto}
.trip-head{display:flex; gap:12px; align-items:flex-start}
.ph{
  width:58px; height:58px; flex:0 0 58px; background:var(--photo-back);
  border:1px solid #D5C8AC; padding:4px;
}
.ph div{width:100%; height:100%; background:#DED0B2; display:grid; place-items:center; font-size:9px; color:var(--ink-3); letter-spacing:.1em}
.ph img{width:100%; height:100%; object-fit:cover; display:block}
.trip-txt{flex:1; min-width:0}
/* 目的地 + 年月同一行，年月小一号、留 10px 间隔 */
.trip-title{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.trip-city{font-size:20px; font-weight:600; letter-spacing:.1em; line-height:1.25}
.trip-when{font-size:12px; font-weight:400; color:var(--ink-2); letter-spacing:.02em}
.trip-meta{font-size:11px; color:var(--ink-2); margin-top:5px; letter-spacing:.06em}
.trip-x{margin-left:auto; appearance:none; border:0; background:transparent; cursor:pointer; color:var(--ink-3); font-size:17px; line-height:1; padding:0 0 0 8px}
.trip-x:hover{color:var(--ink)}
/* 一句话在左、入口在右下，两者同一行 */
.trip-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:12px}
.trip-line{margin:0; flex:1; min-width:0; font-size:13px; line-height:1.75; color:#4A3B28}
.trip-go{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:12px; letter-spacing:.06em; color:var(--ink); text-decoration:none;
  border:1px solid var(--line-strong); border-radius:2px; padding:4px 9px 3px;
  background:rgba(255,255,255,.4); transition:.16s;
}
.trip-go i{font-style:normal; transition:transform .16s}
.trip-go:hover{background:var(--paper-3); border-color:var(--ink)}
.trip-go:hover i{transform:translateX(2px)}

/* ---------- 阶段徽章 ---------- */
.badge{
  display:inline-block; font-size:11px; letter-spacing:.1em; color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:2px; padding:1px 7px;
}
.badge::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c); margin-right:5px; vertical-align:1px}

/* ---------- 页面标题 ---------- */
.page-head{margin:4px 0 28px}
.page-head h1{font-size:26px; font-weight:600; letter-spacing:.08em; margin:0}
.page-head p{margin:8px 0 0; font-size:13px; color:var(--ink-2); letter-spacing:.04em}

/* ---------- 时间线：左年份 / 右卡片 ---------- */
/* 结构照着详情页排：左边一列元信息、右边内容，同一个 max-width 节奏。
   这样从列表点进详情时，左右骨架不变，只是左栏由「年份」换成「目的地」。 */
/* 卡片最宽 760：列表一行不该宽到内容撑不满。
   撑到 940 时，右边会空出三分之一，看着像框没填完 */
.tlx{display:flex; flex-direction:column; gap:46px}

.tlx-y{display:flex; gap:52px}

/* 年份栏跟详情页左栏一样是 sticky：一个年份下卡片多时，年份一直挂在旁边 */
.tlx-side{
  flex:0 0 132px; width:132px;
  position:sticky; top:calc(var(--hdr) + 22px); align-self:flex-start;
}
.tlx-side b{display:block; font-size:26px; font-weight:600; letter-spacing:.06em; line-height:1.1}
.tlx-side span{display:block; margin-top:7px; font-size:12px; color:var(--ink-3); letter-spacing:.1em}

.tlx-cards{flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; max-width:760px}

.tlx-card{
  display:flex; gap:22px; align-items:flex-start;
  padding:16px 20px 16px 16px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1); transition:box-shadow .18s, transform .18s;
}
.tlx-card:hover{box-shadow:var(--sh-2); transform:translateY(-1px)}
.tlx-card:focus-visible{outline:2px solid var(--ink-2); outline-offset:2px}

/* 相纸：白边 + 极轻的倾斜，时间线是全站唯一保留倾斜的地方（卡片大、数量少）。
   照片给到 4:3 的 200×148，是因为卡片是整栏宽——104 的小方块放进去，
   右边会空出一大半，看着像个没填内容的框 */
.tlx-ph{
  flex:0 0 200px; width:200px; height:148px; padding:5px;
  background:var(--photo); border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(74,58,34,.14);
  transform:rotate(-1.2deg);
}
.tlx-ph img{width:100%; height:100%; object-fit:cover; display:block; background:var(--photo-back)}
.tlx-ph div{
  width:100%; height:100%; background:var(--photo-back);
  display:grid; place-items:center; font-size:10px; color:var(--ink-3); letter-spacing:.1em;
}

.tlx-body{flex:1; min-width:0; padding-top:6px}
.tlx-title{font-size:24px; font-weight:600; letter-spacing:.06em; line-height:1.3}
/* 元信息跟日头同一套：同字号、同字距、同一个 gap，只靠颜色分先后 */
.tlx-meta{
  display:flex; align-items:center; gap:9px; margin-top:8px;
  font-size:13px; color:var(--ink-2); letter-spacing:.04em;
  /* 跨月行程的「2016.12 – 2017.01」很长，手机上这一行放不下。
     允许整段换行，但每一段本身不许断——否则「婚后」会被拆成「婚 / 后」 */
  flex-wrap:wrap;
}
.tlx-meta > span{white-space:nowrap}
.tlx-phase{color:var(--c)}
.tlx-sep{display:block; width:1px; height:11px; background:var(--line-strong); flex:0 0 auto}
.tlx-line{margin-top:12px; font-size:14px; line-height:1.75; color:#4A3B28}
.tlx-line.muted{color:var(--ink-3)}

/* ---------- 详情：左信息 / 右照片 ---------- */
/* 详情页不要站点头部，左上角只留「← 全部旅行」 */
body[data-route="trip"] .site-head{display:none}
body[data-route="trip"] .demo-badge{display:none}

/* 详情页自己的头部条：结构照抄首页 .site-head（通栏 + 毛玻璃 + 1px 下分隔线），
   只把底色从 paper 换成浅一阶的 paper-2 —— 首页头部与内容同色，靠线分界；
   详情页内容更长，加一档底色差才看得出"这是一条头，下面是内容"。
   不透明度要比首页的 .88 高：首页头部下面是浅色地图，透出来不明显；
   这里下面是密集照片，.88 会让上排照片的暖色透上来发花。 */
.tv-bar{
  position:sticky; top:0; z-index:20;
  background:rgba(248,241,226,.965);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  /* paper-2 与 paper 只差 13 个色阶，单靠底色差在小屏上几乎看不出来，
     补一道极轻的投影让它「离开」下面的内容。别加重，重了就变成 App 顶栏。 */
  box-shadow:0 1px 2px rgba(74,58,34,.06);
}
.tv-bar .in{
  max-width:1320px; margin:0 auto; padding:0 40px;
  height:56px; display:flex; align-items:center;
}
/* 手机专用：顶部条取消后接手的浮层返回。桌面端始终不出现 */
.back-float{display:none}

.tv{padding:var(--tvpad) 40px 90px; max-width:1320px; margin:0 auto}
.back{display:inline-block; font-size:14px; color:var(--ink-2); letter-spacing:.06em}
.back:hover{color:var(--ink)}

.tp{display:flex; gap:56px; align-items:flex-start}

/* 左栏固定 340px。不用 1fr/2fr——大屏时按比例会把左栏撑到 440px，
   标题和一句话之间空掉一大片，反而散。
   sticky 的起点必须**正好等于它的自然位置**（头部条高 + 内容上内边距），
   否则一滚动就会先上移那段差值再粘住——那就是「滑一下会位移几像素」的来源。 */
.tp-l{
  flex:0 0 340px; width:340px; position:sticky;
  top:calc(var(--tvbar) + var(--tvpad));
  align-self:flex-start;
}

/* 阶段 + 年月 + 张数：一行元信息，用竖线分隔，不再套徽章边框。
   三格**同字号、同字体**（都继承这里的宋体 15px），只靠颜色区分——
   阶段用阶段色（整站只有它带颜色），年月与张数用 --ink-2。
   原来年月挂的是等宽字体，跟旁边的宋体并排像后贴上去的。 */
.tp-eyebrow{
  display:flex; align-items:center; gap:14px; min-height:26px;
  font-family:var(--serif); font-size:15px; letter-spacing:.1em;
}
.tp-phase{color:var(--c)}
.tp-sep{display:block; width:1px; height:13px; background:var(--line-strong)}
.tp-when,.tp-num{color:var(--ink-2)}

/* 目的地下面一道 2px 实线，**宽度跟着下面那句话走**，不再铺满整个左栏。
   做法是把线挂到 `.tp-line` 的上边框上（不是挂在标题的下边框）：标题是 52px 大字，
   用它自己的盒子量出来的宽度只有「成都」两个字；描述用 `fit-content`，
   宽度就是那句话本身的宽度——线自然跟着它，再用 max-width 兜住长句。
   用 `fit-content` 而不是 `inline-block`：后者会多出一个行盒，下面再接 `.tp-story` 时
   会平白多出十几个像素的空隙。 */
/* 桌面上 .tp-head 只是个普通块：标题独占一行，线挂在描述的顶边、宽度跟描述。
   手机上它变成一行（见 ≤720 的覆盖），同一份 DOM 两套排版。 */
.tp-head{display:block}
.tp-title{font-size:52px; font-weight:600; letter-spacing:.06em; line-height:1.2; margin:20px 0 0}
.tp-line{
  width:fit-content; max-width:288px;
  font-size:24px; line-height:1.75; color:#4A3B28; letter-spacing:.02em;
  margin:22px 0 0; padding-top:18px; border-top:2px solid var(--ink);
}
.tp-line.muted{color:var(--ink-3)}
.tp-story{
  margin-top:30px; padding-top:24px; border-top:1px solid var(--line);
  font-size:16px; line-height:1.95; color:#3A2C1B;
}

/* 右栏 */
.tp-r{flex:1; min-width:0}
.tp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:26px 16px}
.tp-cell{cursor:pointer; outline:none}
.tp-frame{
  background:var(--photo); border:1px solid var(--line); padding:5px;
  box-shadow:var(--sh-1); transition:box-shadow .18s, transform .18s;
}
.tp-cell:hover .tp-frame,
.tp-cell:focus-visible .tp-frame{box-shadow:var(--sh-2); transform:translateY(-2px)}
.tp-frame img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--photo-back)}
.tp-empty{padding:44px 0; font-size:14px; color:var(--ink-3); letter-spacing:.06em}

/* ---------- 按拍摄日期分组 ---------- */
.day + .day{margin-top:40px}

/* 日头吸顶：滚到哪儿都知道现在是哪天。top 与 .tv-bar 等高，正好贴在它下面。
   不给下边线——每日下方那道横线会和「目的地下面那道 2px」抢视线，去掉后一排排照片自己成段 */
/* 日头一行三个信息：日期 / 星期 / 张数。
   只分两级——日期是这一段的标题（15px、500、--ink），星期与张数是同一级的注脚
   （同字号、同色、同字距）。原来三个格子三种字号、三种颜色、三种间距，
   凑在一行谁跟谁都不挨着；现在四个格子（含分隔点）在 flex 里**等间距**，
   靠字号与颜色一次分层就够。
   gap 统一 9px，不再用伪元素 + 负 margin 去凑距离——那种凑法每加一格就要再算一次。 */
.day-head{
  --dd:15px;      /* 日期 */
  --ds:13px;      /* 星期 / 张数 / 分隔点 */
  position:sticky; top:var(--tvbar); z-index:6;
  display:flex; align-items:baseline; gap:9px;
  padding:9px 0 11px; margin-bottom:10px;
  background:var(--paper);
}
/* 字距全行只用 .04em 一个值。原来 15px 那格 .1、13px 那格 .08、张数又 .1，
   三个不同的疏密并排，怎么调都像三句话拼起来的 */
.day-d{font-size:var(--dd); font-weight:500; letter-spacing:.04em; color:var(--ink)}
.day-w{font-size:var(--ds); letter-spacing:.04em; color:var(--ink-2)}
/* 分隔点给一个固定宽的盒子、居中放：字形的左右边距不一样，
   直接当普通文字排会出现「离星期 13px、离张数 10px」这种看着歪的空 */
.day-sep{
  flex:0 0 auto; width:.72em; text-align:center;
  font-size:var(--ds); line-height:1; color:var(--ink-3); letter-spacing:0;
}
.day-n{
  font-size:var(--ds); letter-spacing:.04em; color:var(--ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- 胶卷：一天一排，可左右滑 ---------- */
/* 一排的高度锁死，宽度交给图片自身比例——横图宽、竖图窄，排出来的疏密就是那天的节奏。
   高度不能跟着宽度走：一旦按比例缩放，62 张会把行高撑成负数。
   上下各留 4px 内边距，是给 hover 那个 -2px 抬升留的余量，
   否则 `overflow-y:hidden` 会把照片上边的相纸白边切掉一条。 */
.roll{
  --rollh:112px;
  display:flex; gap:5px;
  height:calc(var(--rollh) + 8px);
  padding:4px 0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  align-items:center;
}
.roll::-webkit-scrollbar{display:none}
.roll .shot{
  flex:0 0 auto; height:var(--rollh); padding:0; cursor:pointer;
  appearance:none; border:0; background:none; line-height:0;
}
.roll .shot img{
  display:block; height:100%; width:auto;
  /* 相纸白边：2px 就够。再宽会变成拍立得，胶卷的连续性就断了 */
  border:2px solid var(--photo);
  background:var(--photo-back);
  box-shadow:0 1px 2px rgba(74,58,34,.10);
  transition:box-shadow .16s, transform .16s;
}
.roll .shot:hover img,
.roll .shot:focus-visible img{box-shadow:0 4px 14px rgba(74,58,34,.22); transform:translateY(-2px)}
.roll .shot:focus-visible{outline:none}

/* 鼠标横向拖动。缩略图本身可点，但整条带子能拖这件事得给个手势提示，
   所以 hover 是 grab、拖起来是 grabbing */
.roll{cursor:grab}
.roll.dragging{cursor:grabbing; user-select:none}
.roll img{-webkit-user-drag:none}

/* 右端渐隐：右边还有照片没看到时才出现。
   滚动条已经藏起来了，不给这个信号，一排排过去的照片看起来就是「被裁掉了」 */
.roll-wrap{position:relative}
.roll-wrap.more::after{
  content:''; position:absolute; top:0; right:0; bottom:0; width:44px;
  background:linear-gradient(to right, rgba(242,232,213,0), var(--paper) 82%);
  pointer-events:none;
}

/* 日头右侧的「看大图」——放在日头上，不压照片 */
.day-open{
  appearance:none; border:0; border-bottom:1px solid var(--line-strong);
  background:none; padding:0 0 1px; font:inherit;
  /* 跟星期、张数同一级字号，否则右端会比左端那截轻一档 */
  font-size:var(--ds); color:var(--ink-2); letter-spacing:.04em;
  cursor:pointer; white-space:nowrap; transition:color .15s, border-color .15s;
}
.day-open{margin-left:auto}
.day-open:hover{color:var(--ink); border-color:var(--ink-2)}

/* ---------- 上一 / 下一 ---------- */
.pager{display:flex; justify-content:space-between; gap:16px; margin:52px 0 8px; border-top:1px solid var(--line); padding-top:22px}
.pager a{font-size:13px; color:var(--ink-2); letter-spacing:.06em; max-width:46%}
.pager a b{display:block; font-weight:600; color:var(--ink); font-size:17px; letter-spacing:.06em; margin-top:3px}
.pager a:hover b{color:var(--accent)}
.pager .next{text-align:right}

/* ---------- 第二层：一天的大图 ---------- */
/* 全屏近黑。这个明暗切换本身就是节奏：列表在暖纸上（轻），大图落进暗房（重）。
   左栏 320px 只回答两件事——今天哪天、这天有多少张。 */
.one{
  position:fixed; inset:0; z-index:100;
  display:none; background:#14100A;
}
.one.on{display:flex}
body.one-on{overflow:hidden; padding-right:var(--sbw,0px)}

.one-l{
  flex:0 0 320px; width:320px;
  padding:30px 34px 30px 40px;
  border-right:1px solid rgba(240,230,206,.10);
  display:flex; flex-direction:column;
}
.one-back{
  appearance:none; border:0; background:none; padding:0;
  font:inherit; font-size:13px; color:rgba(240,230,206,.74);
  letter-spacing:.06em; cursor:pointer; text-align:left;
}
.one-back:hover{color:#F0E6CE}
.one-day{font-size:34px; font-weight:600; letter-spacing:.04em; color:#F0E6CE; margin:26px 0 0; line-height:1.3}
.one-meta{font-size:13px; color:rgba(240,230,206,.64); letter-spacing:.1em; margin-top:10px}

/* 天导航贴在左栏底部。它跟列表上的日头是同一件事，只是换到了暗房里 */
.one-nav{margin-top:auto; padding-top:24px; border-top:1px solid rgba(240,230,206,.10)}
.one-nav-i{
  position:relative;
  display:flex; align-items:baseline; gap:10px; width:100%;
  appearance:none; border:0; background:none; padding:6px 0;
  cursor:pointer; font:inherit; text-align:left;
  color:rgba(240,230,206,.52); transition:color .15s;
}
.one-nav-i:hover{color:rgba(240,230,206,.8)}
.one-nav-i.on{color:#F0E6CE}
.one-nav-i span{font-size:14px; letter-spacing:.06em; min-width:46px}
.one-nav-i.on span{font-weight:500}
.one-nav-i b{
  margin-left:auto; font-size:12px; font-weight:400;
  color:rgba(240,230,206,.46); font-variant-numeric:tabular-nums;
}
/* 当前这天：左侧一道短竖线，沿用页眉的细线语言，不加颜色 */
.one-nav-i.on::before{
  content:''; position:absolute; left:-13px; top:50%;
  width:2px; height:13px; margin-top:-6.5px; background:#F0E6CE;
}

.one-stage{
  flex:1; min-width:0; position:relative;
  display:flex; flex-direction:column;
  padding:30px 40px 0;
}
.one-fig{flex:1; min-height:0; display:flex; align-items:center; justify-content:center}
.one-fig img{
  display:block; max-width:100%; max-height:100%;
  object-fit:contain; background:#0C0906;
}

/* 按钮固定舞台左右两侧，不跟图宽走。翻页是连续动作，位置稳定比"贴着图边"重要：
   竖图横图交替时跟着图走，每翻一两张就横跳 100–190px。 */
.one-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  appearance:none; width:46px; height:46px; border-radius:50%; padding:0;
  display:grid; place-items:center; cursor:pointer; line-height:0;
  background:rgba(18,14,10,.58); border:1px solid rgba(240,230,206,.52);
  color:#F0E6CE; transition:.15s;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* 箭头用 SVG 而不是 ‹ › 字符：serif 字形的字框上下不对称，
   就算 place-items:center 也会看着上偏，这是字符本身的问题，调 padding 治不干净。 */
.one-arrow svg{display:block}
.one-arrow.prev{left:14px}
.one-arrow.next{right:14px}
.one-arrow:hover:not(:disabled){background:rgba(18,14,10,.84); border-color:rgba(232,223,203,.78)}
/* 首尾时按钮不能消失——位置要留住，否则翻到中间会突然"长"出一个按钮。
   这里只淡箭头和边框、**不降整体 opacity**：降 opacity 会把圆底一起弄淡，
   压在浅色照片上就等于完全隐藏，看起来像「这张没有左按钮」。 */
.one-arrow:disabled{
  cursor:default;
  background:rgba(18,14,10,.34);
  border-color:rgba(232,223,203,.16);
  color:rgba(240,230,206,.3);
}

/* 底部：计数 + 进度条。进度条替代页码，一眼看出「在这天的哪儿」 */
.one-foot{flex:0 0 auto; display:flex; align-items:center; gap:18px; padding:18px 0 26px}
.one-num{
  font-size:12px; color:rgba(240,230,206,.68); letter-spacing:.1em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.one-prog{flex:1; height:2px; background:rgba(240,230,206,.16)}
.one-prog i{display:block; height:100%; background:#F0E6CE; transition:width .25s}

/* ---------- 待补占位 ---------- */
.muted{color:var(--ink-3)}
.trip-line.muted,.tl-line.muted{font-style:normal; color:var(--ink-3)}

/* ---------- 示例角标 ---------- */
.demo-badge{
  position:fixed; right:14px; bottom:14px; z-index:60; font-size:10px; letter-spacing:.12em;
  color:var(--ink-3); background:var(--paper-2); border:1px solid var(--line);
  padding:4px 9px; border-radius:2px; opacity:.85;
}

/* 地图页右下角是腾讯地图的版权信息位，这个角标让开，避免压住它 */
body[data-route="map"] .demo-badge{display:none}

/* ---------- 响应式 ---------- */
/* 平板与手机：两栏塌成单栏。1024 是两栏真正挤不下去的界线——
   1320 容器下左栏 340 + 间距 56，右栏剩不到 460 时一排只放得下 2 张，不如整块摞起来。 */
@media (max-width:1023px){
  :root{--tvbar:53px}                 /* 头部条 52 + 1px 下边线，日头与左栏的 sticky 都靠它 */
  .tv-bar .in{padding:0 22px; height:52px}
  .tv{padding:16px 22px 72px}
  .tp{display:block}
  /* 单栏时这一段就是「封面」，它每多占 10px，首屏就少半排照片。
     桌面版那套间距（20 / 18 / 22 / 24）是为了让左栏在 15 屏长页里不显挤；
     手机上整页只有 2 屏，同样的空就成了浪费。
     下边线也去掉了：标题下面那道 2px 已经立住，20px 之外再补一道 1px，
     两道线中间只夹着一行眉标，看着像表格的分隔线。留白就够分段。 */
  .tp-l{
    position:static; width:auto; flex-basis:auto;
    display:flex; flex-direction:column; align-items:flex-start;
    padding-bottom:0; margin-bottom:20px; border-bottom:0;
  }
  /* 单栏时把顺序倒过来：标题 → 一句话 → 元信息。
     屏幕窄，先让人看到「成都」和「一起去看大熊猫」，
     阶段/年月/张数这些定位信息沉到描述下面，不再挡在标题前面。 */
  .tp-head{order:1}
  .tp-title{font-size:40px; margin-top:0}
  .tp-line{font-size:21px; line-height:1.7; margin-top:14px; padding-top:12px}
  .tp-eyebrow{order:2; margin-top:12px; min-height:0; font-size:14px}
  .tp-story{order:3}

  /* 日头：手机上整体压一档，两级关系不变 */
  .day-head{--dd:14px; --ds:12px; top:var(--tvbar); padding:6px 0 8px; margin-bottom:6px; gap:8px}
  .day + .day{margin-top:28px}
  .roll{--rollh:88px; gap:4px}

  /* 大图：左栏落到顶上，横排一行；天导航变成可横滑的窄带 */
  .one{flex-direction:column}
  .one-l{
    flex:0 0 auto; width:auto;
    padding:14px 18px 12px;
    border-right:0; border-bottom:1px solid rgba(240,230,206,.10);
    flex-direction:row; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  /* 顶部这条：返回在左，日期 / 周几 / 张数整体靠右。
     margin-left:auto 把 .one-day 连同跟在它后面的 .one-meta 一起推到右边，
     下面的日期带仍然是独占一行、从左边排 */
  .one-day{font-size:20px; margin:0 0 0 auto}
  .one-meta{margin:0; font-size:12px}
  .one-nav{
    margin:0; padding:0; border:0;
    display:flex; gap:14px; width:100%;
    overflow-x:auto; scrollbar-width:none;
  }
  .one-nav::-webkit-scrollbar{display:none}
  .one-nav-i{width:auto; flex:0 0 auto; padding:0 0 4px; border-bottom:1px solid transparent}
  .one-nav-i.on{border-bottom-color:#F0E6CE}
  .one-nav-i.on::before{display:none}
  .one-nav-i b{display:none}
  .one-stage{padding:0}
  .one-arrow{width:40px; height:40px}
  .one-arrow.prev{left:8px}
  .one-arrow.next{right:8px}
  .one-foot{padding:14px 16px 22px; gap:12px}
}

@media (max-width:720px){
  /* 手机上详情页不再有顶部条，--tvbar 归零（日头在手机上也不吸顶，见下） */
  :root{--hdr:58px; --tvbar:0px}
  .site-head{padding:0 14px; gap:10px}
  .brand span{display:none}
  .brand b{font-size:15px}
  .head-right{gap:12px}
  .nav a{padding:6px 7px; font-size:13px}
  .phase button{padding:6px 9px 4px; font-size:12.5px}
  .view-scroll{padding:calc(var(--hdr) + 20px) 16px 72px}
  /* 地图页在手机上：统计条 → 阶段筛选 → 地图，三段纵向排下来，
     这样筛选条不会被统计条盖住（原来两者都绝对定位在同一处）。 */
  .view-map{display:flex; flex-direction:column}
  .stat{position:relative; order:0; flex:0 0 auto; top:auto; left:auto; right:auto; min-width:0; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:11px 16px 10px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .stat .big{font-size:24px}
  .stat .big .u{font-size:11.5px}
  .stat .row{margin-top:0; font-size:11px}
  .stat .tagline{display:none}
  .map-note{display:none}
  .phase.overlay{
    position:relative; order:1; flex:0 0 auto; left:auto; top:auto; transform:none;
    border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none;
    background:var(--paper-2); padding:0 8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .phase.overlay button{flex:0 0 auto}
  .map,.tmap{position:relative; order:2; flex:1 1 auto; min-height:0; inset:auto; top:auto; left:auto; right:auto; height:auto}
  .trip{left:0; right:0; bottom:0; width:auto; border-left:0; border-right:0; border-bottom:0; border-radius:0; padding-bottom:calc(13px + env(safe-area-inset-bottom))}
  /* 时间线塌成单栏：年份从侧栏变成这一段的小标题 */
  .tlx{gap:34px}
  .tlx-y{display:block}
  .tlx-side{
    position:static; width:auto; flex-basis:auto;
    display:flex; align-items:baseline; gap:10px;
    padding-bottom:0; margin-bottom:16px;
  }
  .tlx-side b{font-size:20px}
  .tlx-side span{margin:0; font-size:12px}
  .tlx-card{gap:14px; padding:12px 14px 12px 11px}
  .tlx-ph{flex-basis:112px; width:112px; height:100px; padding:4px}
  .tlx-body{padding-top:1px}
  .tlx-title{font-size:19px}
  /* 手机上把两条竖线去掉：换行时竖线会落在行尾，看着像掉了一根。
     改用留白分段，一段一段换行是干净的 */
  .tlx-meta{font-size:12px; gap:10px; margin-top:6px}
  .tlx-sep{display:none}
  .tlx-line{font-size:13px; margin-top:8px}

  /* 详情 · 手机
     顶部条整条不要了：它只是为了一个「← 时间轴」，却占满一栏 48px + 上内边距，
     首屏近七分之一交代在这里。改成左上角浮层，滚出 24px 才浮出来。 */
  .tv-bar{display:none}
  .back-float{
    position:fixed; z-index:40;
    top:calc(10px + env(safe-area-inset-top)); left:14px;
    display:inline-flex; align-items:center;
    padding:6px 11px; border-radius:var(--r-md);
    background:rgba(248,241,226,.93);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid var(--line); box-shadow:0 1px 3px rgba(74,58,34,.10);
    font-size:13px; color:var(--ink-2); letter-spacing:.04em;
    opacity:0; transform:translateY(-4px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .back-float.on{opacity:1; transform:none; pointer-events:auto}

  /* 日头在手机上不吸顶：页面只有 1.9 屏，而它一旦吸顶就会正好压在浮层返回钮底下。
     每天只有一排照片，日头永远在它那排的上面，本来也不需要「跟着走」 */
  .day-head{position:static}

  .tv{padding:calc(10px + env(safe-area-inset-top)) 16px 64px}

  /* 标题与一句话并成一行：`成都  一起去看大熊猫`。
     线跟着整体走——这时它属于 .tp-head 的底边，不再是描述的顶边。
     桌面是「线在标题下、宽度跟描述」，手机是「线在整行下、宽度跟整行」。 */
  .tp-head{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    width:fit-content; max-width:100%;
    padding-bottom:12px; border-bottom:2px solid var(--ink);
  }
  .tp-title{font-size:32px; margin:0}
  .tp-line{
    font-size:18px; line-height:1.25; margin:0; padding:0;
    border-top:0; width:auto; max-width:none;
  }
  .tp-grid{grid-template-columns:repeat(3,1fr); gap:16px 10px}
  .tp-frame{padding:4px}
  .pager{margin-top:36px}
  .pager a b{font-size:15px}
  .roll{--rollh:78px; gap:3px}
  .roll .shot img{border-width:1.5px}
  /* 手机上这个渐隐是多余的：被切掉的那半张照片自己就是「还能滑」的信号，
     再叠一道渐隐，最后一张会半透明地化在纸上，看着像图坏了 */
  .roll-wrap.more::after{display:none}
  /* 手机上大图按钮做小一号；位置仍然固定，不跟图宽走 */
  .one-arrow{width:36px; height:36px}
  .one-arrow svg{width:16px; height:16px}
}