/* New Apology's Octave system: _homepage.scss, _information-page.scss,
   _site-chrome.scss and the essay section headings. The proposal adds only
   an 18px subhead and a 44px price style. */
@media screen {
  :root {
    --nap-font-family: Octave, sans-serif;
    --nap-ink: #313131;
    --nap-muted: #969696;
    --nap-display-size: 36px;
    --nap-display-leading: 1.1;
    --nap-display-tracking: -.36px;
    --nap-heading-size: 24px;
    --nap-subhead-size: 18px;
    --nap-price-size: 44px;
    --nap-body-size: 16px;
    --nap-ui-size: 14px;
    --nap-label-size: 14px;
    --nap-label-leading: 18px;
    --nap-caption-size: 12px;
    --black: var(--nap-ink);
    --muted: var(--nap-muted);
    --body-grey: var(--nap-ink);
  }

  body {
    font: 500 var(--nap-ui-size)/1.28 var(--nap-font-family);
    letter-spacing: -.14px;
    color: var(--nap-ink);
    font-synthesis: none;
  }

  .headline, .challenge > h2, .cover-title, .cover-statement, .sync-card p, .work h2, .fit > h2, .ways-heading .headline, .delivery-heading .headline {
    font: 500 var(--nap-display-size)/var(--nap-display-leading) var(--nap-font-family);
    letter-spacing: var(--nap-display-tracking);
    text-wrap: balance;
    color: var(--nap-ink);
  }
  .cover-title { color: var(--nap-muted); }
  .fit > h2 > span { color: var(--nap-muted); }
  .cover-title > span { font: inherit; letter-spacing: inherit; }
  .cover-statement { line-height: 1.2; }
  .sync-card p { color: #fff; }

  .recommendation-copy > .headline, .option-card h3 {
    font: 500 var(--nap-heading-size)/1.2 var(--nap-font-family);
    letter-spacing: -.24px;
    color: var(--nap-ink);
    text-wrap: balance;
  }
  .option-card h3 { min-height: 2.4em; }

  .recommendation-copy > p, .phase-content,
  .fit-column ul, .case-copy, .mira .case-copy,
  .option-card .option-intro, .option-scope, .option-card dd,
  .ways-heading > p, .delivery-heading > p {
    font: 500 var(--nap-body-size)/1.5 var(--nap-font-family);
    letter-spacing: -.14px;
    color: var(--nap-ink);
  }
  .challenge .challenge-point {
    font: 500 var(--nap-body-size)/1.3 var(--nap-font-family);
    letter-spacing: -.14px;
  }
  .challenge-point h3, .challenge-point p { font: inherit; letter-spacing: inherit; }
  .challenge-point h3 { margin-bottom: 24px; color: var(--nap-ink); }
  .challenge-point p { color: var(--nap-muted); }
  .case-copy, .mira .case-copy { color: #fff; line-height: 1.4; }
  .case-copy h3, .mira .case-copy h3 { margin-bottom: 8px; }
  .case-copy p, .mira .case-copy p { opacity: 1; }
  .basal .case-copy, .basal .case-copy p { color: var(--nap-ink); }

  .phase h3, .phase-heading, .fit-column h3,
  .case-copy h3, .mira .case-copy h3, .timeline-toolbar h3, .scope-details h3 {
    font: 500 var(--nap-subhead-size)/1.3 var(--nap-font-family);
    letter-spacing: -.14px;
    color: var(--nap-ink);
    text-wrap: balance;
  }
  .case-copy h3, .mira .case-copy h3 { color: inherit; }
  .phase-content ul, .recommendation-copy ul, .package-notes,
  .scope-details p {
    font: 500 var(--nap-ui-size)/1.4 var(--nap-font-family);
    letter-spacing: -.14px;
    color: var(--nap-ink);
  }
  .phase-content ul { line-height: 1.5; }
  .phase-content ul li + li { margin-top: 6px; }
  .recommendation-copy ul { line-height: 1.5; }
  .recommendation-copy ul li + li { margin-top: 6px; }
  .phase-content > p, .challenge-point p, .recommendation-copy > p,
  .option-intro, .option-card dd, .scope-details p { text-wrap: pretty; }
  .fit-column ul, .option-scope { line-height: 1.45; gap: 16px; }
  .fit-column h3 { line-height: 1.3; }
  .scope-details, .package-notes { max-width: 65ch; }
  .scope-details h3 { margin-bottom: 16px; }
  .scope-details p { line-height: 1.5; }
  .scope-details p + p { margin-top: 20px; }
  .ways-heading > p { max-width: 48ch; margin: 16px auto 0; }
  .delivery-heading > p { max-width: 48ch; }
  .calendar-event-name { text-wrap: pretty; }
  .package-notes strong { font-weight: 500; }

  .tag, .option-card > .tag, .phase-content .tag {
    font: 500 var(--nap-label-size)/var(--nap-label-leading) var(--nap-font-family);
    letter-spacing: -.14px;
    color: var(--nap-muted);
  }
  .challenge-tag.is-reached { color: #fff; }
  .option-card { gap: 24px; }
  .option-card .option-intro { min-height: 3lh; }
  .option-card dt { margin-bottom: 8px; }
  .option-card .option-price {
    font: 500 var(--nap-price-size)/1.05 var(--nap-font-family);
    letter-spacing: -.88px;
    color: var(--nap-ink);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .case-link, .pinto-play, .skip-link, .timeline-tiers button, .timeline-tier-name, .calendar-event-name {
    font: 500 var(--nap-ui-size)/1.4 var(--nap-font-family);
    letter-spacing: -.14px;
  }
  .timeline-tiers button { color: var(--nap-muted); }
  .timeline-tiers button[aria-selected=true],
  .timeline-tiers button[aria-selected=true] .timeline-tier-price,
  .timeline-tiers button:hover, .calendar-event-name { color: var(--nap-ink); }
  .skip-link { color: #fff; }

  .phase-number, .mobile-step, .timeline-tier-price, .block-range, .option-card dt,
  .timeline-toolbar p, .timeline-kickoff {
    font: 500 var(--nap-caption-size)/16px var(--nap-font-family);
    letter-spacing: -.24px;
    color: var(--nap-muted);
  }
  .timeline-toolbar p, .timeline-kickoff { line-height: 1.4; }

  @media (min-width: 768px) and (max-width: 1200px) {
    :root { --nap-display-size: 30px; }
  }
  @media (max-width: 1099px) {
    .option-card h3, .option-card .option-intro { min-height: 0; }
  }
  @media (max-width: 767px) {
    :root {
      --nap-display-size: 28px;
      --nap-display-leading: 1.12;
      --nap-display-tracking: -.28px;
      --nap-label-size: 12px;
      --nap-label-leading: 16px;
    }
    .cover-statement { line-height: 1.2; }
  }
}