@font-face {
    font-family: 'SamAndFrida';
    src: url('assets/samandfridafont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary: #cecc85;
    --secondary: #d78fa4;
    --cream: #faf8f2;
    --dark: #3a3a3a;
    --light-gray: #f5f2eb;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Raleway', sans-serif;
    color: var(--dark);
    background: var(--cream);
}

/* ── Shared Section Layout ── */
section {
    padding: 6rem 2rem;
}

.section-inner {
    max-width: 920px;
    margin: 0 auto;
}

.section-label {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--secondary);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.section-title {
    font-family: 'SamAndFrida', cursive;
    font-size: 3rem;
    font-weight: 400;
    color: var(--dark);
    margin-bottom: 1.5rem;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

/* ── Spacing Utilities ──────────────────────────────────────────
   Scale: 1=4px  2=8px  3=12px  4=16px  5=20px  6=24px
          8=32px  10=40px  12=48px  16=64px  20=80px  24=96px
   p-*  = padding all sides       px-* / py-* = horizontal / vertical
   pt-* / pr-* / pb-* / pl-* = individual sides
   m-*  = margin all sides        mx-* / my-* = horizontal / vertical
   mt-* / mr-* / mb-* / ml-* = individual sides
   mx-auto = center block horizontally
── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }
.p-8  { padding: 32px; }
.p-10 { padding: 40px; }
.p-12 { padding: 48px; }
.p-16 { padding: 64px; }
.p-20 { padding: 80px; }
.p-24 { padding: 96px; }

.px-0  { padding-left: 0;     padding-right: 0; }
.px-1  { padding-left: 4px;   padding-right: 4px; }
.px-2  { padding-left: 8px;   padding-right: 8px; }
.px-3  { padding-left: 12px;  padding-right: 12px; }
.px-4  { padding-left: 16px;  padding-right: 16px; }
.px-5  { padding-left: 20px;  padding-right: 20px; }
.px-6  { padding-left: 24px;  padding-right: 24px; }
.px-8  { padding-left: 32px;  padding-right: 32px; }
.px-10 { padding-left: 40px;  padding-right: 40px; }
.px-12 { padding-left: 48px;  padding-right: 48px; }
.px-16 { padding-left: 64px;  padding-right: 64px; }

.py-0  { padding-top: 0;     padding-bottom: 0; }
.py-1  { padding-top: 4px;   padding-bottom: 4px; }
.py-2  { padding-top: 8px;   padding-bottom: 8px; }
.py-3  { padding-top: 12px;  padding-bottom: 12px; }
.py-4  { padding-top: 16px;  padding-bottom: 16px; }
.py-5  { padding-top: 20px;  padding-bottom: 20px; }
.py-6  { padding-top: 24px;  padding-bottom: 24px; }
.py-8  { padding-top: 32px;  padding-bottom: 32px; }
.py-10 { padding-top: 40px;  padding-bottom: 40px; }
.py-12 { padding-top: 48px;  padding-bottom: 48px; }
.py-16 { padding-top: 64px;  padding-bottom: 64px; }

.pt-0  { padding-top: 0; }
.pt-1  { padding-top: 4px; }
.pt-2  { padding-top: 8px; }
.pt-3  { padding-top: 12px; }
.pt-4  { padding-top: 16px; }
.pt-5  { padding-top: 20px; }
.pt-6  { padding-top: 24px; }
.pt-8  { padding-top: 32px; }
.pt-10 { padding-top: 40px; }
.pt-12 { padding-top: 48px; }
.pt-16 { padding-top: 64px; }

.pr-0  { padding-right: 0; }
.pr-1  { padding-right: 4px; }
.pr-2  { padding-right: 8px; }
.pr-3  { padding-right: 12px; }
.pr-4  { padding-right: 16px; }
.pr-5  { padding-right: 20px; }
.pr-6  { padding-right: 24px; }
.pr-8  { padding-right: 32px; }
.pr-10 { padding-right: 40px; }
.pr-12 { padding-right: 48px; }
.pr-16 { padding-right: 64px; }

.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: 4px; }
.pb-2  { padding-bottom: 8px; }
.pb-3  { padding-bottom: 12px; }
.pb-4  { padding-bottom: 16px; }
.pb-5  { padding-bottom: 20px; }
.pb-6  { padding-bottom: 24px; }
.pb-8  { padding-bottom: 32px; }
.pb-10 { padding-bottom: 40px; }
.pb-12 { padding-bottom: 48px; }
.pb-16 { padding-bottom: 64px; }

.pl-0  { padding-left: 0; }
.pl-1  { padding-left: 4px; }
.pl-2  { padding-left: 8px; }
.pl-3  { padding-left: 12px; }
.pl-4  { padding-left: 16px; }
.pl-5  { padding-left: 20px; }
.pl-6  { padding-left: 24px; }
.pl-8  { padding-left: 32px; }
.pl-10 { padding-left: 40px; }
.pl-12 { padding-left: 48px; }
.pl-16 { padding-left: 64px; }

.m-0  { margin: 0; }
.m-1  { margin: 4px; }
.m-2  { margin: 8px; }
.m-3  { margin: 12px; }
.m-4  { margin: 16px; }
.m-5  { margin: 20px; }
.m-6  { margin: 24px; }
.m-8  { margin: 32px; }
.m-10 { margin: 40px; }
.m-12 { margin: 48px; }
.m-16 { margin: 64px; }
.m-20 { margin: 80px; }
.m-24 { margin: 96px; }

.mx-0    { margin-left: 0;    margin-right: 0; }
.mx-1    { margin-left: 4px;  margin-right: 4px; }
.mx-2    { margin-left: 8px;  margin-right: 8px; }
.mx-3    { margin-left: 12px; margin-right: 12px; }
.mx-4    { margin-left: 16px; margin-right: 16px; }
.mx-5    { margin-left: 20px; margin-right: 20px; }
.mx-6    { margin-left: 24px; margin-right: 24px; }
.mx-8    { margin-left: 32px; margin-right: 32px; }
.mx-10   { margin-left: 40px; margin-right: 40px; }
.mx-12   { margin-left: 48px; margin-right: 48px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0  { margin-top: 0;     margin-bottom: 0; }
.my-1  { margin-top: 4px;   margin-bottom: 4px; }
.my-2  { margin-top: 8px;   margin-bottom: 8px; }
.my-3  { margin-top: 12px;  margin-bottom: 12px; }
.my-4  { margin-top: 16px;  margin-bottom: 16px; }
.my-5  { margin-top: 20px;  margin-bottom: 20px; }
.my-6  { margin-top: 24px;  margin-bottom: 24px; }
.my-8  { margin-top: 32px;  margin-bottom: 32px; }
.my-10 { margin-top: 40px;  margin-bottom: 40px; }
.my-12 { margin-top: 48px;  margin-bottom: 48px; }
.my-16 { margin-top: 64px;  margin-bottom: 64px; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-5  { margin-top: 20px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }

.mr-0  { margin-right: 0; }
.mr-1  { margin-right: 4px; }
.mr-2  { margin-right: 8px; }
.mr-3  { margin-right: 12px; }
.mr-4  { margin-right: 16px; }
.mr-5  { margin-right: 20px; }
.mr-6  { margin-right: 24px; }
.mr-8  { margin-right: 32px; }
.mr-10 { margin-right: 40px; }
.mr-12 { margin-right: 48px; }
.mr-16 { margin-right: 64px; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-5  { margin-bottom: 20px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.mb-16 { margin-bottom: 64px; }

.ml-0  { margin-left: 0; }
.ml-1  { margin-left: 4px; }
.ml-2  { margin-left: 8px; }
.ml-3  { margin-left: 12px; }
.ml-4  { margin-left: 16px; }
.ml-5  { margin-left: 20px; }
.ml-6  { margin-left: 24px; }
.ml-8  { margin-left: 32px; }
.ml-10 { margin-left: 40px; }
.ml-12 { margin-left: 48px; }
.ml-16 { margin-left: 64px; }