/* Format page. Type carries it: one large line per beat of the day, the
   details beside it. Same ground, faces and button as Labels. */

.format-page { --ex: cubic-bezier(0.16, 1, 0.3, 1); background: var(--paper); }
.format {
  max-width: 1260px;
  padding: clamp(48px, 9vh, 120px) 40px 120px;
}
.format h1,
.format h2 { margin: 0; font-family: var(--display); font-weight: 300; letter-spacing: 0; line-height: 1; }
.format .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.format .line > span { display: block; animation: line-in 1000ms var(--ex) both; }
.format .line:nth-child(2) > span { animation-delay: 110ms; }
.format .line:nth-child(3) > span { animation-delay: 220ms; }
.format .format-title { font-size: clamp(64px, 10.5vw, 168px); margin-bottom: clamp(56px, 10vh, 128px); }

.beat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 6vw, 96px);
  padding: clamp(32px, 4.5vw, 56px) 0;
  border-top: 1px solid var(--ink-20);
  animation: fade-up-in 800ms var(--ex) 380ms both;
}
.beat h2 { display: flex; align-items: baseline; gap: 20px; font-size: clamp(40px, 4.6vw, 72px); }
.beat-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: var(--ink-50); transform: translateY(-0.2em); }
.beat-copy { display: grid; gap: 14px; align-content: start; max-width: 560px; padding-top: 0.4em; }
.beat-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-70); }
.beat-copy .beat-lead { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; color: var(--ink); }
.beat--aside h2 { font-size: clamp(30px, 3vw, 44px); }
.format-cta { justify-self: start; gap: 28px; margin-top: 18px; }
.format-cta .arrow { flex: none; transition: transform 300ms var(--ex); }
.format-cta:hover .arrow,
.format-cta:focus-visible .arrow { transform: translateX(6px); }

/* Each beat arrives as it scrolls in, where the browser can tie motion to scroll. */
@supports (animation-timeline: view()) {
  .beat { animation: fade-up-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}

@keyframes line-in { from { transform: translateY(108%); } }
@keyframes fade-up-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  .format .line > span,
  .beat { animation: none; }
}

@media (max-width: 700px) {
  .format { padding: 40px 24px 96px; }
  .format .format-title { font-size: clamp(56px, 18vw, 88px); margin-bottom: 48px; }
  .beat { grid-template-columns: 1fr; gap: 16px; padding: 28px 0 32px; }
  .beat h2 { font-size: 40px; gap: 16px; }
  .beat--aside h2 { font-size: 30px; }
  .beat-copy { padding-top: 0; }
  .format-cta { justify-self: stretch; }
}