/* Desktop layout. Loaded with media="(min-width: 500px)"; main.js flips the
   media attribute to animate the switch with a View Transition. */

:root {
  /* Left offset, minus the width the side stripes used to take
     (161 - 89 = 72px at 1241px wide, 96 - 48 = 48px at 500px) */
  --L: clamp(48px, calc(48px + (100vw - 500px) * 0.03239), 72px);
  /* Press rows follow the intro directly; social links fade in last */
  --press-start: 4;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: var(--L);
  padding: 72px 48px 62px 0;
}

.intro { margin-top: 42px; max-width: 515px; }

.press { order: 2; margin-top: 60px; max-width: 760px; }
.years { gap: 23px; }
.year-group { display: grid; grid-template-columns: 71px minmax(0, 1fr); }
.year { margin-bottom: 0; }
.items { gap: 23px; }

.social {
  order: 3;
  margin-top: auto;
  padding-top: 96px;
  --seq: calc(var(--press-start) + 8);
  animation-name: fade-in;
}

.stripes--band { display: none; }
.overscroll { display: none; }