/* Explain: Layout utilities for airy one-page studio sections, optimized for mobile. */
.section-pad {
    padding-top: clamp(3rem, 6vw, 5.5rem);
    padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.hero-section {
    background:
        radial-gradient(125% 95% at 50% -12%, #ffffff 0%, rgba(200, 16, 46, 0.04) 52%, rgba(58, 58, 60, 0.02) 100%),
        var(--background-color);
}

.hairline-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(90deg, var(--rule-color) 1px, transparent 1px);
    background-size: min(22vw, 240px) 100%;
    opacity: 0.4;
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
}

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

.ink-band {
    background: linear-gradient(155deg, var(--ink-color) 0%, var(--ink-soft) 100%);
    color: var(--secondary-color);
}

.ink-band .section-label {
    color: rgba(242, 242, 243, 0.72);
}

.ink-band .section-label span {
    color: var(--primary-color);
}

.ink-band .section-label::after {
    background: rgba(242, 242, 243, 0.24);
}

.ink-band .meta-label {
    color: rgba(242, 242, 243, 0.6);
}

.section-head {
    max-width: 46rem;
}