/* Explain: App-specific layout utilities and section styling. */
.section-py {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .section-py {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.section-title {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 800;
}

.section-lead {
    max-width: 47rem;
    margin-top: 1rem;
    font-size: 1.05rem;
    color: var(--text-muted);
}

.rule-gold {
    width: 76px;
    height: 2px;
    background: var(--accent-color);
}

.hero-scrim {
    background: linear-gradient(105deg, rgba(6, 22, 52, .97) 0%, rgba(6, 22, 52, .9) 48%, rgba(6, 22, 52, .54) 100%);
}

.dark-band {
    background: var(--dark-color);
    color: #dbe6f5;
}

.surface-band {
    background: var(--surface-color);
}

.paper-band {
    background-color: var(--parchment);
    background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(10, 42, 102, .065) 31px 32px);
}

.dark-band--grid {
    background-color: var(--dark-color);
    background-image: radial-gradient(circle at 50% -10%, rgba(212, 167, 44, .14), transparent 58%);
    color: #c9d8ea;
}

.hairline {
    height: 1px;
    background: var(--border-color);
}

.grid-auto {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .grid-auto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-auto {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.grid-auto--wide {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .grid-auto--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-auto--wide {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}