:root {
  --concept-shell-width: 1240px;
  --concept-shell-gutter: 48px;
  --concept-panel-sand: #d5c5b0;
  --concept-panel-cream: #eee8df;
  --concept-panel-surface: #f6f1e9;
  --concept-panel-card: #fffdf9;
  --concept-panel-deep: #183642;
}

/* Every page uses full-bleed sections with the same centered content grid. */
main:not(.concept-home) > section {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  overflow: visible;
}

main:not(.concept-home) > section > .concept-section-shell {
  width: min(var(--concept-shell-width), calc(100% - (var(--concept-shell-gutter) * 2)));
  margin-right: auto;
  margin-left: auto;
}

/* Some page sections are also the shell element. Keep their backgrounds full
   bleed while aligning their contents to the same centered page grid. */
main:not(.concept-home) > section.concept-section-shell {
  padding-right: max(var(--concept-shell-gutter), calc((100% - var(--concept-shell-width)) / 2));
  padding-left: max(var(--concept-shell-gutter), calc((100% - var(--concept-shell-width)) / 2));
}

/* Shared page surfaces */
.concept-tier-hero,
.concept-blog-hero,
.concept-about-hero,
.concept-builder-hero,
.concept-radar-hero {
  background: var(--concept-panel-sand);
}

.concept-itinerary-section,
.concept-blog-section,
.concept-about-body,
.concept-about-section,
.concept-builder-section,
.concept-radar-section,
.concept-itinerary-body,
.concept-not-found {
  background: var(--concept-panel-cream);
}

.concept-contact {
  background: var(--concept-ink);
}

.concept-itinerary-card,
.concept-radar-card,
.concept-contact-card,
.concept-builder-form,
.concept-about-card,
.concept-about-quote {
  background: var(--concept-panel-card);
}

.concept-footer {
  background: var(--concept-panel-deep);
}

@media (max-width: 900px) {
  :root {
    --concept-shell-gutter: 24px;
  }

  main:not(.concept-home) > section {
    width: 100%;
  }

  main:not(.concept-home) > section.concept-section-shell {
    padding-right: var(--concept-shell-gutter);
    padding-left: var(--concept-shell-gutter);
  }
}

@media (max-width: 480px) {
  :root {
    --concept-shell-gutter: 16px;
  }
}