:root {
    container-type                            : inline-size;
    --emma-kidd-backdrop-bg-color-rgb         : var(--emma-kidd-color-black-rgb);
    --emma-kidd-backdrop-filter-blur          : 4px;
    --emma-kidd-backdrop-opacity              : 0.36;
    --emma-kidd-color-black                   : #000;
    --emma-kidd-color-black-rgb               : 0, 0, 0;
    --emma-kidd-color-light-blue              : #d6f7ff;
    --emma-kidd-color-light-blue-rgb          : 214, 247, 255;
    --emma-kidd-color-purple                  : #720062;
    --emma-kidd-color-purple-rgb              : 114, 0, 98;
    --emma-kidd-color-purple-2                : #2e002b;
    --emma-kidd-color-purple-2-rgb            : 46, 0, 43;
    --emma-kidd-color-purple-3                : #3a1c32;
    --emma-kidd-color-purple-3-rgb            : 58, 28, 50;
    --emma-kidd-color-white                   : #fff;
    --emma-kidd-color-white-rgb               : 255, 255, 255;
    --emma-kidd-container-max-width           : 100%;
    --emma-kidd-container-max-width-no-pixels : 100%;
    --emma-kidd-font-primary                  : "Astoria", sans-serif;
    --emma-kidd-font-secondary                : "Playfair Display", serif;
    --emma-kidd-font-tertiary                 : "Roboto", sans-serif;
    --emma-kidd-navbar-height                 : 61px;
    --emma-kidd-navbar-z-index                : 1000;
    --emma-kidd-section-padding-top           : 2.5rem;
    --emma-kidd-section-padding-bottom        : 2.5rem;
    --bs-body-bg                              : var(--emma-kidd-color-white);
    --bs-body-bg-rgb                          : var(--emma-kidd-color-white-rgb);
    --bs-body-color                           : var(--emma-kidd-color-purple-2);
    --bs-body-color-rgb                       : var(--emma-kidd-color-purple-2-rgb);
    --bs-body-font-family                     : var(--emma-kidd-font-primary);
    --bs-body-font-size                       : 1.3125rem;
    --bs-body-font-weight                     : 300;
    --bs-body-line-height                     : calc(4 / 3);
    --bs-border-color                         : var(--emma-kidd-color-light-blue);
    --bs-border-radius                        : 0;
    --bs-box-shadow                           : 0 3px 30px rgba(var(--emma-kidd-color-black-rgb), 0.16);
    --bs-focus-ring-color                     : rgba(var(--emma-kidd-color-purple-rgb), 0.25);
    --bs-heading-color                        : var(--emma-kidd-color-purple);
    --bs-link-color                           : var(--emma-kidd-color-purple);
    --bs-link-color-rgb                       : var(--emma-kidd-color-purple-rgb);
    --bs-link-hover-color                     : var(--emma-kidd-color-purple-2);
    --bs-link-hover-color-rgb                 : var(--emma-kidd-color-purple-2-rgb);
    --vw                                      : 1vw;
    --vw-unitless                             : 1;
    --vw-unit                                 : 1vw;
    --vw-unit-unitless                        : 1;
    --vh                                      : 1vh;
    --vh-unitless                             : 1;
    --vh-unit                                 : 1vh;
    --vh-unit-unitless                        : 1;
}

@media (min-width : 480px) {
    :root {
        --emma-kidd-container-max-width           : calc(1px * var(--emma-kidd-container-max-width-no-pixels));
        --emma-kidd-container-max-width-no-pixels : 432;
    }
}

@media (min-width : 576px) {
    :root {
        --emma-kidd-container-max-width-no-pixels : 518;
        --emma-kidd-navbar-height                 : 66px;
        --bs-body-font-size                       : 1.5rem;
    }
}

@media (min-width : 768px) {
    :root {
        --emma-kidd-container-max-width-no-pixels : 690;
        --emma-kidd-navbar-height                 : 75px;
    }
}

@media (min-width : 992px) {
    :root {
        --emma-kidd-container-max-width-no-pixels : 892;
        --emma-kidd-navbar-height                 : 103px;
        --emma-kidd-section-padding-top           : 3.375rem;
        --emma-kidd-section-padding-bottom        : 3.375rem;
        --bs-body-font-size                       : 1.6875rem;
    }
}

@media (min-width : 1200px) {
    :root {
        --emma-kidd-container-max-width-no-pixels : 1080;
        --emma-kidd-navbar-height                 : 108px;
    }
}

@media (min-width : 1400px) {
    :root {
        --emma-kidd-container-max-width-no-pixels : 1260;
        --emma-kidd-navbar-height                 : 113px;
        --emma-kidd-section-padding-top           : 6.75rem;
        --emma-kidd-section-padding-bottom        : 6.75rem;
        --bs-body-font-size                       : 1.875rem;
    }
}

@media (min-width : 1600px) {
    :root {
        --emma-kidd-container-max-width-no-pixels : 1440;
        --emma-kidd-navbar-height                 : 117px;
    }
}

@media (min-width : 1920px) {
    :root {
        --emma-kidd-container-max-width-no-pixels : 1742;
        --emma-kidd-navbar-height                 : 122px;
        --bs-body-font-size                       : 2rem;
    }
}

.bg-color-current {
    background-color : currentColor !important;
}

.bg-color-inherit {
    background-color : inherit !important;
}

.bg-color-transparent {
    background-color : transparent !important;
}

.border-color-current {
    border-color : currentColor !important;
}

.border-color-inherit {
    border-color : inherit !important;
}

.border-color-transparent {
    border-color : transparent !important;
}

.color-current {
    color : currentColor !important;
}

.color-inherit {
    color : inherit !important;
}

.color-default {
    color : var(--bs-body-color) !important;
}

.bg-color-black {
    background-color : var(--emma-kidd-color-black) !important;
}

.bg-color-light-blue {
    background-color : var(--emma-kidd-color-light-blue) !important;
}

.bg-color-purple {
    background-color : var(--emma-kidd-color-purple) !important;
}

.bg-color-purple-2 {
    background-color : var(--emma-kidd-color-purple-2) !important;
}

.bg-color-purple-3 {
    background-color : var(--emma-kidd-color-purple-3) !important;
}

.bg-color-white {
    background-color : var(--emma-kidd-color-white) !important;
}

.border-color-black {
    border-color : var(--emma-kidd-color-black) !important;
}

.border-color-light-blue {
    border-color : var(--emma-kidd-color-light-blue) !important;
}

.border-color-purple {
    border-color : var(--emma-kidd-color-purple) !important;
}

.border-color-purple-2 {
    border-color : var(--emma-kidd-color-purple-2) !important;
}

.border-color-purple-3 {
    border-color : var(--emma-kidd-color-purple-3) !important;
}

.border-color-white {
    border-color : var(--emma-kidd-color-white) !important;
}

.color-black {
    color : var(--emma-kidd-color-black) !important;
}

.color-light-blue {
    color : var(--emma-kidd-color-light-blue) !important;
}

.color-purple {
    color : var(--emma-kidd-color-purple) !important;
}

.color-purple-2 {
    color : var(--emma-kidd-color-purple-2) !important;
}

.color-purple-3 {
    color : var(--emma-kidd-color-purple-3) !important;
}

.color-white {
    color : var(--emma-kidd-color-white) !important;
}

.font-primary {
    font-family : var(--emma-kidd-font-primary) !important;
}

.font-secondary {
    font-family : var(--emma-kidd-font-secondary) !important;
}

#masthead {
    position    : absolute;
    z-index     : var(--emma-kidd-navbar-z-index);
    inline-size : 100%;
}

#masthead::before {
    position         : fixed;
    z-index          : 1;
    display          : block;
    visibility       : hidden;
    content          : "";
    transition       : opacity .25s, visibility 0s linear .25s;
    opacity          : 0;
    background-color : rgba(var(--emma-kidd-backdrop-bg-color-rgb), var(--emma-kidd-backdrop-opacity));
    inset            : 0;
    backdrop-filter  : blur(var(--emma-kidd-backdrop-filter-blur));
}

body.menu-open #masthead::before {
    visibility : visible;
    transition : opacity .8s ease, visibility 0s;
    opacity    : 1;
}

@media (min-width : 992px) {
    body.menu-open #masthead::before {
        display : none;
    }
}

#masthead .navbar {
    display                                           : block;
    background-color                                  : transparent;
    padding-block                                     : 1.25rem;
    padding-inline                                    : 0;
    border-block-end                                  : 1px solid var(--emma-kidd-color-light-blue);
    --emma-kidd-nav-link-dropdown-toggle-active-color : var(--emma-kidd-color-white);
    --emma-kidd-nav-link-dropdown-toggle-color        : var(--emma-kidd-color-light-blue);
    --emma-kidd-nav-link-dropdown-toggle-size         : 0.3em;
    --bs-navbar-active-color                          : var(--emma-kidd-color-white);
    --bs-navbar-brand-color                           : var(--emma-kidd-color-light-blue);
    --bs-navbar-brand-hover-color                     : var(--emma-kidd-color-white);
    --bs-navbar-brand-margin-end                      : 1rem;
    --bs-navbar-brand-padding-y                       : 0;
    --bs-navbar-color                                 : var(--emma-kidd-color-light-blue);
    --bs-navbar-hover-color                           : var(--emma-kidd-color-white);
    --bs-navbar-nav-link-padding-x                    : 0;
}

#masthead .navbar-brand-wrap {
    margin-inline-end : var(--bs-navbar-brand-margin-end);
    inline-size       : 75%;
}

#masthead .navbar-brand {
    display       : block;
    margin-block  : 0;
    margin-inline : 0;
}

#masthead .navbar-brand-wrap img,
#masthead .navbar-brand-wrap svg {
    vertical-align : bottom;
}

#masthead .navbar-buttons {
    display     : flex;
    align-items : flex-start;
    flex-wrap   : wrap;
    gap         : 1.5rem;
}

#masthead .navbar-toggler {
    font-size                                          : 0;
    z-index                                            : 99999;
    cursor                                             : pointer;
    background                                         : var(--emma-kidd-navbar-toggler-icon-bg-color) none;
    border-start-start-radius                          : 0;
    border-start-end-radius                            : 0;
    border-end-end-radius                              : 0;
    border-end-start-radius                            : 0;
    border-block                                       : 0 none;
    border-inline                                      : 0 none;
    inline-size                                        : var(--emma-kidd-navbar-toggler-width);
    block-size                                         : var(--emma-kidd-navbar-toggler-height);
    padding-block                                      : 0;
    padding-inline                                     : 0;
    appearance                                         : none;
    --emma-kidd-navbar-toggler-height                  : 1.25rem;
    --emma-kidd-navbar-toggler-icon-bg-color           : transparent;
    --emma-kidd-navbar-toggler-icon-bottom-line-bottom : -0.5rem;
    --emma-kidd-navbar-toggler-icon-line-bg-color      : var(--emma-kidd-color-light-blue);
    --emma-kidd-navbar-toggler-icon-line-height        : 0.1875rem;
    --emma-kidd-navbar-toggler-icon-top-line-top       : -0.5rem;
    --emma-kidd-navbar-toggler-width                   : 1.875rem;
}

#masthead .navbar-toggler:focus-visible {
    box-shadow : 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

#masthead .navbar-toggler-icon {
    position         : relative;
    background-color : var(--emma-kidd-navbar-toggler-icon-line-bg-color);
    background-image : none;
    inline-size      : 100%;
    block-size       : var(--emma-kidd-navbar-toggler-icon-line-height);
}

#masthead .navbar-toggler-icon::before,
#masthead .navbar-toggler-icon::after {
    position            : absolute;
    display             : inline-block;
    content             : "";
    transition-delay    : 0.3s, 0s;
    transition-duration : 0.3s, 0.3s;
    background-color    : var(--emma-kidd-navbar-toggler-icon-line-bg-color);
    inline-size         : 100%;
    block-size          : var(--emma-kidd-navbar-toggler-icon-line-height);
    inset-inline        : 0;
}

#masthead .navbar-toggler-icon::before {
    transition-property : top, transform;
    inset-block-start   : var(--emma-kidd-navbar-toggler-icon-top-line-top);
    will-change         : top, transform;
}

#masthead .navbar-toggler-icon::after {
    transition-property : bottom, transform;
    inset-block-end     : var(--emma-kidd-navbar-toggler-icon-bottom-line-bottom);
    will-change         : bottom, transform;
}

#masthead .navbar-toggler.navbar-toggler--active .navbar-toggler-icon {
    background-color : transparent;
}

#masthead .navbar-toggler.navbar-toggler--active .navbar-toggler-icon::before,
#masthead .navbar-toggler.navbar-toggler--active .navbar-toggler-icon::after {
    transition-delay : 0s, 0.3s;
}

#masthead .navbar-toggler.navbar-toggler--active .navbar-toggler-icon::before {
    transform         : rotate(-45deg);
    inset-block-start : 0;
}

#masthead .navbar-toggler.navbar-toggler--active .navbar-toggler-icon::after {
    transform       : rotate(45deg);
    inset-block-end : 0;
}

#masthead .navbar-menu {
    overflow       : visible;
    padding-block  : 0;
    padding-inline : 0;
}

#masthead .navbar-nav {
    align-items                    : center;
    flex-direction                 : row;
    flex-wrap                      : wrap;
    gap                            : 0.5rem 0.875rem;
    --emma-kidd-nav-link-font-size : 1.125rem;
    --bs-dropdown-zindex           : calc(var(--emma-kidd-navbar-z-index) - 100);
    --bs-nav-link-color            : var(--bs-navbar-color);
    --bs-nav-link-font-weight      : 300;
    --bs-nav-link-hover-color      : var(--bs-navbar-hover-color);
    --bs-nav-link-padding-y        : 0;
    --bs-navbar-nav-link-padding-x : 0;
    --bs-navbar-nav-link-padding-y : 0;
}

#masthead .navbar-nav .nav-item {
    margin-block : 0;
}

#masthead .navbar-nav .nav-item::before {
    display : none;
}

#masthead .navbar-nav .nav-item .nav-link,
#masthead .navbar-nav .nav-item .dropdown-item {
    font-family     : var(--emma-kidd-font-primary);
    font-weight     : var(--bs-nav-link-font-weight);
    line-height     : calc(41 / 36);
    transition      : none;
    text-decoration : none;
    letter-spacing  : 0;
}

#masthead .navbar-nav .nav-item .nav-link {
    --bs-focus-ring-color   : rgba(var(--emma-kidd-color-white-rgb), 0.25);
    --bs-nav-link-font-size : var(--emma-kidd-nav-link-font-size);
}

#masthead .navbar-nav .nav-item .nav-link:active,
#masthead .navbar-nav .nav-item .nav-link:focus-visible {
    color : var(--bs-navbar-active-color);
}

#masthead .navbar-nav .nav-item .nav-link:focus-visible {
    box-shadow : 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.no-js #masthead .navbar-nav .nav-item:focus-visible .nav-link,
.no-js #masthead .navbar-nav .nav-item:has(:focus-visible) .nav-link,
.no-js #masthead .navbar-nav .nav-item:hover .nav-link,
.no-js #masthead .navbar-nav .nav-item:focus-visible .nav-link:active,
.no-js #masthead .navbar-nav .nav-item:has(:focus-visible) .nav-link:focus-visible,
.no-js #masthead .navbar-nav .nav-item:hover .nav-link:hover {
    color : var(--bs-navbar-active-color);
}

.no-js #masthead .navbar-nav .nav-item:focus-visible .dropdown-toggle::after,
.no-js #masthead .navbar-nav .nav-item:has(:focus-visible) .dropdown-toggle::after,
.no-js #masthead .navbar-nav .nav-item:hover .dropdown-toggle::after,
.no-js #masthead .navbar-nav .nav-item:focus-visible .dropdown-toggle:active::after,
.no-js #masthead .navbar-nav .nav-item:has(:focus-visible) .dropdown-toggle:focus-visible::after,
.no-js #masthead .navbar-nav .nav-item:hover .dropdown-toggle:hover::after {
    border-block-start : var(--emma-kidd-nav-link-dropdown-toggle-size) solid var(--emma-kidd-nav-link-dropdown-toggle-active-color);
}

.no-js #masthead .navbar-nav .nav-item:focus-visible .dropdown-menu-wrap,
.no-js #masthead .navbar-nav .nav-item:has(:focus-visible) .dropdown-menu-wrap,
.no-js #masthead .navbar-nav .nav-item:hover .dropdown-menu-wrap {
    display : block;
}

.no-js #masthead .navbar-nav .nav-item:focus-visible .dropdown-menu,
.no-js #masthead .navbar-nav .nav-item:has(:focus-visible) .dropdown-menu,
.no-js #masthead .navbar-nav .nav-item:hover .dropdown-menu {
    display : block;
}

@media (min-width : 480px) {
    #masthead .navbar-brand-wrap {
        inline-size : auto;
    }

    #masthead .navbar-menu--open {
        inline-size : min(22.5rem, 100%);
    }

    #masthead .navbar-nav {
        column-gap : 1.25rem;
    }
}

@media (min-width : 576px) {
    #masthead .navbar-nav {
        column-gap                     : 1.375rem;
        --emma-kidd-nav-link-font-size : 1.375rem;
    }
}

@media (min-width : 768px) {
    #masthead .navbar-nav {
        column-gap                     : 1.875rem;
        --emma-kidd-nav-link-font-size : 1.875rem;
    }
}

@media (min-width : 992px) {
    #masthead .navbar {
        padding-block : 2.5rem;
    }

    #masthead .navbar-nav {
        justify-content                : flex-end;
        column-gap                     : 1.25rem;
        --emma-kidd-nav-link-font-size : 1.25rem;
    }
}

@media (min-width : 1200px) {
    #masthead .navbar-nav {
        column-gap                     : 1.5rem;
        --emma-kidd-nav-link-font-size : 1.5rem;
    }
}

@media (min-width : 1400px) {
    #masthead .navbar-nav {
        column-gap                     : 1.75rem;
        --emma-kidd-nav-link-font-size : 1.75rem;
    }
}

@media (min-width : 1600px) {
    #masthead .navbar-nav {
        column-gap                     : 2rem;
        --emma-kidd-nav-link-font-size : 2rem;
    }
}

@media (min-width : 1920px) {
    #masthead .navbar-nav {
        column-gap                     : 2.375rem;
        --emma-kidd-nav-link-font-size : 2.25rem;
    }
}

.body-text {
    font-family : var(--bs-body-font-family) !important;
    font-size   : var(--bs-body-font-size) !important;
    font-weight : var(--bs-body-font-weight) !important;
    line-height : var(--bs-body-line-height) !important;
}

b,
strong {
    font-weight : 500;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family      : var(--emma-kidd-font-secondary);
    font-weight      : 700;
    line-height      : calc(4 / 3);
    clear            : both;
    letter-spacing   : 0;
    text-transform   : none;
    margin-block-end : 0.5em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {
    color : inherit;
}

h1, .h1 {
    font-size        : 3.375rem;
    text-transform   : uppercase;
    margin-block-end : 0;
}

h2, .h2 {
    font-size        : 2.25rem;
    margin-block-end : calc(1em / 3);
}

p, dl, ol, ul {
    margin-bottom : 1em;
}

@media (min-width : 480px) {
    h1, .h1 {
        font-size : 4.375rem;
    }
}

@media (min-width : 576px) {
    h1, .h1 {
        font-size : 5.375rem;
    }
}

@media (min-width : 768px) {
    h1, .h1 {
        font-size : 7.125rem;
    }
}

@media (min-width : 992px) {
    h1, .h1 {
        font-size : 4.6875rem;
    }

    h2, .h2 {
        font-size : 3rem;
    }
}

@media (min-width : 1200px) {
    h1, .h1 {
        font-size : 5.625rem;
    }

    h2, .h2 {
        font-size : 3.75rem;
    }
}

@media (min-width : 1400px) {
    h1, .h1 {
        font-size : 6.625rem;
    }

    h2, .h2 {
        font-size : 4.25rem;
    }
}

@media (min-width : 1600px) {
    h1, .h1 {
        font-size : 7.625rem;
    }

    h2, .h2 {
        font-size : 4.875rem;
    }
}

@media (min-width : 1920px) {
    h1, .h1 {
        font-size : 8.75rem;
    }

    h2, .h2 {
        font-size : 5.625rem;
    }
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.row {
    --bs-gutter-x : 2rem;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    max-width                       : var(--emma-kidd-container-max-width);
    --emma-kidd-container-max-width : 100%;
}

@media (min-width : 480px) {
    .container {
        padding-inline                  : 0;
        --emma-kidd-container-max-width : inherit;
    }
}

@media (min-width : 576px) {
    .container-sm {
        padding-inline                  : 0;
        --emma-kidd-container-max-width : inherit;
    }
}

@media (min-width : 768px) {
    .container-md {
        padding-inline                  : 0;
        --emma-kidd-container-max-width : inherit;
    }
}

@media (min-width : 992px) {
    .container-lg {
        padding-inline                  : 0;
        --emma-kidd-container-max-width : inherit;
    }
}

@media (min-width : 1200px) {
    .container-xl {
        padding-inline                  : 0;
        --emma-kidd-container-max-width : inherit;
    }
}

@media (min-width : 1400px) {
    .container-xxl {
        padding-inline                  : 0;
        --emma-kidd-container-max-width : inherit;
    }
}

.fancybox__container {
    inset-block-start : 0 !important;
}

.fancybox__content > .f-button.is-close-btn {
    inset-block-start              : max(var(--emma-kidd-fancybox-btn-top), var(--emma-kidd-navbar-height)) !important;
    inset-inline-end               : var(--emma-kidd-fancybox-btn-right) !important;
    /*noinspection CssUnresolvedCustomProperty*/
    --emma-kidd-fancybox-btn-top   : calc(-1 * var(--f-button-height, 2.5rem));
    --emma-kidd-fancybox-btn-right : 0;
    --f-button-active-bg           : transparent !important;
    --f-button-bg                  : transparent !important;
    --f-button-border-radius       : 0 !important;
    --f-button-hover-bg            : transparent !important;
}

.section,
.section-top {
    padding-block-start : var(--emma-kidd-section-padding-top);
}

.section,
.section-bottom {
    padding-block-end : var(--emma-kidd-section-padding-bottom);
}

:where(.section, .section-bottom).bg-color-transparent:has(+ :where(.section, .section-top):where(.bg-color-transparent, .bg-color-white, :not([class*="bg-color-"]))) {
    padding-block-end : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-transparent + :where(.section, .section-top):where(.bg-color-transparent, .bg-color-white, :not([class*="bg-color-"])) {
    padding-block-start : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-black:has(+ :where(.section, .section-top).bg-color-black) {
    padding-block-end : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).section.bg-color-light-blue:has(+ :where(.section, .section-top).bg-color-light-blue) {
    padding-block-end : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-purple:has(+ :where(.section, .section-top).bg-color-purple) {
    padding-block-end : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).section.bg-color-purple-2:has(+ :where(.section, .section-top).bg-color-purple-2) {
    padding-block-end : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).section.bg-color-purple-3:has(+ :where(.section, .section-top).bg-color-purple-3) {
    padding-block-end : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-white:has(+ :where(.section, .section-top).bg-color-white) {
    padding-block-end : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-black + :where(.section, .section-top).bg-color-black {
    padding-block-start : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-light-blue + :where(.section, .section-top).bg-color-light-blue {
    padding-block-start : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-purple + :where(.section, .section-top).bg-color-purple {
    padding-block-start : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-purple-2 + :where(.section, .section-top).bg-color-purple-2 {
    padding-block-start : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-purple-3 + :where(.section, .section-top).bg-color-purple-3 {
    padding-block-start : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom).bg-color-white + :where(.section, .section-top).bg-color-white {
    padding-block-start : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom):not([class*="bg-color-"]:not(.bg-color-transparent, .bg-color-white)):has(+ :where(.section, .section-top):where(.bg-color-transparent, .bg-color-white, :not([class*="bg-color-"]))) {
    padding-block-end : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

:where(.section, .section-bottom):not([class*="bg-color-"]:not(.bg-color-transparent, .bg-color-white)) + :where(.section, .section-top):where(.bg-color-transparent, .bg-color-white, :not([class*="bg-color-"])) {
    padding-block-start : calc(var(--emma-kidd-section-padding-bottom) / 2);
}

.skip-link {
    position                  : absolute;
    z-index                   : calc(var(--emma-kidd-navbar-z-index) + 1);
    background-color          : var(--emma-kidd-color-purple);
    padding-block             : 1rem;
    padding-inline            : 1rem;
    --bs-focus-ring-color     : rgba(var(--emma-kidd-color-purple-2-rgb), 0.25);
    --bs-link-color           : var(--emma-kidd-color-white);
    --bs-link-color-rgb       : var(--emma-kidd-color-white-rgb);
    --bs-link-hover-color     : var(--emma-kidd-color-white);
    --bs-link-hover-color-rgb : var(--emma-kidd-color-white-rgb);
}

.skip-link:active,
.skip-link:focus,
.skip-link:focus-visible,
.skip-link:hover {
    text-decoration : none;
}

.skip-link:focus,
:focus-visible {
    outline    : 0;
    box-shadow : 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

:root,
body {
    block-size     : auto !important;
    min-block-size : calc(100 * var(--vh-unit)) !important;
}

:root.menu-open,
body.menu-open {
    overflow : hidden;
}

a {
    text-decoration : none;
}

a:active,
a:focus-visible,
a:hover {
    text-decoration : underline;
}

blockquote {
    font-style : normal;
}

hr {
    max-width    : 100%;
    margin-right : auto;
    margin-left  : auto;
    opacity      : 1;
    border-color : var(--emma-kidd-color-purple);
}

iframe {
    max-width      : 100%;
    vertical-align : bottom;
}

iframe[src*="vimeo.com"],
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
    block-size   : auto;
    aspect-ratio : 16 / 9;
}

.ratio iframe[src*="vimeo.com"],
.ratio iframe[src*="youtube.com"],
.ratio iframe[src*="youtube-nocookie.com"] {
    block-size   : 100%;
    aspect-ratio : unset;
}

img,
svg {
    max-width      : 100%;
    block-size     : auto;
    max-block-size : 100%;
}

img {
    object-fit      : contain;
    object-position : center center;
}

ol,
ul {
    margin  : 0 0 1em;
    padding : 0 0 0 2.5rem;
}

ol {
    list-style : decimal;
}

ul {
    list-style : disc;
}

ol > li,
ul > li {
    margin-bottom : 0.5rem;
    list-style    : inherit;
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-top : 0.5rem;
}

p {
    margin-bottom : 1em;
}

svg use {
    transition-timing-function : inherit;
    transition-duration        : inherit;
    transition-property        : inherit;
}

.table-wrap {
    margin : 0 0 1em;
}

table {
    margin          : 0 0 1em;
    table-layout    : auto;
    border-collapse : collapse;
    inline-size     : auto;

    th,
    td {
        vertical-align : top;
    }
}

video {
    vertical-align : bottom;
}

#page {
    position       : relative;
    display        : flex;
    flex-direction : column;
    min-height     : calc(100 * var(--vh-unit));
}

#page::after {
    position         : fixed;
    z-index          : 1;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;
    display          : block;
    visibility       : hidden;
    content          : "";
    transition       : opacity .25s, visibility 0s linear .25s;
    opacity          : 0;
    background-color : rgba(var(--emma-kidd-backdrop-bg-color-rgb), var(--emma-kidd-backdrop-opacity));
    backdrop-filter  : blur(var(--emma-kidd-backdrop-filter-blur));
}

body.menu-open #page::after {
    visibility : visible;
    transition : opacity .8s ease, visibility 0s;
    opacity    : 1;
}

#content {
    display                   : flex;
    flex-direction            : column;
    padding                   : 0;
    scroll-margin-block-start : calc(-1 * var(--emma-kidd-navbar-height));
}

#content > #main {
    flex      : 1 0 0;
    min-width : 0;
}

#content > #main :last-child {
    margin-block-end : 0 !important;
}

@media (min-width : 992px) {
    :root.menu-open {
        overflow : auto;
    }

    body.menu-open {
        overflow : visible;
    }

    #page::after {
        display : none;
    }
}

.hover-zoom {
    display  : block;
    overflow : hidden;
}

.hover-zoom img {
    transition : transform 0.3s ease-in-out;
}

.hover-zoom:hover img {
    transform : scale(1.1);
}

.hero {
    position                             : relative;
    background                           : var(--emma-kidd-color-purple-3) url(../images/hero-mania-01.jpg) no-repeat 67% top;
    background-size                      : cover;
    padding-block-start                  : calc(var(--emma-kidd-navbar-height) + var(--emma-kidd-hero-padding-block-start));
    min-block-size                       : calc(100 * var(--vh-unit));
    --emma-kidd-hero-padding-block-start : 0.75rem;
    --bs-link-color                      : var(--emma-kidd-color-light-blue);
    --bs-link-color-rgb                  : var(--emma-kidd-color-light-blue-rgb);
    --bs-link-hover-color                : var(--emma-kidd-color-white);
    --bs-link-hover-color-rgb            : var(--emma-kidd-color-white-rgb);
}

.hero__title {
    color : var(--emma-kidd-color-light-blue);
}

.hero__subtitle {
    font-family      : var(--emma-kidd-font-tertiary);
    font-size        : 1.5rem;
    font-weight      : 300;
    text-transform   : uppercase;
    color            : var(--emma-kidd-color-light-blue);
    margin-block-end : 0.5em;
}

.hero__watch a {
    display : inline-block;
}

.hero__watch-icon text {
    font-family : var(--emma-kidd-font-tertiary);
    font-size   : 36px;
    fill        : currentColor;
}

.hero__watch-icon line,
.hero__watch-icon polyline,
.hero__watch-icon rect {
    fill              : none;
    stroke            : currentColor;
    stroke-miterlimit : 10;
    /*noinspection CssNonIntegerLengthInPixels*/
    stroke-width      : 0.9px;
}

.hero__watch-icon-letter-w {
    letter-spacing : -0.02em;
}

.hero__watch-icon-letter-capital-p {
    letter-spacing : 0;
}

@media (min-width : 480px) {
    .hero {
        --emma-kidd-hero-padding-block-start : 1.0625rem;
    }

    .hero__subtitle {
        font-size : 2rem;
    }
}

@media (min-width : 576px) {
    .hero {
        --emma-kidd-hero-padding-block-start : 1.25rem;
    }

    .hero__subtitle {
        font-size : 2.375rem;
    }
}

@media (min-width : 768px) {
    .hero {
        --emma-kidd-hero-padding-block-start : 1.6875rem;
    }

    .hero__subtitle {
        font-size : 3.25rem;
    }
}

@media (min-width : 992px) {
    .hero__subtitle {
        font-size : 2.125rem;
    }
}

@media (min-width : 1200px) {
    .hero__subtitle {
        font-size : 2.5rem;
    }
}

@media (min-width : 1400px) {
    .hero__subtitle {
        font-size : 3rem;
    }
}

@media (min-width : 1600px) {
    .hero__subtitle {
        font-size : 3.5rem;
    }
}

@media (min-width : 1920px) {
    .hero__subtitle {
        font-size : 4rem;
    }
}

@media (min-width : 1400px) {
    .about-portfolio {
        position : relative;
    }

    .about-portfolio::before {
        position                                         : absolute;
        z-index                                          : 1;
        display                                          : block;
        content                                          : "";
        background                                       : url(../images/blue-curve-about-lower.png) no-repeat;
        background-size                                  : cover;
        inset-block-start                                : 651px;
        inset-inline-start                               : calc((((100 * var(--vw-unit)) - 1920px) / 2) + var(--emma-kidd-blue-curve-about-lower-inline-offset));
        inline-size                                      : 887px;
        aspect-ratio                                     : 1182 / 964;
        --emma-kidd-blue-curve-about-lower-inline-offset : 238px;
    }
}

@media (min-width : 1600px) {
    .about-portfolio::before {
        inset-block-start                                : 564px;
        --emma-kidd-blue-curve-about-lower-inline-offset : 148px;
    }
}

@media (min-width : 1920px) {
    .about-portfolio::before {
        inline-size                                      : 1182px;
        inset-block-start                                : 368px;
        --emma-kidd-blue-curve-about-lower-inline-offset : -34px;
    }
}

.about > .container {
    container-type : inline-size;
}

.about__grid {
    display : grid;
    gap     : 1.5625rem 2rem;
}

.about__grid-item {
    min-inline-size : 0;
}

.about__grid-item-img img {
    inline-size : 100%;
}

@container (min-width: 780px) {
    .about__grid {
        grid-template-columns : calc(100% * 626 / 1742) auto;
    }
}

@container (min-width: 900px) {
    .about__grid {
        column-gap : 3rem;
    }
}

@container (min-width: 1020px) {
    .about__grid {
        column-gap : 4rem;
    }
}

@supports not (container-type: inline-size) {
    @media (min-width : 992px) {
        .about__grid {
            grid-template-columns : calc(100% * 626 / 1742) auto;
            column-gap            : 3rem;
        }
    }

    @media (min-width : 1200px) {
        .about__grid {
            column-gap : 4rem;
        }
    }
}

@media (min-width : 1400px) {
    .about > .container {
        position : relative;
    }

    .about > .container::before {
        position           : absolute;
        z-index            : 1;
        display            : block;
        content            : "";
        transform          : translateY(calc(100% * -24 / 215));
        background         : url(../images/blue-curve-about-upper.png) no-repeat;
        background-size    : cover;
        inset-block-start  : calc(-1 * var(--emma-kidd-section-padding-top));
        inset-inline-start : calc(336 * var(--emma-kidd-container-max-width) / 1742);
        inline-size        : 462px;
        aspect-ratio       : 462 / 215;
    }
}

.portfolio {
    background      : url(../images/bg-portfolio.jpg) no-repeat;
    background-size : cover;
}

.portfolio > .container {
    container-type : inline-size;
}

.portfolio__video {
    margin-block-end : 2.4375rem;
}

.portfolio__video iframe {
    inline-size : 100%;
}

.portfolio__description {
    font-family      : var(--emma-kidd-font-tertiary);
    font-size        : 1.5rem;
    font-weight      : 400;
    margin-block-end : 2.25rem;
}

.portfolio__stills {
    display : grid;
    gap     : 0.625rem 0.5rem;
}

.portfolio__still {
    min-inline-size : 0;
}

.portfolio__still a {
    display : block;
}

@container (min-width: 600px) {
    .portfolio__stills {
        grid-template-columns : repeat(2, 1fr);
    }
}

@container (min-width: 900px) {
    .portfolio__stills {
        grid-template-columns : repeat(3, 1fr);
    }

    .portfolio__still img {
        block-size  : 100%;
        inline-size : 100%;
        object-fit  : cover;
    }

    .portfolio__still:first-child,
    .portfolio__still:last-child {
        grid-column : span 2;
        grid-row    : span 2;
    }

    .portfolio__still:nth-child(5) {
        grid-row : 4;
    }
}

@container (min-width: 1742px) {
    .portfolio__stills {
        grid-template-columns : 1164px 570px;
    }

    .portfolio__still:first-child,
    .portfolio__still:last-child {
        grid-column : 1;
    }

    .portfolio__still:nth-child(3) {
        grid-column : 2;
    }

    .portfolio__still:nth-child(4),
    .portfolio__still:nth-child(5) {
        grid-column : 2;
        grid-row    : auto;
        transform   : translateX(-1172px);
    }

    .portfolio__still:last-child {
        grid-row  : 3 / span 2;
        transform : translateX(578px);
    }
}

@supports not (container-type: inline-size) {
    @media (min-width : 768px) {
        .portfolio__stills {
            grid-template-columns : repeat(2, 1fr);
        }
    }

    @media (min-width : 1200px) {
        .portfolio__stills {
            grid-template-columns : repeat(3, 1fr);
        }

        .portfolio__still img {
            block-size  : 100%;
            inline-size : 100%;
            object-fit  : cover;
        }

        .portfolio__still:first-child,
        .portfolio__still:last-child {
            grid-column : span 2;
            grid-row    : span 2;
        }

        .portfolio__still:nth-last-child(5) {
            grid-row : 4;
        }
    }

    @media (min-width : 1920px) {
        .portfolio__stills {
            grid-template-columns : 1164px 570px;
        }

        .portfolio__still:first-child,
        .portfolio__still:last-child {
            grid-column : 1;
        }

        .portfolio__still:nth-child(3) {
            grid-column : 2;
        }

        .portfolio__still:nth-child(4),
        .portfolio__still:nth-child(5) {
            grid-column : 2;
            grid-row    : auto;
            transform   : translateX(-1172px);
        }

        .portfolio__still:last-child {
            grid-row  : 3 / span 2;
            transform : translateX(578px);
        }
    }
}

@media (min-width : 576px) {
    .portfolio__description {
        font-size : 1.6875rem;
    }
}

@media (min-width : 992px) {
    .portfolio__video {
        margin-bottom : 4.875rem;
    }

    .portfolio__description {
        font-size : 1.875rem;
    }
}

@media (min-width : 1400px) {
    .portfolio {
        position : relative;
    }

    .portfolio::before {
        position                                   : absolute;
        z-index                                    : 1;
        display                                    : block;
        content                                    : "";
        background                                 : url(../images/blue-curve-video.png) no-repeat;
        background-size                            : cover;
        inline-size                                : 693px;
        block-size                                 : 490px;
        inset-inline-start                         : calc((((100 * var(--vw-unit)) - 1920px) / 2) + var(--emma-kidd-blue-curve-video-inline-offset));
        inset-block-start                          : 580px;
        --emma-kidd-blue-curve-video-inline-offset : 243px;
    }

    .portfolio__blue-curve-stills {
        position                                    : absolute;
        z-index                                     : 1;
        display                                     : block;
        content                                     : "";
        background                                  : url(../images/blue-curve-stills.png) no-repeat;
        background-size                             : cover;
        inline-size                                 : 981px;
        block-size                                  : 589px;
        inset-inline-end                            : calc((((100 * var(--vw-unit)) - 1920px) / 2) + var(--emma-kidd-blue-curve-stills-inline-offset));
        inset-block-end                             : 10px;
        --emma-kidd-blue-curve-stills-inline-offset : 236px;
    }

    .portfolio__video {
        margin-bottom : 9.75rem;
    }

    .portfolio__description {
        font-size : 2.0625rem;
    }
}

@media (min-width : 1600px) {
    .portfolio::before {
        inset-block-start                          : 690px;
        --emma-kidd-blue-curve-video-inline-offset : 153px;
    }

    .portfolio__blue-curve-stills {
        --emma-kidd-blue-curve-stills-inline-offset : 146px;
    }
}

@media (min-width : 1920px) {
    .portfolio::before {
        inset-block-start                          : 855px;
        --emma-kidd-blue-curve-video-inline-offset : 2px;
    }

    .portfolio__blue-curve-stills {
        --emma-kidd-blue-curve-stills-inline-offset : -4px;
    }

    .portfolio__description {
        font-size : 2.25rem;
    }
}

#colophon {
    font-size                 : 1.5rem;
    text-align                : center;
    color                     : var(--emma-kidd-color-white);
    background-color          : var(--emma-kidd-color-purple-2);
    --bs-link-color           : var(--emma-kidd-color-white);
    --bs-link-color-rgb       : var(--emma-kidd-color-white-rgb);
    --bs-link-hover-color     : var(--emma-kidd-color-light-blue);
    --bs-link-hover-color-rgb : var(--emma-kidd-color-light-blue-rgb);
}

#colophon *:not(a) {
    color : inherit;
}

#colophon a {
    --bs-focus-ring-color : rgba(var(--emma-kidd-color-white-rgb), 0.25);
}

#colophon .site-footer__grid {
    display         : flex;
    align-items     : center;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 2rem;
}

#colophon .site-footer__grid-item {
    min-inline-size : 0;
}

#colophon .site-footer__grid-item-title-wrap,
#colophon .site-footer__grid-item-hr,
#colophon .site-footer__grid-item-email-wrap {
    inline-size : 100%;
}

#colophon .site-footer__grid-item-title {
    font-size        : 2rem;
    color            : var(--emma-kidd-color-light-blue);
    margin-block-end : 0;
}

#colophon .site-footer__grid-item-hr {
    border-block-end : 1px solid var(--emma-kidd-color-white);
}

#colophon .site-footer__grid-item-social a {
    display : block;
}

#colophon .site-footer__grid-item-social img,
#colophon .site-footer__grid-item-social svg {
    max-width : 4rem;
}

@media (min-width : 576px) {
    #colophon {
        font-size : 1.6875rem;
    }

    #colophon .site-footer__grid-item-title {
        font-size : 2.25rem;
    }
}

@media (min-width : 992px) {
    #colophon {
        font-size  : 1.4375rem;
        text-align : start;
    }

    #colophon .site-footer__grid {
        justify-content : space-between;
        column-gap      : 1.5rem;
    }

    #colophon .site-footer__grid-item-title-wrap,
    #colophon .site-footer__grid-item-email-wrap {
        inline-size : auto;
    }

    #colophon .site-footer__grid-item-title {
        font-size : 1.875rem;
    }

    #colophon .site-footer__grid-item-hr {
        inline-size : 25%;
    }

    #colophon .site-footer__grid-item-social img,
    #colophon .site-footer__grid-item-social svg {
        max-width : 2.5rem;
    }
}

@media (min-width : 1200px) {
    #colophon .site-footer__grid {
        column-gap : 2rem;
    }

    #colophon .site-footer__grid-item-hr {
        inline-size : calc(100% / 3);
    }

    #colophon .site-footer__grid-item-social img,
    #colophon .site-footer__grid-item-social svg {
        max-width : 3rem;
    }
}

@media (min-width : 1400px) {
    #colophon {
        font-size : 1.5625rem;
    }

    #colophon .site-footer__grid-item-title {
        font-size : 2.0625rem;
    }

    #colophon .site-footer__grid-item-hr {
        inline-size : 36%;
    }

    #colophon .site-footer__grid-item-social img,
    #colophon .site-footer__grid-item-social svg {
        max-width : 4rem;
    }
}

@media (min-width : 1600px) {
    #colophon .site-footer__grid-item-hr {
        inline-size : calc(100% * 734 / 1742);
    }
}

@media (min-width : 1920px) {
    #colophon {
        font-size : 2rem;
    }

    #colophon .site-footer__grid-item-title {
        font-size : 3rem;
    }
}