/* Explain: Essential component classes with sharp borders and elegant typography */
.editorial-kicker {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    font-size: 0.65rem;
    font-weight: 700;
}

.luxury-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.05;
}

.arch-panel {
    border-radius: var(--radius-arch);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--surface-color);
}

.floating-card {
    box-shadow: var(--shadow-float);
    border: 1px solid var(--border-color);
    background: var(--surface-color);
}

.luxury-btn {
    min-height: 44px;
    border-radius: 2px;
    border: 1px solid transparent;
    background: var(--primary-color);
    color: #ffffff;
    transition: all 300ms ease;
}

.luxury-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.luxury-btn-secondary {
    min-height: 44px;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    background: transparent;
    transition: all 300ms ease;
}

.luxury-btn-secondary:hover {
    border-color: var(--text-color);
    background: var(--surface-color);
    transform: translateY(-1px);
}

.mask-horizontal {
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}