:root{
  --paper:#f6efdf;
  --paper-light:#fbf6ec;
  --paper-edge:#e3d6bb;
  --paper-shadow:#c9b890;
  --ink:#2b2620;
  --ink-soft:#6f6452;
  --ink-faint:#a89a80;
  --verm:#a83228;
  --verm-deep:#8c2620;
  --gold:#b08a4e;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font-family:"Noto Serif SC","Songti SC",serif;
  color:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:6vh 5vw;
  overflow:hidden;
  background:
    radial-gradient(140% 90% at 50% -10%, #efe4ca 0%, #e7dabd 45%, #dcc9a4 100%);
  position:relative;
}

/* 纸面颗粒 */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.18;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}
/* 暗角 */
body::after{
  content:"";
  position:fixed;inset:0;
  background:radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(60,45,20,.18) 100%);
  pointer-events:none;
  z-index:0;
}

.desk{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* —— 双人页眉 —— */
.couple{
  display:flex;
  align-items:center;
  gap:0;
  margin-bottom:30px;
  position:relative;
}
.couple::before{
  /* 连接两人的细笔触线 */
  content:"";
  position:absolute;
  top:34px; left:78px; right:78px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--ink-faint) 16%, var(--ink-faint) 84%, transparent);
  opacity:.5;
  z-index:-1;
}
.person{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  width:78px;
}
.avatar{
  width:68px; height:68px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  box-shadow:
    0 0 0 3px var(--paper-light),
    0 0 0 4px var(--ink-faint),
    0 4px 10px rgba(60,40,15,.25);
}
.person.left .avatar{ transform:rotate(-3deg) }
.person.right .avatar{ transform:rotate(3deg) }
.person figcaption{
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink);
}
.person.right figcaption{ letter-spacing:.18em }
.knot{
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  margin:0 6px;
  align-self:flex-start;
  margin-top:19px;
}
.knot b{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  background:var(--verm);
  color:#f4e9d2;
  font-size:16px; font-weight:900;
  font-family:"Ma Shan Zheng","Noto Serif SC",serif;
  border-radius:4px;
  transform:rotate(-4deg);
  box-shadow:inset 0 0 0 1.5px rgba(244,233,210,.3);
}

/* —— 日历本 —— */
.pad{
  position:relative;
  width:min(380px, 88vw);
  aspect-ratio:380/500;
  perspective:1600px;
  cursor:pointer;
  transform:rotate(-1.2deg);
  filter:drop-shadow(0 22px 30px rgba(60,40,15,.28));
}

.sheet, .face{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--paper-light) 0%, var(--paper) 30%, var(--paper) 100%);
  border-radius:4px 4px 6px 6px;
  overflow:hidden;
}

/* 纸边描线 */
.sheet, .face.front{
  box-shadow:
    inset 0 0 0 1px rgba(120,95,55,.12),
    inset 0 1.5px 0 rgba(255,250,235,.6);
}

/* 撕痕打孔线 */
.perf{
  position:absolute; top:9px; left:0; right:0;
  height:8px;
  background-image:radial-gradient(circle, rgba(120,95,55,.32) 1px, transparent 1.6px);
  background-size:14px 8px;
  background-position:0 center;
  background-repeat:repeat-x;
  opacity:.5;
}
.perf::before, .perf::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%;
  background:var(--paper-shadow);
  box-shadow:inset 0 1px 2px rgba(60,40,15,.4);
}
.perf::before{ left:6px }
.perf::after{ right:6px }

/* 页眉：公历 + 星期 */
.sheet-head{
  position:absolute; top:30px; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.greg{
  font-size:15px; font-weight:500; letter-spacing:.06em; color:var(--ink);
}
.week{
  font-size:12px; letter-spacing:.5em; text-indent:.5em; color:var(--ink-soft);
}

/* 分隔线（毛笔感） */
.rule{
  position:absolute; left:14%; right:14%; top:84px; height:2px;
  background:linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent);
  opacity:.55;
}
.rule.soft{
  top:auto; bottom:96px;
  background:linear-gradient(90deg, transparent, var(--ink-faint) 18%, var(--ink-faint) 82%, transparent);
  opacity:.4; height:1px;
}

/* 主体：天数 */
.day-block{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-top:24px;
}
.day-label{
  font-size:16px; letter-spacing:.4em; text-indent:.4em;
  color:var(--ink-soft); margin-bottom:6px;
}
.day-num{
  display:flex; align-items:flex-end; gap:6px;
  font-weight:900;
}
.day-num span{
  font-size:clamp(96px, 30vw, 148px);
  line-height:.9;
  color:var(--ink);
  font-feature-settings:"palt";
  text-shadow:0 2px 0 rgba(255,250,235,.4);
}
.day-num i{
  font-style:normal; font-weight:700;
  font-size:clamp(22px, 7vw, 32px);
  color:var(--verm);
  padding-bottom:14px;
}
.day-block.faded .day-num span{ color:var(--ink-faint) }
.day-block.faded .day-label{ color:var(--ink-faint) }

/* 页脚 */
.sheet-foot{
  position:absolute; bottom:42px; left:0; right:0;
  text-align:center;
}
.since{ font-size:13px; color:var(--ink-soft); letter-spacing:.05em }
.since b{ font-weight:700; color:var(--ink) }
.since.dim{ color:var(--ink-faint); letter-spacing:.3em }

/* 朱印 */
.seal{
  position:absolute; right:18px; bottom:20px;
  width:46px; height:46px;
  transform:rotate(6deg);
  opacity:.92;
}
.seal span{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:var(--verm);
  color:#f4e9d2;
  font-size:22px; font-weight:900;
  font-family:"Ma Shan Zheng","Noto Serif SC",serif;
  border-radius:5px;
  box-shadow:
    inset 0 0 0 2px rgba(244,233,210,.35),
    0 1px 2px rgba(60,20,15,.3);
  /* 印章不均匀感 */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-mode:alpha;
}

/* —— 翻页层 —— */
.flipper{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform 1.5s cubic-bezier(.5,.02,.18,1), opacity .7s ease 1.05s;
  z-index:5;
  will-change:transform, opacity;
}
.flipper.flipped{
  transform:rotateX(-178deg);
  opacity:0;
}
.face{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.face.back{
  transform:rotateX(180deg);
  background:linear-gradient(180deg, var(--paper-edge), var(--paper) 40%);
  display:flex; align-items:center; justify-content:center;
}
.back-mark{
  font-size:15px; letter-spacing:.5em; text-indent:.5em;
  color:var(--ink-faint);
  font-family:"Ma Shan Zheng",serif;
}

/* 纸叠厚度 */
.stack{
  position:absolute; inset:0;
  background:var(--paper);
  border-radius:4px 4px 6px 6px;
  z-index:-1;
}
.s1{ transform:translate(2px,3px); background:#f1e8d4; }
.s2{ transform:translate(4px,6px); background:#ece1c6; }
.s3{ transform:translate(6px,9px); background:#e6d9b8; box-shadow:0 8px 14px rgba(60,40,15,.18); }

/* —— 底部信息 —— */
.milestone{
  margin-top:34px;
  font-size:14px; letter-spacing:.18em;
  color:var(--ink-soft);
}
.milestone b{ color:var(--gold); font-weight:700 }
.hint{
  margin-top:12px;
  font-size:11px; letter-spacing:.3em; color:var(--ink-faint);
  opacity:0; transition:opacity .8s ease 2s;
}
.hint.show{ opacity:1 }

@media (max-width:420px){
  .pad{ transform:rotate(-1deg) scale(.96) }
  .milestone{ font-size:12px }
}