/* 落霞来信 · 页面样式
   ------------------------------------------------------------
   按页面分区：首页 / 详情页 / 读信页。
   仅放各页面独有的版式，通用组件见 components.css。
*/

/* ================= 首页 ================= */
.home-top{
  position:relative;z-index:var(--z-top);display:flex;justify-content:space-between;align-items:center;
  /* 下内边距 2px + 「今日特展」按钮自身下内边距 6px = 与展览时间间距 8px */
  padding:var(--sp-4) var(--gutter) 2px;
}
.exhibition{
  font-size:var(--fs-18);font-weight:600;letter-spacing:var(--ls-3);
  display:flex;align-items:center;gap:var(--sp-2);color:var(--ink);padding:6px 0;position:relative;
}
/* 「今日特展」前的状态点：强调色小圆 + 呼吸光晕，表示当天这场展正在进行 */
.exhibition::before{
  content:"";width:6px;height:6px;flex:0 0 6px;border-radius:var(--r-full);
  background:var(--accent);animation:livePulse 2.4s var(--ease) infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(184,84,46,.35);}
  50%{box-shadow:0 0 0 4px rgba(184,84,46,0);}
}
@media (prefers-reduced-motion:reduce){.exhibition::before{animation:none;}}
.exhibition .chev{display:flex;align-items:center;color:var(--ink-soft);transition:transform var(--dur);}
.exhibition .chev svg{display:block;width:10px;height:10px;}
.exhibition.open .chev{transform:rotate(180deg);}
.home-icon-btn{
  width:36px;height:36px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);transition:background var(--dur-fast);
}
.home-icon-btn:hover{background:var(--paper-deep);}
/* 展览时间：默认常显，作为「今日特展」的副标题 */
.exhibition-meta{
  padding:0 var(--gutter) var(--sp-2);
  font-size:var(--fs-12);color:var(--ink-soft);letter-spacing:var(--ls-2);
}

/* 展览下拉：点「今日特展」展开，选中某个展即切换整套首页内容。
   绝对定位浮在 hero 之上，展开时不推挤下方内容；
   选项做成侧边栏式：一条竖线贯穿列表，当前展用强调色竖条 + 浅底标记。 */
.exhibit-anchor{position:relative;height:0;}
.exhibit-drop{
  position:absolute;left:0;right:0;top:0;z-index:var(--z-top);
  overflow:hidden;max-height:0;opacity:0;padding:0 var(--gutter);
  background:var(--paper);
  box-shadow:0 14px 30px rgba(43,37,32,.13);
  transition:max-height .35s var(--ease),opacity var(--dur),padding var(--dur);
}
.exhibit-drop::before{
  content:"";position:absolute;left:var(--gutter);top:0;bottom:0;width:1px;
  background:var(--line);pointer-events:none;
}
/* 竖线只跟着选项列表走，不伸进面板的下内边距（与 .open 的 padding-bottom 一致） */
.exhibit-drop.open::before{bottom:var(--sp-3);}
.exhibit-drop.open{max-height:200px;opacity:1;padding:0 var(--gutter) var(--sp-3);}
.exhibit-item{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:10px var(--sp-3);border-left:2px solid transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.exhibit-item:hover{background:var(--hover);}
.exhibit-item.is-active{background:var(--accent-soft);border-left-color:var(--accent);}
.exhibit-item-name{font-size:var(--fs-13);letter-spacing:var(--ls-1);color:var(--ink);}
.exhibit-item-period{font-size:var(--fs-11);letter-spacing:.5px;color:var(--ink-soft);}
.exhibit-item.is-active .exhibit-item-name{color:var(--accent);}
.exhibit-item.is-active .exhibit-item-period{color:var(--accent);opacity:.7;}

.hero{position:relative;height:260px;overflow:hidden;flex:0 0 auto;}
.hero img{width:100%;height:100%;object-fit:cover;animation:kenburns 8s ease-out forwards;}
@keyframes kenburns{from{transform:scale(1.15);}to{transform:scale(1);}}

.home-body{flex:1;padding:var(--sp-6) var(--gutter) var(--sp-4);text-align:center;display:flex;flex-direction:column;align-items:center;}
.home-col{font-size:var(--fs-28);font-weight:600;letter-spacing:var(--ls-10);text-indent:var(--ls-10);color:var(--accent);}
.home-sub{margin-top:var(--gap-title);font-size:var(--fs-12-5);color:var(--ink-soft);line-height:1.9;letter-spacing:var(--ls-1);max-width:264px;min-height:48px;}

/* 细装饰线 · 呼应读信页分隔符 */
.home-rule{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--gap-title);}
.home-rule::before,.home-rule::after{content:"";display:block;width:26px;height:1px;background:var(--line);}
.home-rule span{display:block;width:4px;height:4px;background:var(--accent);transform:rotate(45deg);opacity:.75;}

/* ================= 详情页 ================= */
.detail-hero{position:relative;height:240px;flex:0 0 auto;overflow:hidden;}
.detail-hero img{width:100%;height:100%;object-fit:cover;}
.detail-hero::after{
  /* 顶部完全透明：返回键在左上角，遮罩不能压暗它的玻璃底色；
     只有下半部分逐层加深，给标题与角标提供对比 */
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(43,37,32,0) 0%,rgba(43,37,32,.03) 35%,rgba(43,37,32,.4) 100%);
}
.detail-hero-tag{
  position:absolute;left:var(--gutter);bottom:18px;color:var(--on-dark-soft);
  font-size:var(--fs-11);letter-spacing:var(--ls-3);z-index:var(--z-hero);
}
.detail-hero-title{
  position:absolute;left:var(--gutter);bottom:var(--sp-10);color:var(--on-dark);
  font-size:var(--fs-20);font-weight:600;letter-spacing:var(--ls-2);z-index:var(--z-hero);
}
.detail-hero .back{
  position:absolute;top:var(--sp-4);left:var(--sp-4);z-index:var(--z-back);width:36px;height:36px;border-radius:var(--r-full);
  /* 顶部遮罩已改为全透明，按钮不再有深色底衬托：自己带一层深色玻璃 + 浅色细描边，
     这样不管英雄图左上角是亮是暗都看得见（图标保持米白，与标题同一色系） */
  background:rgba(43,37,32,.32);border:1px solid rgba(244,239,230,.3);color:var(--on-dark);font-size:18px;
  box-shadow:0 2px 10px rgba(43,37,32,.22);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);transition:background var(--dur-fast),border-color var(--dur-fast);
}
.detail-hero .back:hover{background:rgba(43,37,32,.5);border-color:rgba(244,239,230,.45);}
.detail-body{padding:var(--sp-8) var(--gutter) var(--pad-page-b);}
.intro{
  font-size:var(--fs-14);line-height:2.1;letter-spacing:.5px;color:var(--ink);
  /* 展开收起用 grid 行高插值：不再切 display，高度是连续变高的，不会瞬跳 */
  display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .52s var(--ease);
}
.intro .extra{min-height:0;overflow:hidden;opacity:0;transition:opacity .32s var(--ease);}
.intro.expanded{grid-template-rows:auto 1fr;}
.intro.expanded .extra{opacity:1;}

/* ================= 读信页 ================= */
.read-view{background:var(--paper-deep);}
/* 返回键：与详情页 .detail-hero .back 同尺寸、同位置；
   详情页压在深色大图上用纸色玻璃片，读信页是纸色底，改用「浅纸底 + 细描边 + 轻投影」才看得见 */
.read-view .back{
  position:absolute;top:var(--sp-4);left:var(--sp-4);z-index:var(--z-back);width:36px;height:36px;border-radius:var(--r-full);
  background:rgba(244,239,230,.72);border:1px solid var(--line);color:var(--ink);font-size:18px;
  box-shadow:0 2px 8px rgba(43,37,32,.1);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);transition:background var(--dur-fast),border-color var(--dur-fast);
}
.read-view .back:hover{background:rgba(244,239,230,.95);border-color:var(--line-strong);}
/* 顶部留白收紧到 48px：返回键只占左上角（16–52），题记居中，两者不会重叠 */
.read-scroll{flex:1;overflow-y:auto;padding:var(--sp-12) var(--gutter) 100px;}
.read-inner{max-width:320px;margin:0 auto;}
.read-kicker{font-size:var(--fs-11);letter-spacing:var(--ls-4);color:var(--accent);text-align:center;}
.read-title{font-size:var(--fs-24);font-weight:600;letter-spacing:var(--ls-3);text-align:center;margin-top:var(--gap-eyebrow);line-height:1.6;}
.read-sign{text-align:center;font-size:var(--fs-12);color:var(--ink-soft);margin-top:var(--gap-title);letter-spacing:var(--ls-2);}
.read-divider{width:30px;height:1px;background:var(--line);margin:var(--sp-7) auto;}
.read-p{
  font-size:var(--fs-15);line-height:2.2;letter-spacing:var(--ls-1);margin-bottom:22px;color:var(--ink);
  opacity:0;transform:translateY(14px);
}
/* 正文开头不再用分隔线，正文与题记之间靠这里留白 */
.read-p:first-of-type{margin-top:var(--sp-7);}
.read-view.active .read-p{animation:upIn .9s ease forwards;}
.read-view.active .read-p:nth-of-type(1){animation-delay:.4s;}
.read-view.active .read-p:nth-of-type(2){animation-delay:.7s;}
.read-view.active .read-p:nth-of-type(3){animation-delay:1.0s;}
.read-view.active .read-p:nth-of-type(4){animation-delay:1.3s;}
.read-view.active .read-p:nth-of-type(5){animation-delay:1.6s;}
@keyframes upIn{to{opacity:1;transform:none;}}