/* Explain: Base reset, typography, and custom form field styles. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
}

body {
    overflow-x: hidden;
}

/* Custom form fields for editorial aesthetic */
.editorial-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    padding: 0.85rem 2rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--text-color);
    transition: border-color 300ms ease, box-shadow 300ms ease;
}

.editorial-input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 70%, transparent);
    opacity: 1;
}

.editorial-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: none;
}