/* The two explanatory pages (Work): felt across the top under the header and the title, ivory paper below;
   the first sheet straddles the edge of the felt. No black band, no numbered timeline. */
.wrap { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.inner-hero { position: relative; padding: 72px 0 48px; color: var(--cream); }
.page.scroll .band, .inner-hero { --cream: #f3efe2; --cream-muted: rgb(243 239 226 / .78); --cream-faint: rgb(243 239 226 / .55); --cream-line: rgb(255 255 255 / .16); --em: var(--lime); }
.felt-top { position: absolute; z-index: -1; top: -72px; bottom: -112px; left: calc(50% - 50vw); width: 100vw; pointer-events: none; }
/* Title left, lead right, their baselines meeting at the bottom (as on the home). */
.inner-hero.split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.inner-hero.split .lead { justify-self: end; margin-top: 0; max-width: 40ch; }
.inner-hero h1 { max-width: 20ch; font: 500 72px/1.02 var(--moment); letter-spacing: -.02em; }
.inner-hero h1 span { display: block; }
.inner-hero h1 em { font-style: italic; color: var(--em); }
/* Figures are Schibsted, always; proportional, so the comma doesn't take a full digit's width. */
.inner-hero h1 .fig { display: block; font: 700 72px/1.02 var(--work); letter-spacing: -.03em; font-variant-numeric: proportional-nums; }
.inner-hero .lead { max-width: 48ch; margin-top: 24px; color: var(--cream-muted); font-size: 16px; line-height: 1.6; }
.inner-hero h1, .inner-hero .lead { animation: hero-drop .6s cubic-bezier(.16, 1, .3, 1) both; }
.inner-hero .lead { animation-delay: .14s; }
h2 { font: 500 32px/1.15 var(--moment); letter-spacing: -.015em; }
p.body { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--cream-muted); max-width: 46ch; }
p.body b { color: var(--cream); font-weight: 600; }
.sheet-paper p.body { color: var(--muted); }
.sheet-paper p.body b { color: var(--ink); }
.pad { padding: 24px; }
/* text on the felt beside an illustration */
.block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 48px 0; }
.end { padding: 24px 0 72px; }
/* Secondary, small, on a sheet: transparent fill, ink text, a hairline (foundations.css .leap-btn--secondary). */
.btn-s { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(22 19 15 / .18); font: 500 14px/1 var(--work); color: var(--ink); white-space: nowrap; }
@media (max-width: 900px) {
  .inner-hero { padding: 48px 0 32px; }
  .inner-hero.split { display: block; }
  .inner-hero.split .lead { margin-top: 16px; }
  .felt-top { top: -64px; bottom: -72px; }
  .inner-hero h1, .inner-hero h1 .fig { font-size: 48px; }
  .block { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0; }
}
@media (max-width: 600px) {
  .inner-hero .lead { font-size: 14px; margin-top: 16px; }
}