/* ============================================================
   layout.css —— 外壳（导航 / 底部 tab）、各页布局、响应式
   ============================================================ */

/* ---- 外壳 ---- */
#app{min-height:100vh}
.shell{min-height:100vh;position:relative}
.shell.theme-quiet{background:var(--quiet)}
.shell.theme-night{background:var(--night);color:var(--night-ink)}
.page{position:relative;padding:110px 40px 90px;min-height:70vh}

/* 顶部导航 */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;height:64px;padding:0 40px;
  background:rgba(255,253,249,0);transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(255,253,249,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(58,49,56,.06)}
.nav-brand{font-family:var(--serif);font-size:17px;letter-spacing:.16em;cursor:pointer}
.nav-links{display:flex;gap:30px;list-style:none;font-size:13.5px;color:#6E6268}
.nav-links li{position:relative;cursor:pointer;padding:6px 0;letter-spacing:.05em}
.nav-links li.on{color:var(--ink)}
.nav-links li.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--grad);border-radius:2px}

/* 手机底部 tab bar */
.tabbar{display:none}

/* ---- 密码门 / 身份选择 / 撞墙页 ---- */
.gate,.identity,.denied{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:60px 24px;position:relative;overflow:hidden}
.gate-card{position:relative;z-index:2;width:420px;max-width:100%;padding:44px 40px 36px;
  border-radius:24px;text-align:center;
  background:rgba(255,253,249,.62);backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 60px -28px rgba(58,49,56,.45)}
.gate-card .eyebrow{font-size:11px;letter-spacing:.34em;color:var(--rose);font-weight:500}
.gate-card .brand{font-family:var(--serif);font-size:46px;font-weight:600;letter-spacing:.12em;
  margin:20px 0 12px;color:var(--ink)}
.gate-card .hint{font-size:14px;color:var(--ink60);letter-spacing:.04em}
.gate-card .field{margin:34px 0 26px}
.gate-err{min-height:20px;font-size:14px;color:var(--danger)}
.gate-foot{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:11px;
  letter-spacing:.22em;color:#B4A6AC;z-index:2}

.id-wrap{position:relative;z-index:2;text-align:center}
.id-q{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.06em}
.id-sub{margin-top:6px;font-size:13px;color:var(--ink60);letter-spacing:.04em}
.id-cards{display:flex;gap:20px;margin-top:44px;justify-content:center}
.id-card{width:180px;height:120px;border-radius:16px;background:rgba(255,255,255,.72);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  padding-bottom:12px;position:relative;cursor:pointer;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s}
.id-card:hover{transform:translateY(-2px);border-color:rgba(255,107,157,.45)}
.id-card:active{transform:scale(.98)}
.id-card .nm{writing-mode:vertical-rl;font-family:var(--serif);font-size:22px;font-weight:600;
  letter-spacing:.1em;color:var(--ink);line-height:1}
.id-card .code{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.3em;color:var(--rose)}
.id-card.guest .nm{writing-mode:horizontal-tb;font-family:var(--hand);font-size:15px;
  letter-spacing:.04em;color:#5A5058;font-weight:400}
.id-card.guest .code{color:#B4A6AC}
.id-card.picked{background:var(--cream);border-color:transparent;
  box-shadow:0 0 0 1.5px rgba(255,107,157,.55),0 14px 30px -18px rgba(255,107,157,.85)}

.denied-box{position:relative;z-index:2;text-align:center}
.denied-t{font-family:var(--serif);font-size:18px;letter-spacing:.08em}
.denied-s{margin-top:10px;font-size:13px;color:var(--ink60)}
.denied-back{display:inline-block;margin-top:26px;font-size:13px;color:#B4A6AC;cursor:pointer;
  transition:color .22s}
.denied-back:hover{color:var(--ink)}

/* ---- Hero（首页） ---- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:20px 24px 60px;overflow:hidden}
/* 手机地址栏收放时 100vh 会跳，能用 dvh 就用 dvh（文档没写，属于兼容补丁） */
@supports (height:100dvh){
  .hero,.gate,.identity,.denied{min-height:100dvh}
}
.hero-top{position:absolute;top:86px;left:40px;right:40px;display:flex;justify-content:flex-end;
  font-size:11px;letter-spacing:.2em;color:#B4A6AC}
.timer{position:relative;z-index:2;text-align:center}
.timer-label{font-size:13px;letter-spacing:.3em;color:#8C8189;margin-bottom:22px}
.timer-days{font-family:var(--serif);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.timer-days b{font-size:112px;font-weight:600;color:#332B31;letter-spacing:.01em}
.timer-days i{font-style:normal;font-size:22px;color:#8C8189;margin-left:10px;letter-spacing:.1em}
.timer-clock{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px;
  font-variant-numeric:tabular-nums}
.timer-clock b{font-family:var(--serif);font-size:38px;font-weight:400;color:#5C4E56}
.timer-clock i{font-style:normal;font-size:12px;color:#A99AA1;margin-left:5px}
.timer-clock em{width:1px;height:18px;background:var(--line)}
.timer-note{margin-top:34px;font-size:12.5px;letter-spacing:.14em;color:#A99AA1}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:1px;height:40px;
  background:linear-gradient(to bottom,rgba(58,49,56,.28),transparent);animation:breathe 1.8s ease-in-out infinite}

/* ---- 拼贴墙 ---- */
/* 首页「照片 + 故事」配对（2026-11-03 改版：一图一签，左右交替） */
.pairs{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:76px}
.pair{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.pair.flip{grid-template-columns:.92fr 1.08fr}
.pair.flip .photo{order:2}
.pair.flip .story{order:1}
.pair .photo{max-width:460px;justify-self:center;width:100%}
.pair .story{max-width:420px;justify-self:center;width:100%}
.story{padding:34px 30px 26px}
.story h5{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.06em;margin-bottom:14px}
.story .story-body{display:block;-webkit-line-clamp:unset;overflow:visible;
  font-size:15px;line-height:2.0;color:#4A4048}
.story time{font-size:11px;letter-spacing:.1em;color:#A99AA1}
/* 照片没写说明时不要留一条空白 */
.photo figcaption:empty{display:none}

/* 访客：只留三对，整体收窄一档 */
.visitor .pairs{max-width:920px;gap:64px}
/* ---- 拼贴墙（点点滴滴里仍用三列瀑布流） ---- */
.wall{position:relative;z-index:2;padding:56px 40px 40px}
.wall-head{display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:44px}
.wall-head h3{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.06em}
.wall-head span{font-size:11.5px;letter-spacing:.14em;color:#B4A6AC}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px;align-items:start}
.cols.two{grid-template-columns:repeat(2,1fr);max-width:920px;margin:0 auto}
.col{display:flex;flex-direction:column;gap:34px}
.home-foot{padding:80px 40px;text-align:center;font-size:13px;color:var(--ink60)}
.home-foot .sub{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.22em;color:#B4A6AC}

/* ---- 点点滴滴：子导航 + 各板块 ---- */
.subnav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;position:relative;z-index:2}
.paper-tab{position:relative;padding:10px 18px 12px;background:var(--cream);
  border-radius:2px;box-shadow:var(--paper-shadow);font-size:13.5px;color:var(--ink);cursor:pointer;
  clip-path:polygon(0 6px,4% 0,9% 5px,15% 1px,22% 6px,30% 0,38% 5px,47% 1px,55% 6px,63% 0,71% 5px,79% 1px,87% 6px,94% 2px,100% 5px,100% 100%,0 100%);
  opacity:.55;transition:opacity .22s,transform .22s}
.paper-tab.on{opacity:1;transform:translateY(-6px);box-shadow:0 1px 2px rgba(58,49,56,.06),0 10px 22px -12px rgba(58,49,56,.32)}
.masonry{column-count:3;column-gap:28px}
.masonry>*{break-inside:avoid;margin-bottom:32px}

/* 精选墙（薇薇美照） */
.featured{display:flex;flex-direction:column;gap:36px;max-width:900px;margin:0 auto}
.featured-row{display:grid;grid-template-columns:3fr 2fr;gap:28px;align-items:start}
.featured-row.flip{grid-template-columns:2fr 3fr}
.featured-row.flip .big{order:2}
.featured-side{display:flex;flex-direction:column;gap:28px}
/* 精选墙的柔光：只给这个板块的卡片（3.3.2） */
.featured .card.photo{box-shadow:0 0 0 1px rgba(255,255,255,.75),0 24px 60px -20px rgba(255,107,157,.42)}

/* 时间线 */
.tl{position:relative;max-width:760px;margin:0 auto;padding-left:0}
.tl-item{display:grid;grid-template-columns:130px 1fr;gap:28px;position:relative;padding-bottom:48px}
.tl-axis{position:absolute;left:148px;top:6px;bottom:0;width:1px;background:repeating-linear-gradient(to bottom,var(--line) 0 4px,transparent 4px 9px)}
.tl-date{font-family:var(--serif);font-style:italic;font-size:14px;text-align:right;color:var(--ink60);padding-top:2px}
.tl-dot{position:absolute;left:144px;top:8px;width:10px;height:10px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 0 4px var(--cream)}
.tl-card{margin-left:36px}
.tl-card h4{font-size:17px;font-weight:600;margin-bottom:6px}
.tl-card p{font-size:14px;line-height:1.8;color:#4A4048}
.tl-card img{max-width:320px;border-radius:2px;margin-top:12px}
.tl-same{width:1px;height:40px;background:var(--line);margin:-14px 0 10px 149px}

/* 争执回顾（全站最安静的一页） */
.friction{position:relative;max-width:720px;margin:0 auto;padding:0 20px}
.friction-lead{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink60);text-align:center;margin-bottom:64px}
.friction-item{padding:0 0 48px;border-bottom:1px solid var(--line);margin-bottom:48px}
.friction-item:last-of-type{border-bottom:0}
.fr-date{font-size:12px;letter-spacing:.1em;color:var(--ink60)}
.fr-event{font-size:16px;margin:6px 0 10px}
.fr-reflect{font-size:14px;line-height:1.9;color:var(--ink60);
  padding-left:24px;border-left:2px solid var(--lav)}
.fr-result{margin-top:10px;font-family:var(--hand);font-size:13px;color:var(--rose)}
.fr-add{display:block;width:100%;border:0;background:none;border-top:1px dashed var(--line);
  padding:18px 0 4px;font-size:13px;color:#B4A6AC;letter-spacing:.1em;text-align:center;margin-top:8px}

/* 随笔墙 */
.notes-wall{column-count:3;column-gap:28px}
.notes-wall>*{break-inside:avoid;margin-bottom:32px}

/* ---- 留言板 ---- */
.board-compose{max-width:640px;margin:0 auto;position:relative}
.board-list{column-count:3;column-gap:28px;max-width:1060px;margin:56px auto 0}
.board-list>*{break-inside:avoid;margin-bottom:32px}

/* ---- 关于我们 ---- */
.about{display:grid;grid-template-columns:5fr 7fr;gap:60px;max-width:1060px;margin:0 auto;align-items:start;position:relative;z-index:2}
.about-figure{position:relative;background:var(--cream);padding:10px 10px 0;border-radius:2px;
  box-shadow:var(--paper-shadow);transform:rotate(-1.8deg)}
.about-figure .ph-box{aspect-ratio:4/5;overflow:hidden;background:#EDE6DF}
.about-figure .ph-box img{width:100%;height:100%;object-fit:cover}
.about-figure figcaption{font-family:var(--hand);font-size:13.5px;color:#6E6268;
  padding:11px 2px 14px;text-align:center;letter-spacing:.04em}
.about-text h2{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:.04em;margin-bottom:8px}
.about-text .lead{font-size:12px;letter-spacing:.2em;color:#B4A6AC;margin-bottom:10px}
.about-text .names{font-family:var(--hand);font-size:13.5px;color:var(--ink60);letter-spacing:.06em;margin-bottom:30px}
.about-text h4{font-family:var(--serif);font-size:17.5px;font-weight:600;margin:26px 0 9px}
.about-text h4:first-of-type{margin-top:0}
.about-text p{font-size:14.5px;line-height:2.0;color:#4A4048}
.about-text .slot{color:#B4A6AC}

/* ---- 响应式 ---- */
@media (max-width:1000px){
  .masonry,.notes-wall{column-count:2}
  .board-list{column-count:2}
  .timer-days b{font-size:76px}
  .about{grid-template-columns:1fr;gap:40px;max-width:640px}
  .page{padding:100px 28px 80px}
  .wall,.nav{padding-left:28px;padding-right:28px}
}
@media (max-width:768px){
  .nav{padding:0 20px}
  .nav-links{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(60px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);background:rgba(255,253,249,.72);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 -1px 0 rgba(58,49,56,.06)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;font-size:12px;color:#6E6268;cursor:pointer}
  .tabbar a.on{color:var(--ink)}
  .tabbar a svg{width:20px;height:20px}
  .page{padding:84px 20px calc(90px + env(safe-area-inset-bottom))}
  .masonry,.notes-wall,.board-list{column-count:1}
  .masonry.m2,.notes-wall{column-count:2}
  /* 薇薇美照手机：单列 3:4，横向滑动，一屏一张（3.3.2） */
  .featured{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:16px;padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .featured::-webkit-scrollbar{display:none}
  .featured-row{flex:0 0 82vw;display:block;scroll-snap-align:center}
  .featured-row .featured-side{display:none}
  .featured-row.flip .big{order:0}
  .hero{min-height:88vh}
  .timer-days b{font-size:76px}
  .timer-clock b{font-size:26px}
  .hero-top{left:20px;right:20px;top:76px}
  .wall{padding:40px 20px}
  .subnav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  .paper-tab{white-space:nowrap}
  /* 身份卡手机改横排（文档 3.1.1） */
  .id-cards{flex-direction:column;width:100%;max-width:360px;margin-left:auto;margin-right:auto;gap:14px;margin-top:32px}
  .id-card{width:100%;height:72px;padding:0 52px 0 24px;justify-content:flex-start}
  .id-card.guest{height:64px}
  .id-card .nm{writing-mode:horizontal-tb;letter-spacing:.18em;font-size:21px}
  .id-card .code{left:auto;right:20px;top:50%;bottom:auto;transform:translateY(-50%)}
  /* 时间线 */
  .tl-item{grid-template-columns:1fr;gap:6px;padding-left:20px}
  .tl-axis,.tl-same{display:none}
  .tl-dot{left:6px;top:8px}
  .tl-date{text-align:left}
  .tl-card{margin-left:0}
  .about{padding:0 2px}
  /* 照片与故事：手机上竖着排，图在上签在下 */
  .pairs{gap:48px}
  .pair,.pair.flip{grid-template-columns:1fr;gap:22px}
  .pair.flip .photo{order:0}
  .pair.flip .story{order:0}
  .pair .photo,.pair .story{max-width:100%}
  .story{padding:28px 24px 22px}
}
@media (max-width:640px){
  .cols{grid-template-columns:1fr}
  .cols.two{grid-template-columns:1fr}
  .masonry.m2{column-count:1}
  /* 手机上旋转角减半，并禁掉横向溢出（3.3.1） */
  body{overflow-x:hidden}
  .card{transform:rotate(calc(var(--rot,0deg) / 2))}
}