/* Breekpunten: 1140 (navigatie), 960 (grid naar één kolom), 640 (telefoon) */

@media (max-width: 1140px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 0.5rem var(--space-page) 1.75rem;
    background: var(--color-paper);
    border-bottom: var(--border-hair);
  }

  .site-header.is-open .site-nav,
  .site-nav:target {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .site-nav__link {
    width: 100%;
    min-height: 3.5rem;
    font: 400 1.625rem/1.2 var(--font-serif);
    border-bottom: var(--border-hair);
  }

  .site-nav__link::after {
    display: none;
  }

  .site-nav__link[aria-current='page'] {
    color: var(--color-red-ink);
  }

  .site-nav__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
  }
}

@media (max-width: 960px) {
  .l-grid > * {
    grid-column: 1 / -1;
  }

  :where(.l-grid) {
    row-gap: var(--space-5);
  }

  .section-label,
  .page-hero__crumbs {
    padding-top: 0;
  }

  .hero__media {
    aspect-ratio: 4 / 3;
  }

  .ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger__item:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .programme--feature,
  .programme--side {
    grid-column: 1 / -1;
  }

  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
  }

  .timeline {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.75rem;
    padding-left: 2rem;
  }

  .timeline::before {
    left: 5px;
    right: auto;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    height: auto;
  }

  .year__node {
    position: absolute;
    left: -2rem;
    top: 6px;
    margin: 0;
  }

  .verse {
    margin-top: clamp(3.5rem, 8vw, 5rem);
  }

  .founder__figure {
    max-width: 32rem;
  }

  .site-footer__col,
  .site-footer__col--wide {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 4.5rem;
  }

  .site-header__bar {
    gap: 1rem;
  }

  .brand__kicker,
  .site-header__cta,
  .site-header__actions .lang-switch {
    display: none;
  }

  .hero__lines {
    display: none;
  }

  .ledger,
  .split,
  .columns,
  .facts,
  .values,
  .fields__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger__item + .ledger__item {
    padding-left: 0;
    border-left: 0;
    border-top: var(--border-hair);
  }

  .split__col + .split__col {
    margin-top: 2.25rem;
    padding-left: 0;
    border-left: 0;
    border-top: var(--border-hair);
  }

  .equation {
    grid-template-columns: minmax(0, 1fr);
  }

  .equation__plus {
    justify-content: flex-start;
    padding: 0;
  }

  .growth {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }

  .growth::before {
    display: none;
  }

  .growth__soil {
    opacity: 0.4;
  }

  .pillar {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .triad {
    gap: 0.625rem 1.125rem;
  }

  .triad__word {
    font-size: 1.875rem;
  }

  .accordion__summary {
    gap: 0.875rem;
  }

  .accordion__roman {
    min-width: 2.5rem;
    font-size: 2rem;
  }

  .accordion__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .accordion__body {
    grid-column: 1;
  }

  .choice {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta__title {
    font-size: 4rem;
  }

  .site-footer__col--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .ledger--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger--3 .ledger__item + .ledger__item {
    padding-left: 0;
    border-left: 0;
    border-top: var(--border-hair);
  }

  .programme-detail__aside,
  .programme-detail__main,
  .fields__head,
  .fields__list,
  .doc-section__head,
  .doc-section__body,
  .next-steps__links {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .accordion__body--indent {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .values--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}