:root {
    --cream: #F9F4EB;
    --cream-2:  #f0ece5;
    --dark:  #000;
    --mid: #333;
    --muted:  #999;
    --light:  #f9f4eb;
    --accent-1:   #e5d9f6;
    --accent-2:  #ffd2f3;
    --accent-3:  #fcdca6;
    --accent-4:   #d4edda;
    --accent-5:  #c8e6f7;
    --red:  #662020;
    --red-light: rgba(102, 32, 32, 0.08);
    --radius-sm:  3px;
    --radius-md:  10px;
    --radius-lg:  20px;
    --font-display: "Odibee Sans", sans-serif;
    --font-body:  "SN Pro", system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, sans-serif;
}


*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: auto;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    font-family: var(--font-body);
    background-color: var(--cream);
    color: var(--mid);
    line-height: 1.6;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}


.section-tag {
    display: inline-block;
    background-color: var(--mid);
    color: var(--cream);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0.28rem 0.7rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;

}


.section-header {

    margin-bottom: 3.5rem;
    
}


.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    color: var(--dark);
    line-height: 1;
}