:root {
  color-scheme: light;
  --paper: #f6f3ec;
  --ink: #625048;
}

* { box-sizing: border-box; }
html { background: var(--paper); scrollbar-gutter: stable; }
html.video-locked,
html.video-locked body { overflow: hidden; overscroll-behavior: none; }
body { margin: 0; color: var(--ink); }
img, video { display: block; max-width: 100%; }

.together-time {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 56px;
  text-align: center;
}
.together-time p { margin: 0; }
.together-time:focus { outline: none; }
.opening-photo {
  width: min(440px, 100%, calc((100svh - 220px) * 0.75 + 18px));
  margin: 0 auto 28px;
  padding: 9px 9px 14px;
  background: #fffefb;
  box-shadow: 0 6px 20px #3b302515;
  transform: rotate(-2deg);
}
.opening-photo img { width: 100%; height: auto; }
.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #62504830;
  border-radius: 999px;
  background: #fffefbf2;
  color: var(--ink);
  box-shadow: 0 4px 16px #3b302518;
  font: 500 12px/1 "DM Sans", sans-serif;
  cursor: pointer;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: #fffefb; border-color: #62504870; }
.back-to-top:focus-visible { outline: 2px solid #8b6956; outline-offset: 4px; }
#time-together { font: 400 34px/1.3 "Caveat", "Segoe Print", cursive; }
.together-time .together-date {
  margin-top: 5px;
  color: #80736a;
  font: 400 11px/1.6 "DM Sans", sans-serif;
}
#story { overflow: clip; padding: 20px 0 110px; }
.memory {
  width: min(1120px, calc(100% - 120px));
  margin: 0 auto;
  padding: 45px 0 120px;
}
.photo-memories {
  display: flex;
  flex-direction: column;
  gap: clamp(70px, 12svh, 140px);
}
.scrapbook-spread {
  width: min(100%, max(460px, var(--photo-size)));
  max-width: 680px;
  margin: 0;
  align-self: flex-start;
}
.scrapbook-spread--right { align-self: flex-end; }
.scrapbook-spread--center { align-self: center; }
.memory--paired .photo-memories,
.photo-pair {
  display: grid;
  grid-template-columns: var(--pair-columns);
  gap: clamp(50px, 7vw, 100px);
  align-items: start;
}
.memory--paired .scrapbook-spread,
.photo-pair > .scrapbook-spread { width: 100%; max-width: none; align-self: start; }
.memory--paired .scrapbook-spread + .scrapbook-spread,
.photo-pair > .scrapbook-spread + .scrapbook-spread { margin-top: var(--pair-offset); }
.photo {
  padding: 9px 9px 14px;
  background: #fffefb;
  box-shadow: 0 6px 20px #3b302515;
  transform: rotate(var(--photo-tilt));
}
.photo img { width: 100%; height: auto; object-fit: contain; }
.scrapbook-spread--fan {
  width: min(90%, 1020px);
  max-width: none;
}
.photo-fan {
  display: grid;
  grid-template-columns: repeat(var(--fan-count, 2), minmax(0, 1fr));
  align-items: end;
  isolation: isolate;
}
.photo-fan > .photo {
  transform-origin: center bottom;
  margin-inline: -8px;
  position: relative;
}
.photo-fan > .photo:first-child {
  transform-origin: right bottom;
  margin-left: 0;
}
.photo-fan > .photo:last-child {
  transform-origin: left bottom;
  margin-right: 0;
}
.photo-fan > .photo:nth-child(2) { z-index: 1; }
.original-note {
  font: 400 31px/1.4 "Caveat", "Segoe Print", cursive;
  text-align: center;
  max-width: 590px;
  margin: 30px auto 0;
  padding: 0 4px;
}
.original-note p { margin: 0; }
.original-note p + p { margin-top: 5px; }
.original-note--shared { margin-top: 24px; }
.scrapbook-spread--fan .original-note { margin-top: clamp(52px, 7vw, 90px); }
.memory:last-child { padding-bottom: 0; }

.timeline {
  width: min(1040px, calc(100% - 72px));
  margin: 0 auto;
  padding-top: 52px;
}
.timeline-year { padding-bottom: 60px; }
.timeline-month { padding-bottom: 24px; }
.timeline-day {
  width: 100%;
  padding: 12px 0 clamp(82px, 12svh, 140px);
}
#date-2025-10-31 { padding-bottom: clamp(160px, 22svh, 260px); }
.timeline-day-content { min-width: 0; }
.timeline-day .photo-memories--paired {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.timeline-day .photo-memories--paired .scrapbook-spread { width: 100%; max-width: none; }
.timeline-day .photo-memories--paired .scrapbook-spread + .scrapbook-spread { margin-top: 64px; }
.timeline-day .photo-memories--shared-caption { gap: clamp(14px, 2vw, 28px); align-items: end; }
.timeline-day .photo-memories--shared-caption .scrapbook-spread + .scrapbook-spread { margin-top: 0; }
.timeline-day .photo-memories--companion { gap: clamp(18px, 3vw, 42px); align-items: center; }
.timeline-day .photo-memories--companion .scrapbook-spread + .scrapbook-spread { margin-top: 0; }
.timeline-day .photo-pair--timeline { gap: clamp(18px, 3vw, 42px); align-items: end; }
.timeline-day .photo-pair--trio { gap: clamp(12px, 2vw, 28px); }
.timeline-undated { padding-top: 90px; }
.memory--closing { padding-top: 40px; }

.video-memories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 30px;
}
.video-moment {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: 40px;
}
.video-memory { width: 100%; }
.video-note { margin: 18px auto 0; text-align: center; }
.video-memories.is-sequence {
  position: relative;
  height: 100svh;
}
.is-sequence .video-moment {
  grid-area: 1 / 1;
  min-height: 0;
  height: 100%;
  width: 100%;
}
.video-frame {
  width: 100%;
  max-width: min(660px, calc((100svh - 96px) * var(--video-ratio) + 18px));
  margin-inline: auto;
  padding: 9px;
  background: #fffefb;
  box-shadow: 0 6px 20px #3b302515;
}
.video-frame.portrait { max-width: min(310px, calc((100svh - 96px) * var(--video-ratio) + 18px)); }
.video-frame video {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #201d1b;
}
.video-frame video:focus-visible { outline: 2px solid #8b6956; outline-offset: 4px; }
.video-fallback { font: 400 13px/2 "DM Sans", sans-serif; color: inherit; }

.video-placeholder { visibility: hidden; pointer-events: none; }
.video-placeholder::before { content: ""; display: block; aspect-ratio: var(--video-ratio); }
.video-frame:popover-open {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #171513;
  box-shadow: none;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.video-frame:popover-open::backdrop { background: transparent; }
.video-frame:popover-open video { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.video-frame:popover-open video:focus-visible { outline-offset: -4px; }

@media (max-width: 760px) {
  .together-time { padding-top: 100px; padding-bottom: 24px; }
  #time-together { font-size: 29px; }
  .together-time .together-date { font-size: 10px; }
  #story { padding: 20px 0 80px; }
  .memory {
    width: min(600px, calc(100% - 50px));
    padding: 20px 0 80px;
  }
  #memory-2 { padding-top: 68px; }
  .photo-memories { gap: 64px; }
  .timeline { width: calc(100% - 32px); }
  .timeline-day { width: 100%; padding-bottom: 88px; }
  #date-2025-10-31 { padding-bottom: 150px; }
  .scrapbook-spread {
    width: min(100%, var(--photo-size));
    max-width: none;
  }
  .memory--paired .photo-memories,
  .photo-pair { gap: clamp(14px, 7vw, 53px); }
  .memory--paired .scrapbook-spread,
  .photo-pair > .scrapbook-spread { width: 100%; }
  .timeline-day .photo-memories--paired { gap: clamp(12px, 5vw, 38px); }
  .timeline-day .photo-memories--paired .scrapbook-spread + .scrapbook-spread {
    margin-top: clamp(18px, 6.15vw, 47px);
  }
  .timeline-day .photo-memories--shared-caption .scrapbook-spread + .scrapbook-spread,
  .timeline-day .photo-memories--companion .scrapbook-spread + .scrapbook-spread { margin-top: 0; }
  .timeline-day .photo-pair--timeline { gap: clamp(8px, 3vw, 23px); }
  .timeline-day .photo-pair--trio { gap: clamp(6px, 2vw, 15px); }
  .memory--paired .scrapbook-spread + .scrapbook-spread,
  .photo-pair > .scrapbook-spread + .scrapbook-spread {
    margin-top: calc(var(--pair-offset) * 0.4);
  }
  .scrapbook-spread.scrapbook-spread--fan { width: 90%; align-self: center; }
  .photo { padding: 6px 6px 9px; }
  .original-note { font-size: clamp(18px, calc(2.8vw + 2px), 27px); margin-top: clamp(12px, 3vw, 24px); }
  .video-memories { margin-top: 20px; }
  .video-frame:not(:popover-open) { padding: 6px; }
}

@media (max-width: 380px) {
  .memory { width: calc(100% - 38px); }
  .original-note { font-size: 18px; }
}

.original-note .memory-location {
  margin-top: 10px;
  font-family: sans-serif;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b7768;
}

.seasonal-moment {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(48px, 8vh, 100px);
}
.seasonal-moment .photo-memories { width: 100%; }

.memory-intro {
  grid-column: 1 / -1;
  text-align: center;
  margin: 48px auto 28px;
  width: 100%;
}

.timeline-day .photo-memories > .photo-pair--timeline {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
.timeline-day .photo-memories--paired .photo-pair--timeline > .scrapbook-spread + .scrapbook-spread {
  margin-top: 0;
}

.video-intro { margin: 0 auto 24px; text-align: center; }