/* =========================================================
   阿远 & 小溪 · 爱情记录网站示例  |  灵衡科技
   自包含样式表：不引用外部字体 / 库 / CDN
   ========================================================= */

:root{
  --paper:      #f6f1e8;
  --paper-2:    #fcf8f1;
  --paper-tint: #f0e8db;
  --ink:        #2b2420;
  --ink-soft:   #6d635a;
  --ink-faint:  #9a8f85;
  --line:       rgba(43,36,32,.13);
  --line-soft:  rgba(43,36,32,.07);
  --accent:     #b06a4f;   /* 陶土色 */
  --accent-deep:#8d5139;
  --rose:       #bd8a7d;   /* 玫瑰灰 */
  --shadow-s:   0 2px 10px -6px rgba(70,46,33,.30);
  --shadow-m:   0 20px 48px -30px rgba(70,46,33,.45);
  --serif: "Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",Georgia,"Times New Roman",serif;
  --sans: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Segoe UI",sans-serif;
  --wrap: 1080px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  /* 极淡的纸感：两层柔和径向光，克制 */
  background-image:
    radial-gradient(120% 80% at 15% -5%, rgba(255,252,246,.9), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(214,180,160,.14), transparent 60%);
  background-attachment:fixed;
  font-size:17px;
  line-height:1.8;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; letter-spacing:.02em; line-height:1.3; margin:0; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* ---------- 通用区块 ---------- */
.section{ padding:92px 0; position:relative; }
.section--tint{ background:var(--paper-tint); }
.section--tint::before,
.section--tint::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--line-soft);
}
.section--tint::before{ top:0; } .section--tint::after{ bottom:0; }

.eyebrow{
  font-size:.74rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px; font-weight:600;
  padding-left:.42em;
}
.eyebrow--center{ text-align:center; padding:0; }
.section__title{ font-size:clamp(1.65rem,1.1rem + 2.4vw,2.5rem); max-width:18em; }
.section__lead{ margin-top:16px; color:var(--ink-soft); max-width:34em; font-size:1.02rem; }

/* ====================================================
   滚动渐显（仅在 JS 开启后生效；无 JS / reduce / ?static 全部可见）
   ==================================================== */
[data-reveal]{ opacity:1; }
.js [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.js [data-reveal].in{ opacity:1; transform:none; }

.is-static [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ====================================================
   HERO
   ==================================================== */
.hero{
  position:relative; text-align:center;
  padding:128px 0 104px;
  overflow:hidden;
}
.hero::after{ /* 底部细线分隔 */
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(760px,86%); height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.hero__inner{ display:flex; flex-direction:column; align-items:center; }
.hero .eyebrow{ padding-left:.42em; }

.hero__names{
  font-size:clamp(2.9rem,1.6rem + 6.2vw,5.6rem);
  margin:.1em 0 .18em; letter-spacing:.06em; color:var(--ink);
  display:flex; align-items:center; gap:.3em; flex-wrap:wrap; justify-content:center;
}
.hero__names .amp{
  color:var(--accent); font-style:italic; font-weight:400;
  font-size:.72em; transform:translateY(-.04em);
}
.hero__sub{
  font-family:var(--serif); font-size:clamp(1.05rem,.9rem + .7vw,1.35rem);
  color:var(--ink-soft); max-width:22em; margin:0 auto; font-weight:400;
}

/* 计数器 */
.counter{
  margin-top:46px; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:26px 40px; border:1px solid var(--line);
  border-radius:18px; background:rgba(252,248,241,.6);
  box-shadow:var(--shadow-m);
  backdrop-filter:blur(2px);
}
.counter__pre{ font-size:.8rem; letter-spacing:.34em; color:var(--ink-faint); }
.counter__days{
  font-family:var(--serif); color:var(--ink);
  font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem); font-weight:600; letter-spacing:.04em;
}
.counter__days b{
  color:var(--accent); font-size:1.55em; font-weight:700;
  padding:0 .12em; font-variant-numeric:tabular-nums;
}
.counter__clock{
  font-size:.82rem; letter-spacing:.14em; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.counter__clock b{ color:var(--accent-deep); font-weight:600; }

.hero__note{ margin-top:30px; font-size:.82rem; color:var(--ink-faint); letter-spacing:.04em; }

.scroll-hint{
  margin-top:40px; display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:var(--ink-faint);
  font-size:.76rem; letter-spacing:.3em;
}
.scroll-hint svg{ animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@media (prefers-reduced-motion: reduce){ .scroll-hint svg{ animation:none; } }

/* hero 入场微停顿 */
.hero [data-reveal]:nth-child(1){ transition-delay:.02s; }
.hero [data-reveal]:nth-child(2){ transition-delay:.12s; }
.hero [data-reveal]:nth-child(3){ transition-delay:.22s; }
.hero [data-reveal]:nth-child(4){ transition-delay:.34s; }
.hero [data-reveal]:nth-child(5){ transition-delay:.46s; }
.hero [data-reveal]:nth-child(6){ transition-delay:.56s; }

/* ====================================================
   时间线
   ==================================================== */
.timeline{ list-style:none; margin:54px 0 0; padding:0; position:relative; }
.timeline::before{ /* 中轴线 */
  content:""; position:absolute; top:6px; bottom:6px; left:50%; width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
  transform:translateX(-.5px);
}
.tl-item{
  display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
  align-items:center; margin:36px 0;
}
.tl-marker{ grid-column:2; display:flex; justify-content:center; }
.tl-dot{
  width:13px; height:13px; border-radius:50%;
  background:var(--paper); border:2px solid var(--accent);
  box-shadow:0 0 0 5px var(--paper), 0 0 0 6px var(--line-soft);
}
.tl-card{
  grid-column:3; background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; padding:20px 24px; box-shadow:var(--shadow-s); min-width:0;
}
.tl-item:nth-child(odd) .tl-card{ grid-column:1; text-align:right; }
.tl-card time{
  display:block; font-size:.78rem; letter-spacing:.22em; color:var(--accent);
  font-variant-numeric:tabular-nums; margin-bottom:6px;
}
.tl-card h3{ font-size:1.22rem; margin-bottom:6px; }
.tl-card p{ color:var(--ink-soft); font-size:.97rem; }

/* ====================================================
   照片墙（桌面错落网格，无空洞；手机堆叠）
   ==================================================== */
.gallery{
  margin-top:40px;
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:1fr 1fr 2fr;
  grid-template-areas:
    "main main tallA tallB"
    "main main tallA tallB"
    "wideA wideA wideB wideB";
  aspect-ratio:3 / 2;
}
/* 一张横图跨两列两行作主图；两张竖图各占一列、通高；底部两张横图各跨两列 */
.gallery .photo:nth-child(1){ grid-area:main;  }  /* 海边 · 横图 */
.gallery .photo:nth-child(2){ grid-area:tallA; }  /* 咖啡 · 竖图 */
.gallery .photo:nth-child(3){ grid-area:wideA; }  /* 旅行 · 横图 */
.gallery .photo:nth-child(4){ grid-area:tallB; }  /* 午后的猫 · 竖图 */
.gallery .photo:nth-child(5){ grid-area:wideB; }  /* 夜景 · 横图 */
.photo{
  display:block; position:relative; height:100%; margin:0;
  border-radius:14px; overflow:hidden; cursor:zoom-in;
  border:1px solid var(--line-soft); box-shadow:var(--shadow-s);
  background:var(--paper-tint);
}
.photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.photo::after{ /* 悬停时右下角的放大提示 */
  content:"＋"; position:absolute; right:12px; bottom:10px;
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; background:rgba(43,36,32,.55); color:#fff;
  font-size:1rem; opacity:0; transform:scale(.8);
  transition:opacity .4s ease, transform .4s ease; pointer-events:none;
}
.photo:hover img, .photo:focus-visible img{ transform:scale(1.045); }
.photo:hover::after, .photo:focus-visible::after{ opacity:1; transform:scale(1); }
.photo:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .photo img{ transition:none; } }

/* ====================================================
   纪念日
   ==================================================== */
.countdown{ font-family:var(--serif); color:var(--ink); font-size:1.12rem; }
.countdown b{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; padding:0 .1em; }

.cards{ margin-top:38px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.anniv{
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px;
  padding:26px 22px; text-align:center; box-shadow:var(--shadow-s);
  transition:transform .5s ease, box-shadow .5s ease;
}
.anniv:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
@media (prefers-reduced-motion: reduce){ .anniv{ transition:none; } .anniv:hover{ transform:none; } }
.anniv__icon{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  color:var(--accent); background:rgba(176,106,79,.1); margin-bottom:14px;
}
.anniv h3{ font-size:1.12rem; margin-bottom:6px; }
.anniv__date{ font-size:.86rem; color:var(--ink-soft); }
.anniv__left{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:.92rem; color:var(--accent-deep); font-weight:600;
  font-variant-numeric:tabular-nums; min-height:1.4em;
}

/* ====================================================
   悄悄话 / 留言
   ==================================================== */
.whispers{ list-style:none; margin:42px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.whisper{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:22px 26px; position:relative; box-shadow:var(--shadow-s);
}
.whisper p{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); line-height:1.7; }
.whisper__by{ display:block; margin-top:12px; font-size:.82rem; color:var(--ink-faint); letter-spacing:.08em; }
.whisper--b{ text-align:right; }
.whisper--a{ border-left:3px solid var(--accent); }
.whisper--b{ border-right:3px solid var(--rose); }

.leave{
  margin-top:30px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:16px; padding:28px; box-shadow:var(--shadow-s); max-width:640px;
}
.leave h3{ font-size:1.2rem; margin-bottom:10px; }
.leave__hint{ font-size:.86rem; color:var(--ink-soft); margin-bottom:18px; }
.leave__hint strong{ color:var(--accent-deep); }
.leave__row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.leave__name{ flex:0 0 150px; }
.leave__text{ flex:1 1 220px; }
.leave input{
  font-family:inherit; font-size:.98rem; color:var(--ink);
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); width:100%; transition:border-color .3s ease;
}
.leave input:focus{ outline:none; border-color:var(--accent); }
.leave input::placeholder{ color:var(--ink-faint); }
.leave__echo{
  margin-top:16px; padding:14px 16px; border-radius:10px;
  background:rgba(176,106,79,.09); border:1px dashed var(--accent);
  color:var(--accent-deep); font-size:.92rem;
}
.leave__echo b{ font-family:var(--serif); color:var(--ink); }

.btn{
  font-family:inherit; font-size:.95rem; letter-spacing:.06em; cursor:pointer;
  padding:13px 30px; border-radius:999px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; transition:background .3s ease, transform .3s ease;
}
.btn:hover{ background:var(--accent-deep); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; color:var(--accent-deep); }
.btn--ghost:hover{ background:rgba(176,106,79,.08); }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }

/* ====================================================
   婚礼预告
   ==================================================== */
.wedding{ text-align:center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(176,106,79,.08), transparent 60%),
    var(--paper-tint);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.wedding__inner{ max-width:620px; display:flex; flex-direction:column; align-items:center; }
.wedding__title{ font-size:clamp(2rem,1.4rem + 2.8vw,3rem); margin:4px 0 18px; }
.wedding__lead{ color:var(--ink-soft); font-size:1.05rem; line-height:1.9; margin-bottom:28px; }
.wedding__date{ font-family:var(--serif); color:var(--accent-deep); font-size:1.25rem; letter-spacing:.06em; }
.wedding__echo{
  margin-top:20px; font-size:.9rem; color:var(--accent-deep);
  font-family:var(--serif); letter-spacing:.08em;
}

/* ====================================================
   私密访问提示（锁形小卡片）
   ==================================================== */
.lockcard{
  display:flex; gap:22px; align-items:flex-start; max-width:620px; margin-inline:auto;
  background:var(--paper-2); border:1px solid var(--line); border-radius:18px;
  padding:28px 30px; box-shadow:var(--shadow-m); position:relative; overflow:hidden;
}
.lockcard::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(189,138,125,.07), transparent 45%);
}
.lockcard__icon{
  flex:0 0 auto; display:grid; place-items:center; width:54px; height:54px;
  border-radius:14px; color:var(--accent); background:rgba(176,106,79,.1);
  border:1px solid var(--line);
}
.lockcard__body h3{ font-size:1.18rem; margin-bottom:8px; }
.lockcard__body p{ color:var(--ink-soft); font-size:.97rem; }
.lockcard__note{ margin-top:10px; font-size:.8rem; color:var(--ink-faint); }

/* ====================================================
   页脚
   ==================================================== */
.foot{ padding:64px 0 108px; text-align:center; border-top:1px solid var(--line); }
.foot__names{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); letter-spacing:.06em; }
.foot__desc{ margin-top:12px; font-size:.86rem; color:var(--ink-faint); max-width:30em; margin-inline:auto; }
.foot__back{ margin-top:20px; }
.foot__back a{
  color:var(--accent-deep); text-decoration:none; font-size:.92rem;
  border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .3s ease;
}
.foot__back a:hover{ border-color:var(--accent); }

/* ====================================================
   常驻徽标
   ==================================================== */
.badge{
  position:fixed; z-index:60;
  right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  background:rgba(252,248,241,.9); border:1px solid var(--line);
  color:var(--ink-soft); font-size:.74rem; letter-spacing:.06em; text-decoration:none;
  box-shadow:var(--shadow-m); backdrop-filter:blur(6px);
  transition:transform .3s ease, color .3s ease;
}
.badge:hover{ transform:translateY(-2px); color:var(--ink); }
.badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
@media (prefers-reduced-motion: reduce){ .badge{ transition:none; } }

/* ====================================================
   Lightbox
   ==================================================== */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:5vmin; background:rgba(28,22,18,.92); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lightbox__stage{ margin:0; max-width:min(1100px,92vw); display:flex; flex-direction:column; align-items:center; gap:14px; }
.lightbox__img{
  max-width:100%; max-height:80vh; border-radius:10px; width:auto; height:auto;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.lightbox__cap{ color:rgba(255,255,255,.82); font-size:.92rem; letter-spacing:.04em; text-align:center; max-width:40em; }
.lightbox__close{
  position:absolute; top:max(18px,env(safe-area-inset-top,0px)); right:20px;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:grid; place-items:center; transition:background .3s ease;
}
.lightbox__close:hover{ background:rgba(255,255,255,.22); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff;
  display:grid; place-items:center; transition:background .3s ease;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.22); }
.lightbox__prev{ left:16px; } .lightbox__next{ right:16px; }
.lightbox :focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .lightbox{ transition:none; } }

body.no-scroll{ overflow:hidden; }

/* ====================================================
   响应式
   ==================================================== */
@media (max-width:980px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .section{ padding:66px 0; }
  .hero{ padding:92px 0 72px; }

  /* 时间线：改为左侧单轨 */
  .timeline::before{ left:13px; }
  .tl-item{ grid-template-columns:28px minmax(0,1fr); gap:6px; margin:26px 0; }
  .tl-marker{ grid-column:1; justify-content:flex-start; }
  .tl-card,
  .tl-item:nth-child(odd) .tl-card{ grid-column:2; text-align:left; }

  .whispers{ grid-template-columns:1fr; }
  .lockcard{ flex-direction:column; gap:16px; align-items:center; text-align:center; }

  /* 照片墙：主图与两张横图各自通栏，两张竖图并排 */
  .gallery{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:none;
    grid-template-areas:
      "main  main"
      "tallA tallB"
      "wideA wideA"
      "wideB wideB";
    aspect-ratio:auto;
  }
  .photo{ height:auto; }
  .photo img{ height:auto; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .counter{ padding:22px 24px; width:100%; }
  .cards{ grid-template-columns:1fr 1fr; gap:14px; }
  .anniv{ padding:20px 14px; }
  .leave{ padding:22px; }
  .leave__name,.leave__text{ flex:1 1 100%; }
  .badge{ right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); font-size:.68rem; padding:8px 12px; }
  .lightbox__nav{ width:42px; height:42px; }
  .lightbox__prev{ left:8px; } .lightbox__next{ right:8px; }
}

@media (max-width:380px){
  .cards{ grid-template-columns:1fr; }
}