.trilogy-nav { position: relative; }
.available { color: var(--green); }
.nav > nav { margin-left: auto; }
.discord-quick { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: .35rem .75rem; border: 1px solid #aeb2ff40; border-radius: .65rem; color: var(--paper); font-size: .85rem; font-weight: 650; text-decoration: none; }
.discord-quick img { display: block; }
.discord-quick:hover { border-color: #aeb2ff90; background: #aeb2ff12; }
.trilogy-menu, .trilogy-menu:last-child { position: relative; padding: 0; border: 0; }
.trilogy-menu > summary { display: flex; align-items: center; gap: .45em; padding: .55rem .72rem; color: var(--muted); font-size: .9rem; font-weight: inherit; list-style: none; }
.trilogy-menu > summary::-webkit-details-marker { display: none; }
.trilogy-menu > summary::after { content: ""; border: .25em solid transparent; border-top-color: currentColor; transform: translateY(.13em); }
.trilogy-menu > summary:hover, .trilogy-menu > .trilogy-active { color: var(--paper); }
.trilogy-active { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .45rem; }
.trilogy-menu > .trilogy-submenu { position: absolute; top: 100%; left: 0; z-index: 1; display: block; min-width: 14rem; margin: 0; padding: .35rem; background: var(--ink2); border: 1px solid var(--line); border-radius: .65rem; box-shadow: 0 .7rem 1.6rem #0006; }
.trilogy-menu:not([open]) > .trilogy-submenu { display: none; }
.trilogy-submenu a:hover, .trilogy-submenu a:focus-visible { background: #ffffff0d; border-radius: .35rem; }
.trilogy-cards { margin-top: 2rem; grid-template-columns: minmax(0, 1fr); }
.trilogy-cards > .project { min-width: 0; min-height: 0; scroll-margin-top: 11rem; }
.trilogy-cards .project-preview { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; }
.trilogy-cards .number { margin-bottom: .65rem; }
.trilogy-cards .project h3 { margin-bottom: 1rem; }
@media (min-width: 651px) {
  .trilogy-cards > .project { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: clamp(1rem, 3vw, 2rem); }
  .trilogy-cards > .project > * { grid-column: 2; }
  .trilogy-cards .project-preview { grid-column: 1; grid-row: 1 / span 6; align-self: center; }
}
@media (max-width: 650px) {
  .trilogy-cards .project-preview { margin-bottom: 1rem; }
}
@media (max-width: 880px) {
  .nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem 1rem; }
  .nav > nav { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
  .discord-quick { grid-column: 2; grid-row: 1; min-height: 44px; }
  .nav > nav > ul { justify-content: flex-start; }
  .trilogy-menu > .trilogy-submenu { width: min(14rem, calc(100vw - 6rem)); min-width: 0; }
}
@media (max-width: 560px) {
  .trilogy-menu > summary { padding: .35rem .5rem; font-size: .82rem; }
}