:root {
  color-scheme: light;
  --ink: #422624;
  --accent: #a3442e;
  --surround: #f3ece4;
  --paper: #fcf6ef;
  font-family: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", STSong, SimSun, serif;
  color: var(--ink);
  background: var(--surround);
}

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

body {
  margin: 0;
  padding-inline: clamp(1.125rem, 7.5vw, 7rem);
}

.greeting {
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100svh - 3.5rem);
  display: grid;
  place-items: center;
  padding-block: 2.5rem;
}

.card {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  width: 100%;
  max-width: 79rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--paper);
  box-shadow: 0 0.5rem 3rem rgb(92 61 41 / 4%);
}

.letter {
  padding: clamp(2rem, 4.4vw, 4.125rem);
  background: linear-gradient(135deg, #fffaf3, var(--paper) 60%, #faf3e9);
}

h1, p {
  margin: 0;
}

h1 {
  font-size: clamp(2.625rem, 5.25vw, 4.875rem);
  font-weight: 800;
  line-height: 1.16;
}

.message {
  margin-block-start: clamp(1.125rem, 2.45vw, 2.25rem);
  padding-block-start: clamp(1.125rem, 2.4vw, 2.25rem);
  border-block-start: 2px solid #bd5337;
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  font-weight: 500;
  line-height: 1.55;
}

.message p + p {
  margin-block-start: 0.85em;
}

.closing {
  margin-block-start: clamp(1.25rem, 2.65vw, 2.5rem);
  color: var(--accent);
  font-size: clamp(1.5rem, 2.85vw, 2.625rem);
  font-weight: 700;
  line-height: 1.3;
}

.letter time {
  display: block;
  margin-block-start: clamp(1rem, 2.2vw, 2rem);
  font-size: clamp(1rem, 1.65vw, 1.5rem);
  line-height: 1.4;
}

.portrait {
  position: relative;
  background: #b8694d;
}

.portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memories {
  max-width: 36rem;
  margin-inline: auto;
  padding-block-end: clamp(3rem, 7vw, 7rem);
}

.memories h2, .drawing h2 {
  margin: 0 0 0.65em;
  color: var(--accent);
  font-size: clamp(1.625rem, 3vw, 2.75rem);
  line-height: 1.3;
}

.memories h2 {
  margin-block-end: 1.25em;
  text-align: center;
}

.photo-timeline {
  --stagger: 0.5625rem;
  --photo-gap: clamp(2.625rem, 6.8vw, 4rem);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--photo-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-timeline > li {
  --offset: calc(-1 * var(--stagger));
  position: relative;
  min-width: 0;
}

.photo-timeline > li:nth-child(even) {
  --offset: var(--stagger);
}

.photo-timeline > li::before {
  position: absolute;
  z-index: 2;
  top: -0.8rem;
  left: calc(50% + var(--offset));
  width: 1.625rem;
  height: 1.8rem;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 31'%3E%3Cg transform='rotate(17 14 15)'%3E%3Cpath d='M14 18v10' stroke='%23594743' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M11 8h6l1 7c3 1 5 2 5 4 0 1.8-4 3-9 3s-9-1.2-9-3c0-2 2-3 5-4z' fill='%23983d2e'/%3E%3Cellipse cx='14' cy='18' rx='9' ry='2.7' fill='%23bd624a'/%3E%3Cpath d='M11 8h6l1 8c0 1-1.8 2-4 2s-4-1-4-2z' fill='%23a64633'/%3E%3Cellipse cx='14' cy='7' rx='6' ry='3.2' fill='%23c57259'/%3E%3Cpath d='M10.8 6.3q1.5-1.3 4.2-1.1' fill='none' stroke='%23f4b6a0' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 1px rgb(66 38 36 / 25%));
  content: "";
  pointer-events: none;
}

.photo-timeline > li:not(:last-child)::after {
  position: absolute;
  top: calc(100% - 0.5rem);
  left: 50%;
  width: 5rem;
  height: calc(var(--photo-gap) + 1rem);
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100' preserveAspectRatio='none'%3E%3Cpath d='M31 0C31 27 74 26 67 53S49 78 49 100' fill='none' stroke='%23ac715a' stroke-width='2.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

.photo-timeline > li:nth-child(even)::after {
  transform: translateX(-50%) scaleX(-1);
}

.photo-timeline figure {
  position: relative;
  z-index: 1;
  width: calc(100% - 2 * var(--stagger));
  margin: 0 auto;
  padding: clamp(0.55rem, 1.75vw, 0.875rem);
  border: 1px solid rgb(163 68 46 / 12%);
  border-radius: 0.375rem;
  background: #fffaf3;
  box-shadow: 0 0.3rem 0.9rem rgb(92 61 41 / 9%);
  transform: translateX(var(--offset));
}

.photo-timeline img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.125rem;
  background: #eadbd0;
}

.photo-timeline figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem 0.875rem;
  margin-block-start: 0.6rem;
  padding: 0 0.15rem 0.15rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.45;
}

.photo-timeline time {
  color: #77534a;
  font-size: 0.9rem;
}

.drawing {
  width: min(100%, 32rem);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 7rem);
  border-block-start: 1px solid rgb(163 68 46 / 20%);
  text-align: center;
}

.drawing img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(163 68 46 / 12%);
  border-radius: 0.75rem;
}

@media (max-width: 48rem) {
  body {
    padding-inline: 1rem;
  }

  .greeting {
    min-height: 0;
    padding-block: 1rem 2.5rem;
  }

  .card, .memories {
    max-width: 32rem;
  }

  .card {
    grid-template-columns: minmax(0, 1fr);
  }

  .letter {
    padding: clamp(1.5rem, 6.4vw, 2.75rem);
  }

  h1 {
    font-size: clamp(2.5rem, 10.5vw, 3.5rem);
  }

  .portrait {
    aspect-ratio: 1;
  }

  .portrait img {
    object-position: center 65%;
  }
}