body.time-apart {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 30px;
  color: #743c4d;
  background: radial-gradient(ellipse at 15% 25%, #f3dce180, transparent 55%),
    radial-gradient(ellipse at 90% 85%, #e8ddcd80, transparent 50%), #faf6ee;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.time-apart * { box-sizing: border-box; }
.back-to-notebook {
  position: absolute;
  top: 22px;
  left: clamp(18px, 4vw, 48px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #743c4d;
  font-size: .85rem;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.back-to-notebook:hover { color: #a5385b; }
.back-to-notebook:active { transform: scale(.96); }
.back-to-notebook:focus-visible { outline: 2px solid #a3536a; outline-offset: 5px; border-radius: 4px; }
.keepsake {
  position: relative;
  width: min(100%, 800px);
  padding: clamp(28px, 5vw, 60px) clamp(18px, 4vw, 50px) 38px;
  text-align: center;
  background: #fffcf6;
  border-radius: 8px;
  box-shadow: 0 20px 65px #7043330b, 0 4px 12px #70433308, 0 0 0 1px #70433308;
}
.keepsake::before {
  content: '';
  position: absolute;
  top: -13px;
  left: calc(50% - 46px);
  width: 92px;
  height: 28px;
  background: repeating-linear-gradient(45deg, #dec1ac70 0 6px, #ecd8c670 6px 12px);
  transform: rotate(-4deg);
}
.love-mark { width: 90px; margin: 0 auto 12px; }
.love-mark svg { display: block; width: 100%; }
.eyebrow { font-size: .65rem; text-transform: uppercase; letter-spacing: .2em; line-height: 1.8; }
.keepsake h1 { margin: 16px 0 12px; font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.15; text-wrap: balance; }
.intro { font-family: var(--font-letter); font-size: clamp(1.3rem, 3vw, 1.65rem); color: #80665f; text-wrap: pretty; }
.counter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vw, 16px); margin: 38px auto 24px; }
.time-unit { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 6px 18px; border-radius: 6px; background: linear-gradient(150deg, #fcf0f0, #fbf5ee); box-shadow: 0 2px 5px #743c4d06; }
.time-value { font-size: clamp(1.6rem, 5vw, 3.3rem); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1.2; overflow-wrap: anywhere; }
.time-label { font-size: .65rem; letter-spacing: .12em; }
.since { font-size: .75rem; color: #80665f; }
.since time { margin-left: 5px; letter-spacing: .06em; }
.thread { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 32px auto 18px; color: #ac6176; font-size: 12px; }
.thread::before, .thread::after { content: ''; height: 1px; width: 65px; background: #dbc4bb; }
.love-note { font: 1.6rem var(--font-letter); margin: 0; text-wrap: balance; }
.signoff { font: 1.2rem var(--font-letter); color: #80665f; margin: 10px 0 0; }
.time-apart footer { margin-top: 32px; font: 1.1rem var(--font-letter); color: #80665f; }
.time-apart footer span { padding: 0 8px; color: #a3536a; }
@media (max-width: 380px) {
  body.time-apart { padding-inline: 14px; }
  .time-label { font-size: .6rem; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-notebook { transition: none; }
}