/* ------------------------------- */
/* Colors */
/* ------------------------------- */
:root {
    --font-body: "Figtree", sans-serif;

    --color-white: #fff;
    --color-black: #000;
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-gray-80: #222;
    --color-gray-90: #1c1c1c;
    --color-tan: #fce7cb;
    --color-orange: #fd5c38;
    --color-dark-purple: #390163;
    --color-purple: #610093;
    --color-light-purple: #bc99f2
    --color-green: #105551;

    --color-bg: #fff;

    --color-bg-hover: #390163;

    --color-copy: #1c1c1c;
    --color-copy-cite: #1c1c1c;
    --color-copy-heading: #390163;
    --color-copy-heading-alt: #fce7cb;
    --color-copy-heading-alt-2: #701b9b;

    --color-copy-hover: #fff;
    --color-copy-nav-hover: #701b9b;

    --color-accent: #fd5c3B;
    --color-accent-alt: #fce7cb;
    --color-accent-alt-2: #105551;
    --color-accent-alt-3: #bc99f2;
    --color-accent-alt-4: #610093;

    --color-outline: #e2e2e2;
    --color-outline-forms: #390163;
    --color-outline-forms-focused: #390163;

    --color-error: #fd2a00;

    --color-button-outline: #fd5c38;
    --color-button-outline-hover: #390163;
    --color-button-bg: #fd5c38;
    --color-button-copy: #390163;
    --color-button-bg-hover: #390163;
    --color-button-copy-hover : #fff;

    --color-fill-logo: #390163;

    --spacing: 1.5rem;
    --pad: 1.5rem;
    --pad-static: 2.5rem;

    --pad-copy: 5px 9px;
    --pad-button: 9px 12px;

    --transition-speed: 0.3s;
}

@media screen and (min-width: 768px) {
    :root {
        --pad: 2.5rem;
    }
}

/* ------------------------------- */
/* Single-use Color Classes */
/* ------------------------------- */
[class*="bg-color"] {
    display: inline-block;
    line-height: 1;
    padding: var(--pad-copy);
}

.color-white {
    color: var(--color-white);
}

.bg-color-white {
    background-color: var(--color-white);
}

.color-black {
    color: var(--color-black);
}

.bg-color-black {
    background-color: var(--color-black);
}

.color-gray-80 {
    color: var(--color-gray-80);
}

.bg-color-gray-80 {
    background-color: var(--color-gray-80);
}

.color-gray-90 {
    color: var(--color-gray-90);
}

.bg-color-gray-90 {
    background-color: var(--color-gray-90);
}

.color-tan {
    color: var(--color-tan);
}

.bg-color-tan {
    background-color: var(--color-tan);
}

.color-orange {
    color: var(--color-orange);
}

.bg-color-orange {
    background-color: var(--color-orange);
}

.color-dark-purple {
    color: var(--color-dark-purple);
}

.bg-color-dark-purple {
    background-color: var(--color-dark-purple);
}

.color-purple {
    color: var(--color-purple);
}

.bg-color-purple {
    background-color: var(--color-purple);
}

.color-light-purple {
    color: var(--color-light-purple);
}

.bg-color-light-purple {
    background-color: var(--color-light-purple);
}

.color-green {
    color: var(--color-green);
}

.bg-color-green {
    background-color: var(--color-green);
}


/* ------------------------------- */
/* Themes */
/* ------------------------------- */
.theme-default {
    --color-bg: #fff;

    --color-bg-hover: #701b9b;

    --color-copy: #1c1c1c;
    --color-copy-cite: #1c1c1c;
    --color-copy-heading: #390163;
    --color-copy-heading-alt: #fce7cb;
    --color-copy-heading-alt-2: #701b9b;

    --color-copy-hover: #fff;
    --color-copy-nav-hover: #701b9b;

    --color-outline: #e2e2e2;
    --color-outline-forms: #390163;
    --color-outline-forms-focused: #390163;

    --color-error: #fd2a00;

    --color-fill-logo: #390163;
}

.theme-bg-alt {
    --color-bg: #9833ae;

    --color-bg-hover: #fff;

    --color-copy: #fff;
    --color-copy-cite: #fff;
    --color-copy-heading: #fff;
    --color-copy-heading-alt-2: #fff;

    --color-copy-hover: #151515;
    --color-copy-nav-hover: #fff;

    --color-outline: #fff;
    --color-outline-forms: #fff;
    --color-outline-forms-focused: #fff;

    --color-error: #fff;

    --color-fill-logo: #fff;
}

.theme-bg-dark {
    --color-bg: #390163;

    --color-bg-hover: #fff;

    --color-copy: #fff;
    --color-copy-cite: #fff;
    --color-copy-heading: #fce7cb;
    --color-copy-heading-alt-2: #fff;

    --color-copy-hover: #390163;
    --color-copy-nav-hover: #fff;

    --color-outline: #fff;
    --color-outline-forms: #fff;
    --color-outline-forms-focused: #fff;

    --color-fill-logo: #fff;
}

.theme-bg-dark-alt {
    --color-bg: #bc99f2;

    --color-outline: #390163;
    --color-outline-forms: #390163;
    --color-outline-forms-focused: #390163;

    --color-copy-nav-hover: #fff;
}


.theme-bg-vibrant {
    --color-bg: #fd5c3B;
    --color-copy: #390163;
}

.theme-bg-dark-alt-2 {
    --color-bg: #390163;
    --color-copy: #fce7cb;
}

.theme-bg-light {
    --color-bg: #fce7cb;
    --color-copy: #701b9b;
}

.themed {
    color: var(--color-copy);
    background-color: var(--color-bg);
}

.themed:is(a) {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--color-copy-heading);
    display: inline;
    line-height: normal;
    padding: var(--pad-button);
}

/* ------------------------------- */
/* Button Themes */
/* ------------------------------- */
.button-theme-default {
    --color-button-outline: #fd5c38;
    --color-button-outline-hover: #390163;
    --color-button-bg: #fd5c38;
    --color-button-copy: #390163;
    --color-button-bg-hover: #390163;
    --color-button-copy-hover : #fff;
}

.themed:not(.theme-default) .button-theme-default {
    --color-button-bg-hover: #fff;
    --color-button-copy-hover : #390163;
    --color-button-outline-hover: #fff;
}

.button-theme-dark {
    --color-button-outline: #390163;
    --color-button-outline-hover: #fd5c38;
    --color-button-bg: #390163;
    --color-button-copy: #fff;
    --color-button-bg-hover: #fd5c38;
    --color-button-copy-hover: #390163;
}

.themed:not(.theme-default) .button-theme-dark {
    --color-button-outline: #fff;
    --color-button-outline-hover: #fff;
    --color-button-bg: #fff;
    --color-button-copy: #390163;
    --color-button-bg-hover: #fff;
    --color-button-copy-hover: #390163;
}

.button-theme-outline {
    --color-button-outline: #390163;
    --color-button-outline-hover: #390163;
    --color-button-bg: #fff;
    --color-button-copy: #390163;
    --color-button-bg-hover: #390163;
    --color-button-copy-hover: #fff;
}

.themed:not(.theme-default) .button-theme-outline {
    --color-button-outline: #fff;
    --color-button-outline-hover: #fff;
    --color-button-bg: transparent;
    --color-button-copy: #fff;
    --color-button-bg-hover: #fff;
    --color-button-copy-hover: #390163;
}

/* ------------------------------- */
/* Visibility */
/* ------------------------------- */
.mobile {
    display: block;
}

.desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    .mobile {
        display: none;
    }

    .desktop {
        display: block;
    }
}

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ------------------------------- */
/* Demo elements */
/* ------------------------------- */
.expand-temp {
    height: 75vh;
}

.temp-space {
    margin-bottom: var(--pad);
}

/* ------------------------------- */
/* Layout */
/* ------------------------------- */
.container {
    padding: var(--pad);
}

.container.static {
    padding: var(--pad-static) var(--pad);
}

/* ------------------------------- */
/* General */
/* ------------------------------- */
html,
body {
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;

    font-family: var(--font-body);
    font-optical-sizing: auto;
    font-size: clamp(1.125rem, 0.188vw + 1.081rem, 1.25rem);
    font-weight: 400;
    line-height: clamp(1.438rem, 0.469vw + 1.327rem, 1.75rem)
}

.freeze {
    height: 100%;
    overflow: hidden;
}

.pull-up {
    transform: translateY(-15%);
}

@media screen and (min-width: 768px) {
    .pull-up {
        transform: translateY(-50%);
    }
}

a {
    color: currentColor;
    text-decoration: none;
    transition-duration: var(--transition-speed);
    transition-property: background-color, color;
    transition-timing-function: ease-in-out;
}

:is(p) a {
    text-decoration: underline;
}

a:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-copy-hover);
    outline: none;
}

ul,
ol,
figure,
blockquote,
pullquote,
p:not(:last-child) {
    margin-bottom: 2.5rem;
}

svg,
img {
    vertical-align: middle;
}

img {
    height: auto;
    width: 100%;
}

img[data-src] {
    opacity: 0;
    transition-duration: var(--transition-speed);
    transition-property: opacity;
    transition-timing-function: ease-in;
    transition-delay: calc(var(--transition-speed) * 2);
}

img[data-src].lazyloaded {
    opacity: 1;
}

p {
    margin-top: 0;
    margin-bottom: var(--spacing);
}

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

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
figure {
    margin-top: 0;
}

h1,
h2,
h3,
h6 {
    font-weight: 800;
}

h4,
h5 {
    font-size: 700;
}

.h1,
h1 {
    /* clamp(min, base + slope , max) */
    font-size: clamp(3rem, 2.2077rem + 3.3803vw, 5.25rem);
    line-height: 1;
}

.h2,
h2 {
    /* clamp(min, base + slope , max) */
    font-size: clamp(2.75rem, 2.629vw + 2.134rem, 4.5rem);
    line-height: clamp(3rem, 2.254vw + 2.472rem, 4.5rem);
}

.h3,
h3 {
    /* clamp(min, base + slope , max) */
    font-size: clamp(2rem, 1.878vw + 1.56rem, 3.25rem);
    line-height: clamp(2rem, 1.878vw + 1.56rem, 3.25rem);
}

.h4,
h4 {
    /* clamp(min, base + slope , max) */
    font-size: clamp(1.75rem, 0.751vw + 1.574rem, 2.25rem);
    line-height: clamp(1.875rem, 0.845vw + 1.677rem, 2.438rem);
}

.h5,
h5 {
    /* clamp(min, base + slope , max) */
    font-size: var(--spacing);
    line-height: 1.95rem;
}

.h6,
h6 {
    /* clamp(min, base + slope , max) */
    font-size: 1.125rem;
    line-height: 1.625rem;
}

.title-large {
    font-size: clamp(2.25rem, 6.009vw + 0.842rem, 6.25rem);
    font-weight: 800;
    line-height: clamp(2rem, 4.883vw + 0.856rem, 5.25rem);
    text-transform: uppercase;
}

.input-large {
    font-size: clamp(var(--spacing), 0.376vw + 1.412rem, 1.75rem);
}

date,
.label,
label,
.more {
    font-size: 0.9375rem;
    text-transform: uppercase;
}

.label,
label,
.more {
    font-weight: 700;
}

.more {
    text-decoration: underline;
}

.more:hover {
    box-shadow: -5px 0px 0px 0px var(--color-bg-hover),
        5px 0px 0px 0px var(--color-bg-hover);
}

button {
    font-size: var(--spacing);
}

p.medium {
    font-size: 1.125rem;
}

p.small {
    font-size: 1rem;
}

figure {
    display: table;
}

figcaption {
    font-size: 0.9375rem;
}

cite {
    font-size: 0.875rem;
}

pullquote,
blockquote {
    font-size: clamp(1.125rem, 0.376vw + 1.037rem, 1.375rem);
}

/* ------------------------------- */
/* Animations */
/* ------------------------------- */
.in-view,
.in-view:hover,
.in-view:focus {
    transition: all var(--transition-speed) ease-in-out;
}

.delay,
.delay::after,
.delay::before {
    transition-delay: var(--transition-speed);
}

.delay-fast,
.delay-fast::after,
.delay-fast::before {
    transition-delay: calc(var(--transition-speed) / 2);
}

.delay-slow,
.delay-slow::after,
.delay-slow::before {
    transition-delay: calc(var(--transition-speed) * 2);
}

.delay-extra-slow,
.delay-extra-slow::after,
.delay-extra-slow::before {
    transition-delay: calc(var(--transition-speed) * 3);
}

.animate-top-down {
    opacity: 0;
    transform: translateY(-15%);
    transition-duration: var(--transition-speed);
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out;
}

.animate-top-down.in-view {
    opacity: 1;
    transform: translateY(0);
}

.animate-right-in {
    opacity: 0;
    transform: translateX(-15%);
    transition-duration: calc(var(--transition-speed) * 2);
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out;
}

.animate-right-in.in-view {
    opacity: 1;
    transform: translateX(0);
}

.animate-bottom-up {
    opacity: 0;
    transform: translateY(25%);
    transition-duration: var(--transition-speed);
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out;
}

.animate-bottom-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.animate-highlight {
    background-image: linear-gradient(
        to right, 
        var(--color-copy),
        var(--color-copy) 50%,
        var(--color-bg) 50%,
        var(--color-bg)
      );
    background-position: 0;
    background-size: calc(1 * (100% * 2)) 100%;
    transition-duration: var(--transition-speed), calc(var(--transition-speed) * 2);
    transition-property: color, background;
    transition-timing-function: ease-in-out;
}

.animate-highlight.in-view {
    background-position: -100%
}

.animate-highlight:hover {
    background-position: 0;
}

.animate-opacity {
    opacity: 0;
    transition-duration: var(--transition-speed);
    transition-property: opacity;
    transition-timing-function: ease-in;
}

.animate-opacity.in-view {
    opacity: 1;
}

.animate-top-border-highlight::before {
    transition-duration: var(--transition-speed);
    transition-property: width;
    transition-timing-function: ease-in;
    width: 0;
}

.animate-top-border-highlight.in-view::before {
    width: 100%;
}

.animate-width-in {
    opacity: 0;
    overflow: hidden;
    transition-duration: var(--transition-speed);
    transition-property: width, opacity;
    transition-timing-function: ease-in;
    width: 0;
}

.animate-width-in.in-view {
    opacity: 1;
    width: 100%;
}

/* ------------------------------- */
/* Hero Elements */
/* ------------------------------- */
.hero {
    height: 100vh;
    max-height: 600px; /* comp designation */
    position: relative;
}

.hero__image-container {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero__image-container::after {
    content: '';
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.4), transparent);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.hero__image-container img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.hero__content {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    height: 100%;
    position: relative;
}

.hero__content-cta {
    align-self: flex-end;
    margin-bottom: 0;
    max-width: 85%;
}

.menu-trigger {
    position: relative;
    z-index: 1000;
}

@media screen and (min-width: 768px) {
    .hero {
        max-height: 775px; /* comp designation */
    }
}

/* ------------------------------- */
/* Logos */
/* ------------------------------- */
.logo-svg {
    fill: var(--color-fill-logo);
}

.logo {
    max-width: 140px;
}

.logo svg {
    height: auto;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .logo {
        max-width: 215px;
    }
}

/* ------------------------------- */
/* Navigation */
/* ------------------------------- */
nav a:hover,
nav a:focus {
    background-color: transparent;
    color: var(--color-copy-nav-hover);
    text-decoration: underline;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav ul li {
    display: inline-flex;
}

.navigation__container {
    width: 100%;
}

/* ------------------------------- */
/* Hero Top Navigation */
/* ------------------------------- */
.navigation__container--top {
    display: flex;
    font-size: 1.125rem;
    justify-content: flex-end;
    padding: 0.375rem var(--spacing);
    position: relative;
    z-index: 1;
}

.navigation__container--top ul:not(li > ul) {
    align-items: center;
    display: flex;
    gap: var(--spacing);
    margin: 0;
    padding: 0;
}

.navigation__container--top li {
    display: inline-block;
    position: relative;
}

.navigation__container--top li.has-children ul {
    display: inline-block;
    opacity: 0;
    padding: calc(var(--pad) / 2);
    pointer-events: none;
    position: absolute;
    right: calc(-1 * var(--spacing));
    top: calc(100% + 0.375rem);
    transform: translateY(var(--pad));
    transition-duration: var(--transition-speed);
    transition-property: opacity, height, transform;
    transition-timing-function: ease;
    width: 285px;
}

.navigation__container--top li.has-children ul.active {
    opacity: 1;
    pointer-events: all;
    top: calc(100% + 0.375rem);
    transform: translateY(0);
}

.navigation__container--top li > ul li {
    width: 100%;
}

.navigation__container--top li > ul li:not(:last-child) {
    margin-bottom: calc(var(--pad) / 3);
    width: 100%;
}

.navigation__container--cta {
    display: flex;
    gap: 0;
}

@media screen and (min-width: 768px) {
    .navigation__container--cta {
        display: flex;
        gap: var(--spacing);
    }
}

.child-trigger {
    background-color: transparent;
    border: none;
    font-size: 1rem;
}

.child-trigger::after {
    background-color: var(--color-white);
    content: '';
    display: inline-block;
    height: 0.5625rem;
    mask-size: 0.875rem 0.5625rem;
    mask:  url('../../assets/caret.svg') no-repeat 50% 50%;
    padding: 0 0.5rem;
    position: relative;
    transform-origin: 50% 50%;
    transform: rotate(180deg);
    transition: all var(--transition-speed) ease-in-out;
    width: 0.875rem;
}

.child-trigger.active::after {
    transform: rotate(0deg);
}

/* ------------------------------- */
/* Hero Inner Navigation */
/* ------------------------------- */
.navigation__container--inner {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: var(--spacing);
    justify-content: space-between;
    width: 100%;
}

/* ------------------------------- */
/* Mobile Nav */
/* ------------------------------- */
.navigation__container.mobile {
    align-items: center;
    display: inline-flex;
    justify-content: space-between;
    position: relative;
}

.freeze .navigation__container.mobile {
    z-index: 1000;
}

.freeze .navigation__container.mobile .search-trigger,
.freeze .navigation__container.mobile .logo {
    opacity: 0;
    pointer-events: none;
}

@media screen and (min-width: 768px) {
    .navigation__container.mobile {
        display: none;
    }
}

.navigation__container--mobile-default ul {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.navigation__container--mobile {
    height: 100%;
    opacity: 0;
    position: fixed;
    transform: translateX(100%);
    transition-duration: var(--transition-speed);
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out;
    width: 100%;
    z-index: 100;
}

.navigation__container--mobile.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.mobile .navigation__container--cta {
    box-shadow: calc(-1 * var(--spacing)) var(--spacing) var(--spacing) 0 var(--color-black-50);
}

.mobile .navigation__container--top {
    display: block;
    padding: 0;
}

.mobile .navigation__container--top li.has-children ul {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 calc(var(--pad) / 2);
    position: relative;
    right: auto;
    top: calc(100% + 0.375rem);
    transform: translateY(0);
    width: 100%;
}

.mobile .navigation__container--top li.has-children ul.active {
    height: 200px;
    opacity: 1;
    pointer-events: all;
    top: 0;
    transform: translateY(0);
}

.mobile .child-trigger {
    position: absolute;
    right: calc(var(--pad) / 2);
    top: calc(var(--pad) / 2);
}

.mobile .navigation__container--top ul {
    align-items: flex-start;
    flex-flow: column nowrap;
    gap: 0;
}

.mobile .navigation__container--top ul li {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    justify-content: space-between;
    padding: calc(var(--spacing) / 2);
    width: 100%;
}

.mobile .navigation__container--top li > ul li {
    font-weight: 400;
    padding: calc(var(--spacing) / 4);
    transition-duration: var(--transition-speed);
    transition-property: opacity, height, transform;
    transition-timing-function: ease-in-out;
}

.mobile .navigation__container--top li > ul li:first-child {
    margin-top: var(--spacing);
}

.mobile .navigation__container--top li > ul li:last-child {
    margin-bottom: calc(var(--spacing) / 2);
}

/* ------------------------------- */
/* Hero Main Navigation */
/* ------------------------------- */
.navigation__container--main {
    flex: 1 1 100%;
    font-size: 1.125rem;
    order: 2;
}

.navigation__container--main ul {
    align-items: center;
    display: flex;
    font-weight: 700;
    gap: 1.875rem;
    justify-content: flex-start;
}

@media screen and (min-width: 1200px) {
    .navigation__container--main ul {
        justify-content: center;
    }

    .navigation__container--main {
        order: 0;
        flex: 0 0 auto;
    }
}

/* ------------------------------- */
/* Mobile */
/* ------------------------------- */
.navigation__container--mobile .navigation__container--main {
    padding: 0;
    padding-top: var(--spacing);
}

.navigation__container--mobile .navigation__container--main ul {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
}

.navigation__container--mobile .navigation__container--main ul li {
    border-bottom: 1px solid var(--color-outline);
    padding: var(--pad);
    width: 100%;
}

.navigation__container--mobile .navigation__container--cta {
    display: flex;
    gap: 0;
}

.navigation__container--mobile .navigation__container--cta a {
    text-align: center;
    width: 100%;
}

/* ------------------------------- */
/* Buttons */
/* ------------------------------- */
.button,
button {
    appearance: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: none;
    transition-duration: var(--transition-speed);
    transition-property: color, background-color, border;
    transition-timing-function: ease-in-out;
    white-space: nowrap;
}

.button {
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-button-outline);
    color: var(--color-button-copy);
    font-size: var(--spacing);
    font-weight: 800;
    letter-spacing: 0.03125rem;
    line-height: 1;
    padding: var(--pad-button);
    text-transform: uppercase;
}

.mobile .button {
    padding: 18px;
}

.button:hover,
.button:focus {
    background-color: var(--color-button-bg-hover);
    border-color: var(--color-button-outline-hover);
    color: var(--color-button-copy-hover);
    text-decoration: none;
}

.search-trigger {
    background-color: var(--color-white);
    border: none;
    height:  1.0625rem;
    mask-size: 1.0625rem 1.0625rem;
    mask:  url('../../assets/search.svg') no-repeat 50% 50%;
    width: 1.0625rem;
    text-indent: -9999em;
}

.mobile .search-trigger {
    height: var(--spacing);
    mask-size: var(--spacing) var(--spacing);
    width: var(--spacing);
}

.search-trigger:hover,
.search-trigger:focus {
    background-color: var(--color-accent);
}

/* ------------------------------- */
/* Search */
/* ------------------------------- */
.search__form-container {
    background-color: var(--color-white);
    left: 0;
    opacity: 0;
    padding: calc(var(--pad) / 2 );
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    transition-duration: var(--transition-speed);
    transition-property: opacity, transform;
    transition-timing-function: ease;
    width: 100%;
    z-index: 999;
}

.search__form-container.active {
    opacity: 1;
    pointer-events: all;
    top: 0;
    transform: translateY(0);
}

.search__form-container form {
    border: 1px solid var(--color-outline);
    margin: var(--pad) auto;
    transition-duration: var(--transition-speed);
    transition-property: border;
    transition-timing-function: ease-in-out;
    width: 80%;
}

.search__form-container form:focus-within {
    border: 1px solid var(--color-accent-alt-4);
}

.search-input-container {
    align-items: center;
    display: flex;
    width: 100%;
}

.search-input-container input[type="text"],
.search-input-container input[type="submit"] {
    appearance: none;
    background-color: transparent;
    border: 0;
    outline: none;
    transition-duration: var(--transition-speed);
    transition-property: background-color;
    transition-timing-function: ease-in-out;
}

.search-input-container input[type="text"] {
    color: var(--color-gray-80);
    font-size: 1.375rem;
    font-weight: 700;
    padding: calc(var(--pad) / 2 );
    width: 100%;
}

.search-input-container input[type="submit"] {
    appearance: none;
    background-color: var(--color-black);
    border: 0;
    height: var(--pad);
    mask-size: 1.46875rem 1.46875rem;
    mask:  url('../../assets/search.svg') no-repeat 50% 50%;
    text-indent: -9999em;
    width: calc(var(--pad) + (var(--pad) / 2));
}

.search-input-container input[type="submit"]:hover,
.search-input-container input[type="submit"]:focus {
    background-color: var(--color-accent);
}

.search__close-trigger {
    position: absolute;
    right: calc(var(--pad) / 2 );
    top: calc(var(--pad) / 2 );
}

@media screen and (min-width: 768px) {
    .search__form-container form {
        width: 51.3%;
    }
}


/* ------------------------------- */
/* Burger and Fries */
/* ------------------------------- */
.burg {
    background-color: transparent;
    border: none;
    height: 18px;
    margin-bottom: 2px;
    text-indent: -9999em;
    width: 25px;
}

.burg.dark::after,
.burg.dark::before {
    border-bottom: 2px solid var(--color-black);
}

.burg.dark i {
    background-color: var(--color-black);
}

.burg::after,
.burg::before {
    border-bottom: 2px solid var(--color-white);
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: center;
    transition: all var(--transition-speed) ease-in-out;
    width: 100%;
}

.burg::after {
    top: 100%;
}

.burg i {
    background-color: var(--color-white);
    display: block;
    height: 2px;
    overflow: hidden;
    position: absolute;
    text-indent: 100%;
    top: 50%;
    transition: all var(--transition-speed) ease-in-out;
    white-space: nowrap;
    width: 100%;
}

.burg.fries::after {
    top: 50%;
    transform: rotate(-45deg);
}

.burg.fries::before {
    top: 50%;
    transform: rotate(45deg);
}

.burg.fries i {
    opacity: 0;
}

/* ------------------------------- */
/* Footer */
/* ------------------------------- */
.footer {
    text-align: center;
}

.footer-navigation__container--top {
    font-size: 1.125rem;
    margin-top: 4.875rem;
}

.footer-navigation-bottom ul,
.footer-navigation__container--top ul {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    gap: calc(var(--pad) / 2);
}

.footer-navigation__container--top ul li a:not(.button):not(.social) {
    text-decoration: underline;
}

.footer-navigation__container--top ul li a:not(.button):not(.social):hover {
    text-decoration: none;
}

.footer-navigation__container--top .button {
    margin-bottom: calc(var(--pad) / 2);
    display: inline-block;
}

.footer-navigation-bottom {
    border-top: 1px solid var(--color-outline);
    font-size: 1rem;
}

.copyright {
    margin-top: var(--pad);
}

.copyright p:not(:last-child) {
    margin-bottom: calc(var(--pad) / 2);
}

@media screen and (min-width: 768px) {
    .footer {
        text-align: left;
    }

    .footer-navigation__container--top {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    .footer-navigation-bottom {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    .footer-navigation-bottom ul,
    .footer-navigation__container--top ul {
        flex-flow: row nowrap;
    }

    .footer-navigation__container--top .button {
        margin-right: calc(var(--pad) / 2);
        margin-bottom: 0;
    }

    .copyright {
        margin-top: 0;
    }

    .copyright p {
        display: inline;
    }
}

/* ------------------------------- */
/* Social */
/* ------------------------------- */
ul.social-nav {
    flex-flow: row wrap;
    gap: 0;
    justify-content: center;
    margin-top: var(--pad);
}

.social {
    background-color: var(--color-white);
    height: var(--pad-static);
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    text-indent: -9999em;
    transition-duration: var(--transition-speed);
    transition-property: opacity;
    transition-timing-function: ease-in-out;
    width: var(--pad-static);
}

.social:hover,
.social:focus {
    background-color: var(--color-white);
    opacity: 0.6;
}

/* ------------------------------- */
/* Icons */
/* ------------------------------- */
.social.x {
    mask-image: url('../../assets/social/x.svg');
    mask-size: 1.25rem 1.25rem;
}

.social.facebook {
    mask-image: url('../../assets/social/facebook.svg');
    mask-size: 1rem 1.25rem;
}

.social.linkedin {
    mask-image: url('../../assets/social/linkedin.svg');
    mask-size: 1.25rem 1.5rem;
}

.social.instagram {
    mask-image: url('../../assets/social/instagram.svg');
    mask-size: 1.4rem 1.4rem;
}

.social.youtube {
    mask-image: url('../../assets/social/youtube.svg');
}

.social.medium {
    mask-image: url('../../assets/social/medium.svg');
}

.arrow {
    background-color: currentColor;
    display: inline-block;
    height: 2rem;
    margin-bottom: -5px;
    margin-right: var(--spacing);
    mask-image: url('../../assets/arrow.svg');
    mask-size: 2rem 2rem;
    width: 2rem;
}

@media screen and (min-width: 768px) {
    ul.social-nav {
        margin-top: 0;
    }

    .arrow {
        height: 3rem;
        width: 3rem;
        mask-size: 3rem 3rem;
    }
}

/* ------------------------------- */
/* Tickers */
/* ------------------------------- */
.ticker__container {
    background-color: var(--color-orange);
}

.ticker__container .ticker {
    box-sizing: content-box;
    display: inline-block;
    font-size: clamp(2.75rem, 2.629vw + 2.134rem, 4.5rem);
    font-weight: 800;
    line-height: 0.85;
    padding: calc(var(--spacing) / 1.25) var(--spacing) var(--spacing);
    position: relative;
    text-transform: lowercase;
    white-space: nowrap;
}

.ticker__container .ticker * {
    position: relative;
}

.ticker__container .ticker a:hover {
    background-color: transparent;
    color: currentColor;
}

@media screen and (min-width: 768px) {
    .ticker__container .ticker {
        padding: calc(var(--spacing) / 1.75) var(--spacing) var(--spacing);
    }
}

/* ------------------------------- */
/* Post */
/* ------------------------------- */
.post {}

.post__image {
    overflow: hidden;
    width: 100%;
}

.post__image a {
    background-color: var(--color-bg);
    display: block;
}

.post__image img {
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;
    transition-duration: var(--transition-speed);
    transition-property: transform, opacity;
    transition-timing-function: ease-in-out;
    width: 100%;
}


.post__heading {
    margin: 0;
}

/* ------------------------------- */
/* Layouts */
/* ------------------------------- */
.layout__feature {g
    display: flex;
    flex-direction: column;
    gap: var(--pad-static);
}

@media screen and (min-width: 768px) {
    .layout__feature {
        display: grid;
        gap: var(--pad-static);
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: max-content;
        grid-template-areas:
            'featured featured featured'
            '. . .';
    }
}

/* ------------------------------- */
/* Small Posts */
/* ------------------------------- */
.post__small {
    padding-top: var(--pad-static);
    position: relative;
}

.post__small::before {
    background-color: var(--color-dark-purple);
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
}

.post__small date {
    margin-left: calc(var(--spacing) / 2);
}

.post__small .post__heading {
    margin-top: var(--spacing);
    line-height: 1.20;
}

@media screen and (min-width: 768px) {
    .post__small {
        margin-top: calc(var(--spacing) / 2);
    }
}

/* ------------------------------- */
/* Large Posts */
/* ------------------------------- */
.post__large {
    display: block;
    margin-bottom: var(--pad-static);
    text-align: center;
}

.post__large .post__heading {
    text-align: center;
}

.post__large .post__image {
    height: 37vw;
}

.post__large .post__excerpt {
    margin-bottom: calc(var(--spacing) / 2);
    margin-top: var(--spacing);
    max-width: 100%;
}

@media screen and (min-width: 768px) {
    .post__large {
        align-items: center;
        display: flex;
        flex-direction: column;
        grid-area: featured;
        margin-bottom: 0;
    }

    .post__large .post__excerpt {
        margin-top: 0;
        max-width: 33.75rem;
    }
}