/* One opening scene, then the website in normal document flow. */
@font-face {
  font-family: "Newsreader Story";
  src: url("assets/newsreader-story.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
.hero.hero--site-entry,
html[data-motion="scroll"] .hero.hero--site-entry { height: var(--hero-opening-height); }
.hero--site-entry .opening-frame { background: var(--paper); }
.platform {
  padding: clamp(96px, 9vw, 144px) max(24px, 5vw);
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr);
  column-gap: clamp(32px, 5vw, 96px); align-items: start;
  background: var(--paper);
}
.entry-anchor { position: absolute; top: 0; }
.platform-label { padding: 12px 0 0; margin: 0; }
.platform-label .section-label {
  padding: 0; min-height: 0; background: none; color: #486354;
  font: 400 16px/1.4 Aspekta, Arial, sans-serif; text-transform: none; letter-spacing: -.01em;
}
.platform-label .section-label::before { display: none; }
.platform-content { min-width: 0; padding: 0; }
.platform-content h2 {
  max-inline-size: 23ch; margin: 0;
  font: 400 clamp(2.625rem, 1.5rem + 3vw, 4.5rem)/1.08 "Newsreader Story", Georgia, serif;
  font-optical-sizing: auto; letter-spacing: -.025em; text-wrap: balance;
}
.platform-content > p {
  max-inline-size: 54ch; margin-top: 36px; color: #3f504a;
  font: 400 clamp(1.125rem, 1rem + .25vw, 1.25rem)/1.65 Aspekta, Arial, sans-serif;
  letter-spacing: -.01em;
}
.platform-content > .split-button {
  margin-top: 32px; font: 400 15px/1.3 Aspekta, Arial, sans-serif;
  letter-spacing: -.01em; text-transform: none;
}
@media (max-width: 800px) {
  .platform { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 112px 24px 80px; }
  .platform-label { padding: 0; }
  .platform-content h2 { font-size: clamp(2.5rem, 1.5rem + 4vw, 3.5rem); max-inline-size: 24ch; }
  .platform-content > p { margin-top: 28px; }
}