:root {
  --bg: #e8e8e8;
  --surface: #fff;
  --surface-alt: #f5f5f5;
  --header-bg: #D8D8D8;
  --text-color: #1f2937;
  --heading-color: var(--text-color);
  --column-max: 40ch;

  --part-green_parts: #2e7d32;
  --part-flowers: #c2185b;
  --part-roots: #6d4c41;
  --part-fruits: #d84315;
  --part-seeds: #7b1fa2;
  --part-nuts: #8d6e63;
  --part-sap: #0277bd;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, serif;
  line-height: 1.2;
  color: var(--text-color);
  background: var(--bg);
}

h1,
h2,
#current-month select {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heading-color);
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0;
  background: var(--header-bg);

  h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75ch;

    img {
      height: 1.5cap;
      width: auto;
      display: block;
    }
  }
}

main {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.5ch;
  display: grid;
  grid-template-columns: repeat(3, fit-content(var(--column-max)));
  justify-content: center;
  gap: 1.5ch;
  align-items: start;

  > section {
    min-height: 22rem;
    background: var(--surface);
  }

  h2 {
    padding: .5ch;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--header-bg);

    select {
      font: inherit;
      color: inherit;
      background: transparent;
      border: 0;
      text-align: center;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    padding: 0.7rem 0.8rem;
    background: var(--surface);

    &:nth-child(even) {
      background: var(--surface-alt);
    }

    > strong,
    > p {
      display: block;
      margin: 0.3rem 0 0;
      text-align: center;
    }

    > strong {
      margin-top: 0;
    }

    > p[data-scientific],
    small[data-note] {
      opacity: 0.75;
    }
  }

  span {
    &[data-part="green_parts"] { color: var(--part-green_parts); }
    &[data-part="flowers"] { color: var(--part-flowers); }
    &[data-part="roots"] { color: var(--part-roots); }
    &[data-part="fruits"] { color: var(--part-fruits); }
    &[data-part="seeds"] { color: var(--part-seeds); }
    &[data-part="nuts"] { color: var(--part-nuts); }
    &[data-part="sap"] { color: var(--part-sap); }
  }
}

@media (max-width: 90ch) {
  main {
    grid-template-columns: fit-content(var(--column-max));
    gap: 0;

    > section:not(#current-month) {
      display: none;
    }

    > #current-month {
      inline-size: fit-content(var(--column-max));
      max-inline-size: 100%;
    }
  }
}