.container {
    width: 100%;
    max-width: calc(var(--width_page) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.prose {
    max-width: var(--width_text);
}

.prose > h2 {
    margin-top: var(--space_2xl);
}

.prose > :first-child,
.prose > section:first-child > h2 {
    margin-top: 0;
}

.prose section > h2 {
    margin-top: var(--space_2xl);
}

/* Header and navigation */

.site_header {
    background: var(--colour_ivory);
    border-top: 4px solid var(--colour_navy);
    border-bottom: var(--rule_thin) solid var(--colour_rule);
}

.site_header_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space_s) var(--space_xl);
    padding-block: var(--space_m);
}

.site_nav_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space_l);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site_nav a {
    display: inline-block;
    padding: var(--space_xs) 0;
    border-bottom: 2px solid transparent;
    color: var(--colour_ink);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.site_nav a:hover {
    border-bottom-color: var(--colour_rule);
    color: var(--colour_navy);
}

.site_nav a[aria-current="page"] {
    border-bottom-color: var(--colour_brass);
    color: var(--colour_navy);
}

@media (max-width: 51.99em) {
    .has_js .site_nav {
        display: none;
        flex-basis: 100%;
    }

    .has_js .nav_open .site_nav {
        display: block;
    }

    .has_js .site_nav_list {
        flex-direction: column;
        border-top: var(--rule_thin) solid var(--colour_rule);
    }

    .has_js .site_nav a {
        display: block;
        min-height: 2.75rem;
        padding: var(--space_s) 0;
        border-bottom: var(--rule_thin) solid var(--colour_rule);
    }

    .has_js .site_nav a[aria-current="page"] {
        padding-left: var(--space_s);
        border-bottom-color: var(--colour_rule);
        box-shadow: inset var(--rule_accent) 0 0 var(--colour_brass);
    }
}

/* Page sections */

.site_main:focus {
    outline: none;
}

.page_header {
    padding-block: var(--space_3xl) var(--space_2xl);
    margin-bottom: var(--space_2xl);
    border-bottom: var(--rule_thin) solid var(--colour_rule);
}

.page_header .lead {
    max-width: var(--width_text);
    margin-bottom: 0;
}

.band {
    padding-block: var(--space_3xl);
}

.band_stone {
    background: var(--colour_stone);
}

/* Home hero */

.hero {
    padding-block: var(--space_2xl) var(--space_3xl);
}

.hero_inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text";
    gap: var(--space_xl);
}

.hero_text {
    grid-area: text;
    min-width: 0;
}

@media (min-width: 60em) {
    .hero {
        padding-block: var(--space_3xl);
    }
}

/* Experience */

.experience_layout {
    display: grid;
    gap: var(--space_2xl);
    padding-bottom: var(--space_3xl);
}

@media (min-width: 60em) {
    .experience_layout {
        grid-template-columns: minmax(0, var(--width_text)) 18rem;
        justify-content: space-between;
        column-gap: var(--space_3xl);
    }

    .experience_text {
        grid-column: 1;
        grid-row: 1;
    }

    .glance {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: var(--space_xl);
        align-self: start;
    }
}

/* Services */

.tabs {
    padding-bottom: var(--space_3xl);
}

/* Privacy and 404 */

.privacy_text,
.not_found_links {
    padding-bottom: var(--space_3xl);
}

/* Footer */

.site_footer {
    background: var(--colour_navy_deep);
    color: var(--colour_on_dark);
}

.site_footer a {
    color: var(--colour_on_dark);
}

.site_footer a:focus-visible {
    outline-color: var(--colour_focus_on_dark);
}

.footer_contact {
    padding-block: var(--space_3xl);
}

.footer_contact:focus {
    outline: none;
}

.footer_contact_inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "photo";
    gap: var(--space_xl);
}

.footer_intro {
    max-width: 28rem;
    grid-area: intro;
}

.footer_photo {
    grid-area: photo;
    position: relative;
    isolation: isolate;
    justify-self: end;
    width: min(9.5rem, 38%);
    margin: 0;
}

.footer_photo::before {
    content: "";
    position: absolute;
    inset: var(--space_s) calc(-1 * var(--space_s)) calc(-1 * var(--space_s)) var(--space_s);
    z-index: -1;
    border: var(--rule_thin) solid var(--colour_brass_light);
}

@media (min-width: 40em) {
    .footer_contact_inner {
        grid-template-columns: minmax(0, 1fr) 11rem;
        grid-template-areas: "intro photo";
        align-items: end;
        column-gap: var(--space_2xl);
    }

    .footer_photo {
        width: 100%;
    }
}

@media (min-width: 60em) {
    .footer_contact_inner {
        grid-template-columns: minmax(0, 1fr) 14rem;
        column-gap: var(--space_3xl);
    }
}

.footer_base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space_xs) var(--space_xl);
    padding-block: var(--space_l);
    border-top: var(--rule_thin) solid rgb(250 247 240 / 0.16);
    color: var(--colour_on_dark_muted);
    font-size: var(--text_small);
}

.footer_base p {
    margin: 0;
}