/* =====================================
   GLOBAL LAYOUT
===================================== */

main {
    width: 100%;
}


/* Standard full-content container */

.container {
    width: min( calc(100% - (var(--page-padding) * 2)), var(--page-width) );
    margin-inline: auto;
}


/* Narrower reading container */

.reading-container {
    width: min( calc(100% - (var(--page-padding) * 2)), var(--reading-width) );
    margin-inline: auto;
}


/* Standard page section */

.section {
    width: 100%;
    padding: var(--section-space) var(--page-padding);
}


/* =====================================
   SHARED SECTION HEADINGS
===================================== */

.section-heading {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}


    .section-heading h2 {
        margin: 0 0 18px;
        font-size: clamp(32px, 5vw, 50px);
        line-height: 1.2;
        color: var(--gold-light);
    }


    .section-heading p {
        max-width: 720px;
        margin: 0 auto;
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.65;
        color: rgba(255,255,255,.85);
    }


/* =====================================
   SECTION TITLES
===================================== */

.section-title {
    width: min(850px, 100%);
    margin: 0 auto 55px;
    padding: 0 var(--page-padding);
    text-align: center;
}


    .section-title h2 {
        margin: 0 0 16px;
        font-family: var(--title-font);
        font-size: clamp(32px, 4.5vw, 50px);
        line-height: 1.2;
    }


    .section-title p {
        max-width: 720px;
        margin: 0 auto;
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.65;
    }


@media(max-width: 700px) {

    .section-title {
        margin-bottom: 35px;
    }
}

/* =====================================
   MOBILE
===================================== */

@media(max-width: 700px) {

    .section-heading {
        margin-bottom: 35px;
    }
}

/* =====================================
   SPA PAGE TRANSITION
===================================== */

#app {
    transition: opacity .18s ease;
}


    #app.spa-loading {
        opacity: .35;
        pointer-events: none;
    }


/* =====================================
   SHARED PAGE HERO
===================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 42vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px var(--page-padding) 60px;
    text-align: center;
    color: white;
    background: linear-gradient( rgba(10,15,25,.48), rgba(10,15,25,.72) ), var(--hero-image, url("../images/hero-background.jpg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}


.hero-content {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    margin-inline: auto;
}


.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1.08;
    color: var(--gold-light);
    text-shadow: 0 4px 18px rgba(0,0,0,.7);
}


.hero p {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(19px, 2.4vw, 25px);
    line-height: 1.5;
    color: rgba(255,255,255,.92);
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}


@media(max-width: 700px) {

    .hero {
        min-height: 34vh;
        padding: 135px 18px 45px;
    }


        .hero h1 {
            font-size: clamp(38px, 12vw, 56px);
        }


        .hero p {
            font-size: 18px;
        }
}