.handoff{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--foreground);color:oklch(0.985 0 0);
  padding:clamp(3.5rem,8vh,6rem) clamp(1.25rem,4vw,3.5rem) clamp(3.5rem,8vh,6rem);
}
.handoff-top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;gap:clamp(2rem,5vw,4.5rem);
  padding-bottom:clamp(3rem,6vh,4.5rem);
}

.handoff h2{
  margin:0;
  font-size:clamp(1.875rem,4.4vw,3.5rem);
  font-weight:600;line-height:1.02;
  letter-spacing:-.032em;text-transform:uppercase;
}
.handoff h2 .dim{color:oklch(1 0 0 / .55);}
.handoff-note{
  margin:0;max-width:46ch;
  color:oklch(1 0 0 / .55);
  font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.6;
}

/* the day strip */
.strip{
  --gutter:clamp(1.25rem,2.6vw,2.5rem);
  --pad-y:clamp(2rem,5vh,3.5rem);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid oklch(1 0 0 / .16);
  border-bottom:1px solid oklch(1 0 0 / .16);
}
.moment{
  position:relative;
  padding:var(--pad-y) var(--gutter);
  border-right:1px solid oklch(1 0 0 / .16);
}
.moment:first-child{padding-left:0;}
.moment:last-child{border-right:0;padding-right:0;}
.moment::before{
  content:"";position:absolute;top:-1px;left:var(--gutter);
  width:2.5rem;height:1px;background:#fff;
}
.moment:first-child::before{left:0;}
.moment-time{
  display:block;margin-bottom:clamp(1.5rem,3vh,2.25rem);
  color:oklch(1 0 0 / .55);
  font-size:.75rem;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.moment-value{
  display:block;
  font-size:clamp(2.25rem,5vw,4rem);
  font-weight:600;line-height:.95;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.moment-label{
  display:block;margin-top:.75rem;
  color:oklch(1 0 0 / .55);
  font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;line-height:1.5;
}
.moment.result .moment-label{color:#fff;}
.moment.result::before{left:var(--gutter);right:var(--gutter);width:auto;}
.moment:last-child::before{right:0;}

.handoff-foot{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.75rem 1.5rem;
  padding-top:clamp(3rem,6vh,4.5rem);
}

@media (max-width:880px){
  .handoff-top{grid-template-columns:1fr;align-items:start;gap:1.5rem;}
  .strip{grid-template-columns:repeat(2,1fr);}
  .moment:nth-child(2n+1){padding-left:0;}
  .moment:nth-child(2n+1)::before{left:0;}
  .moment:nth-child(2n){border-right:0;padding-right:0;}
  .moment:nth-child(2n)::before{right:0;}
  .moment:nth-child(n+3){border-top:1px solid oklch(1 0 0 / .16);}
  .textlink{margin-left:0;}
}
@media (max-width:520px){
  .handoff{min-height:0;}
  .strip{grid-template-columns:1fr;}
  .moment{border-right:0;padding-left:0;padding-right:0;}
  .moment::before{left:0;right:auto;}
  .moment.result::before{left:0;right:0;}
  .moment:not(:first-child){border-top:1px solid oklch(1 0 0 / .16);}
}