/* Desktop mega menu panels and the scrim behind them. Rendered by js/mega.js. */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  padding-bottom: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s var(--ease-std), transform .35s var(--ease-out), visibility 0s linear .35s;
  visibility: hidden;
}
.mega.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .22s var(--ease-std), transform .35s var(--ease-out), visibility 0s;
}
.mega__list {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--gutter);
  padding-inline: var(--inset);
}
.mega__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  height: 200px;
  padding: 0 12px 0 20px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition: color .2s var(--ease-std), opacity .3s var(--ease-std), transform .45s var(--ease-out);
}
.mega.is-open .mega__item { opacity: 1; transform: none; }
.mega.is-open li:nth-child(2) .mega__item { transition-delay: 0s, .04s, .04s; }
.mega.is-open li:nth-child(3) .mega__item { transition-delay: 0s, .08s, .08s; }
.mega.is-open li:nth-child(4) .mega__item { transition-delay: 0s, .12s, .12s; }
.mega.is-open li:nth-child(5) .mega__item { transition-delay: 0s, .16s, .16s; }
.mega.is-open li:nth-child(6) .mega__item { transition-delay: 0s, .2s, .2s; }

.mega__title {
  font: 400 clamp(18px, 1.55vw, 23px)/1.1 var(--sans);
  letter-spacing: -0.03em;
}
.mega__tag { font: 400 14px/1.35 var(--serif); }
.mega__ext { display: inline-block; margin-left: 4px; font-family: var(--sans); }

/* Hover and focus shift the item to graphite; the Stamp accent is kept for checked marks only. */
.mega__item:hover, .mega__item:focus-visible { color: var(--ink-2); }

.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(20, 24, 29, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-std), visibility 0s linear .3s;
}
.mega-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-std), visibility 0s; }

@media (max-width: 767px) {
  .mega, .mega-scrim { display: none; }
}