@font-face {
  font-family: 'Tsumada Sans';
  src: url('/assets/fonts/NunitoSans-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  font-family: 'Tsumada Sans', Arial, sans-serif;
}

body, button, input, select, textarea {
  font-family: 'Tsumada Sans', Arial, sans-serif;
}

/* Keep the photographic layout and palette; soften the shapes and lettering. */
.app-shell :is(h1, h2, h3),
.app-shell :is(.next-action strong, .production-lesson .lesson-copy strong,
  .production-pass .pass-access strong, .checkout-total strong, .membership-price strong,
  .start-route strong, .topic-tile strong, .editorial-story summary strong,
  .course-overlay h3, .backstage-copy strong) {
  font-family: 'Tsumada Sans', Arial, sans-serif !important;
  letter-spacing: -.035em;
}

.app-shell :is(h1, h2, h3) { font-weight: 600; }
.app-shell :is(.cinema-copy h2, .direction-hero h1, .course-cinema h1,
  .membership-hero h1, .circle-editorial h2) {
  font-weight: 600;
  line-height: 1.12;
}

.greeting { font-weight: 600; letter-spacing: .01em; }

.app-shell :is(.cinema-feature, .direction-hero, .course-cinema,
  .circle-editorial, .membership-hero) {
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 28px;
}

.app-shell :is(.destination-card, .topic-tile, .editorial-course-open,
  .guest-course-preview, .photographic-cover) { border-radius: 25px; }

.app-shell :is(.next-action, .circle-practice, .production-pass,
  .access-detail, .checkout-form, .offer-benefits article,
  .expert-editorial, .backstage-editorial, .person-card,
  .review-card, .preparation-link, .assignment-cycle) { border-radius: 22px; }

.app-shell :is(.primary, .secondary, .production-search,
  .checkout-form input, .checkout-form select, .payment-option,
  .promo-apply, .production-lesson-wrap.expanded) { border-radius: 16px; }

.production-lesson .lesson-visual, .culture-thumb, .quick-photo,
.production-player { border-radius: 14px; }

.app-shell .destination-card h3 { font-size: 26px; line-height: 1.12; }
.app-shell .destination-pair .destination-card h3 { font-size: 22px; line-height: 1.17; }
.app-shell .destination-card p { font-size: 11px; }
.app-shell .locked-destination small {
  display: inline-block;
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid #f5ddaf55;
  border-radius: 999px;
  background: #11140d88;
}

#navigation {
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: calc(100% - 22px);
  max-width: 408px;
  padding: 7px;
  border: 1px solid #4d4538;
  border-radius: 25px;
  background: #1b1d18f2;
  box-shadow: 0 9px 28px #0009;
}

#navigation .nav-item {
  min-height: 55px;
  padding: 5px 0;
  border-radius: 17px;
  font-weight: 600;
}

#navigation .nav-item.active {
  background: #423827;
  margin: 0 3px;
}

#navigation .nav-item.active::before { display: none; }
#navigation .school-icon { width: 25px; height: 25px; }

@media (min-width: 760px) {
  #navigation { bottom: 39px; }
}

@media (max-width: 370px) {
  .app-shell :is(.cinema-feature, .direction-hero, .course-cinema,
    .circle-editorial, .membership-hero) {
    margin-left: -7px;
    margin-right: -7px;
  }
  .app-shell .destination-pair .destination-card h3 { font-size: 20px; }
}