/* Decorative system */
.glyph {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    flex: 0 0 auto;
}

.glyph img {
    width: 16px;
    height: 16px;
    display: block;
}

.glyph.dark {
    background: var(--ink);
    border-color: rgba(255, 255, 255, .22);
}

.glyph.dark img {
    filter: invert(1);
}


.section {
    padding: 64px 0 !important;
    position: relative;
}

.section.no-bottom-padding {
    padding-bottom: 0 !important;

}

.section.medium {
    padding: 32px 0 !important;
    position: relative;
}

.section.small {
    padding: 16px 0 !important;
    position: relative;
}

.section.compact {
    padding: 48px 0;
}


.section.alt {
    border-top: none;
    padding: 0;
    padding-bottom: 64px;
    border-bottom: 1px solid var(--line) !important;
}

.section.dark {
    background: var(--ink);
    color: #fff;
}

.section.dark a {
    color: #fff;
}

.section.dark .muted {
    color: rgba(255, 255, 255, .72);
}

.section.dark .card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}

.section.dark .card:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
}


.section.dark .divider::before,
.section.dark .divider::after {
    border-color: rgba(255, 255, 255, .14);
}

.deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .9;
}

.deco svg {
    position: absolute;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1;
    opacity: .12;
}

.section.dark .deco svg {
    stroke: #fff;
    opacity: .10;
}

.deco .ring {
    width: 540px;
    height: 540px;
    right: -210px;
    top: -200px;
}

.deco .constell {
    width: 480px;
    height: 480px;
    left: -210px;
    bottom: -220px;
}

.deco .phases {
    width: 420px;
    height: 420px;
    left: 50%;
    top: -210px;
    transform: translateX(-50%);
    opacity: .09;
}

.deco .sigil {
    width: 360px;
    height: 360px;
    right: 10%;
    bottom: -220px;
    opacity: .10;
}

.grid {
    display: grid;
    gap: 18px;
}

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

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

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