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

/* PPMori font setup */
@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-Book.ttf') format('truetype');
    font-weight: 450;
    font-style: normal;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-BookItalic.ttf') format('truetype');
    font-weight: 450;
    font-style: italic;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'PPMori';
    src: url('/fonts/PPMori-ExtralightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

/* Base typography */
html {
    font-size: 16px;
    font-family: 'PPMori', sans-serif;
    line-height: 1.5;
    color: #262626;
}

/* Type scale */
h1 {
    font-size: 3.1rem;
    /* 37.2px */
    margin-bottom: 12px;
    font-weight: 700;
}

/* Mini h1 - same size as paragraph but bold */
h1.mini {
    font-size: 1rem;
    /* 12px - same as paragraph */
    font-weight: 700;
    /* Bold */
    margin-bottom: 2px;
}

h2 {
    font-size: 2.4rem;
    /* 28.8px */
    margin-bottom: 18px;
    font-weight: 600;
}

h3 {
    font-size: 1.9rem;
    /* 22.8px */
    margin-bottom: 12px;
    font-weight: 500;
}

p {
    font-size: 1rem;
    /* 12px */
}

/* Link styling */
a {
    color: #5266EA;
    text-decoration: none;
    transition: color 0.3 var(--ease-in-out-cubic);
}

a:hover,
a:visited:hover {
    color: #4956a8;
    /* Darker shade for hover */
    text-decoration: none;
}

a:active {
    color: #4956a8;
    /* Even darker shade for active/clicked state */
}

a:visited {
    color: #5266EA;
    /* Same as normal link color */
}

a:focus {
    color: #5266EA;
    outline: 2px solid #8194F0;
    /* Lighter shade for focus outline */
    outline-offset: 2px;
}

/* Grid System */
.container {
    max-width: 648px;
    margin: 0 auto;
    padding: 0 24px;
    margin-top: 24px;
    margin-bottom: 48px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}

.col {
    padding-left: 6px;
    padding-right: 6px;
}

.col-1 {
    width: 33.333%;
}

.col-2 {
    width: 66.667%;
}

.col-3 {
    width: 100%;
}

.col-half {
    width: 50%;
}

/* Row variations */
.row-equal-height {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}

.row-equal-height .col {
    display: flex;
    flex-direction: column;
}

.row-equal-height .col>* {
    flex-grow: 1;
    height: 100%;
}

/* Tighter row spacing */
.row-tight {
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: 6px;
}

.row-tight .col {
    padding-left: 3px;
    padding-right: 3px;
    margin-bottom: 6px;
}

/* Even tighter row spacing */
.row-xtight {
    margin-left: -2px;
    margin-right: -2px;
    margin-bottom: 4px;
}

.row-xtight .col {
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 4px;
}

/* Flexbox helpers for grid */
.col-flex {
    display: flex;
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.h-100 {
    height: 100%;
}

/* Mobile responsiveness */
@media (max-width: 480px) {

    .col-1,
    .col-2 {
        width: 100%;
    }

    .container {
        padding: 0 18px;
        /* Slightly smaller padding on mobile */
    }
}

/* Margin helpers */
.mt-1 {
    margin-top: 6px;
}

.mt-2 {
    margin-top: 12px;
}

.mt-3 {
    margin-top: 18px;
}

.mt-4 {
    margin-top: 24px;
}

.mb-1 {
    margin-bottom: 6px;
}

.mb-2 {
    margin-bottom: 12px;
}

.mb-3 {
    margin-bottom: 18px;
}

.mb-4 {
    margin-bottom: 24px;
}


.level-100 {
    color: rgba(0, 0, 0, 0.4);
}

.level-200 {
    color: rgba(0, 0, 0, 0.7);
}

h1.mini-light {
    font-size: 1rem;
    /* Same size as paragraph text */
    font-weight: normal;
    /* Removes the bold styling */
    margin-bottom: 6px;
    /* Optional: removes default h1 margins */
}

article p {
    margin-bottom: 8px;
}



/* Easing functions for animations */
:root {
    --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
    --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
    --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
    --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
    --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
    --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
    --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
    --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
    --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
    --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
    --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
    --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
    --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
    --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
    --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
    --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
}

/* Lists styling */
ul {
    list-style-position: outside;
    padding-left: 1.5rem;
    margin-bottom: 12px;
}

li {
    font-size: 1rem;
    /* 12px - same as paragraph */
    margin-bottom: 6px;
    line-height: 1.5;
}

/* For nested lists */
li ul {
    margin-top: 6px;
    margin-bottom: 0;
}

li:last-child {
    margin-bottom: 0;
}

article h1 {
    font-size: 1rem;
    /* 12px - same as paragraph */
    font-weight: 400;
    /* Normal weight, not bold */
    font-style: italic;
    /* Italicized */
    margin-top: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid #828282;
    /* Thick underline using the main text color */
    padding-bottom: 4px;
    /* Space between text and underline */
    display: block;
    /* Makes the border span the full width */
    width: 100%;
    /* Ensures full width */
}