:root {
    --color-navy-950: #0b1726;
    --color-navy-900: #10243e;
    --color-navy-800: #173552;

    --color-gold: #b5945a;
    --color-gold-light: #d2b77f;

    --color-white: #ffffff;
    --color-ivory: #f8f6f1;
    --color-light-gray: #eef1f4;
    --color-gray: #667085;
    --color-dark-gray: #344054;
    --color-text: #1d2939;

    --font-heading: "Libre Baskerville", Georgia, serif;
    --font-body: "Open Sans", Arial, sans-serif;

    --container-width: 1200px;

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 14px;

    --shadow-sm: 0 4px 14px rgba(16, 36, 62, 0.08);
    --shadow-md: 0 12px 30px rgba(16, 36, 62, 0.12);

    --transition-fast: 180ms ease;
}


/* ------------------------------
   Reset
------------------------------ */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background-color: var(--color-white);
    color: var(--color-text);

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ------------------------------
   Typography
------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--color-navy-900);

    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}

h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
}

h3 {
    font-size: 1.35rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

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

img {
    display: block;

    max-width: 100%;
    height: auto;
}


/* ------------------------------
   Site Structure
------------------------------ */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
}

.site-wrapper {
    display: flex;
    flex-direction: column;

    min-height: 100vh;
}

.main-content {
    flex: 1;
}


/* ------------------------------
   Shared Container
------------------------------ */

.container {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-inline: auto;
}


/* ------------------------------
   Shared Section Styling
------------------------------ */

.section {
    padding: 90px 0;
}

.section-light {
    background-color: var(--color-ivory);
}

.section-dark {
    background-color: var(--color-navy-900);
    color: var(--color-white);
}

.section-label {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--color-gold);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ------------------------------
   Accessibility
------------------------------ */

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;

    padding: 10px 16px;

    background-color: var(--color-navy-950);
    color: var(--color-white);

    border-radius: var(--border-radius-sm);

    transform: translateY(-150%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--color-gold-light);
    outline-offset: 3px;
}


/* ------------------------------
   Selection
------------------------------ */

::selection {
    background-color: var(--color-gold-light);
    color: var(--color-navy-950);
}


/* ------------------------------
   Responsive
------------------------------ */

@media (max-width: 768px) {

    .container {
        width: min(
            calc(100% - 28px),
            var(--container-width)
        );
    }

    .section {
        padding: 64px 0;
    }

}