/* ==========================================================
   SERGIO
   File: navigation.css
   Version: 1.4
   Purpose: Navigation, Announcement Bar and Navigation Panels
========================================================== */


/* ==========================================================
   NAVIGATION VARIABLES
========================================================== */

.hero {
    --nav-height: 3.25rem;
    --nav-height-tablet: 3.5rem;
    --nav-height-desktop: 3.75rem;

    --announcement-height: 2.5rem;
    --announcement-exit-duration: 1120ms;
    --announcement-exit-ease: cubic-bezier(.23, 1, .32, 1);

    --nav-padding-inline: 1.5rem;
    --nav-padding-inline-tablet: 2rem;
    --nav-padding-inline-desktop: 3rem;

    --announcement-padding-inline: 1.9rem;
    --announcement-padding-inline-tablet: 2.4rem;
    --announcement-padding-inline-desktop: 3.5rem;

    --nav-logo-width: 4rem;
    --nav-logo-width-tablet: 4.7rem;
    --nav-logo-width-desktop: 4.7rem;
}


/* ==========================================================
   PRIMARY NAVIGATION
========================================================== */

.site-nav {
    position: fixed;
    inset-inline: 0;
    top: 0;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    height: var(--nav-height);
    padding-inline: var(--nav-padding-inline);

    color: #ffffff;
    background: transparent;

    opacity: 0;
    pointer-events: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    z-index: 30;

    transition:
        opacity var(--hero-transition-duration)
        var(--hero-transition-ease)
        var(--nav-transition-delay),

        background-color var(--hero-transition-duration)
        var(--hero-transition-ease)
        var(--nav-transition-delay),

        backdrop-filter var(--hero-transition-duration)
        var(--hero-transition-ease)
        var(--nav-transition-delay),

        color var(--hero-transition-duration)
        var(--hero-transition-ease)
        var(--nav-transition-delay);
}


/* ==========================================================
   NAVIGATION COLUMNS
========================================================== */

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
}

.nav-left {
    justify-self: start;
}

.nav-right {
    justify-self: end;
    gap: 1.5rem;
}


/* ==========================================================
   LOGO
========================================================== */

.nav-logo {
    justify-self: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity var(--hero-transition-duration)
        var(--hero-transition-ease)
        var(--nav-logo-transition-delay);
}

.nav-logo-image {
    display: block;
    width: var(--nav-logo-width);
    height: auto;
}


/* ==========================================================
   NAVIGATION BUTTONS
========================================================== */

.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .3rem;

    padding: 0;
    border-radius: 0;

    color: inherit;
}

.nav-button:hover {
    opacity: .6;
}

.nav-button:focus-visible,
.nav-logo:focus-visible,
.nav-links a:focus-visible,
.nav-primary-link:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: .35rem;
}

.nav-menu-text {
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.icon {
    display: block;

    width: 1.125rem;
    height: auto;

    flex-shrink: 0;
}

/* ==========================================================
   DESKTOP LINKS
========================================================== */

.nav-links {
    display: none;

    align-items: center;
    gap: 2rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav-links a,
.nav-primary-link {
    padding: 0;

    color: inherit;
    background: transparent;

    font: inherit;
    font-size: .75rem;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;

    transition: opacity .25s ease;
}

.nav-links a:hover,
.nav-primary-link:hover {
    opacity: .6;
}

.nav-primary-link.is-active {
    opacity: .52;
}


/* ==========================================================
   DESKTOP + TABLET EDITORIAL MEGA-PANELS
========================================================== */

.nav-secondary-panel {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    left: 0;

    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;

    color: #111111;
    background: #ffffff;

    border-top: 1px solid rgba(17, 17, 17, .08);
    border-bottom: 1px solid rgba(17, 17, 17, .12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-.45rem);

    z-index: 28;

    transition:
        opacity 260ms ease,
        visibility 260ms ease,
        transform 320ms cubic-bezier(.23, 1, .32, 1);
}

.nav-secondary-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-megapanel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(24rem, 1.1fr);
    gap: clamp(3rem, 6vw, 7rem);

    width: 100%;
    min-height: 29rem;
    padding: clamp(2.75rem, 5vw, 5.25rem) 2rem;
}

.nav-megapanel__content {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(12rem, .8fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);

    align-content: start;
}

.nav-megapanel__intro {
    align-self: start;
}

.nav-megapanel__eyebrow {
    margin: 0 0 1.25rem;

    color: rgba(17, 17, 17, .48);

    font-size: .61rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.nav-megapanel__title {
    display: inline-block;

    margin-bottom: 1.4rem;

    color: inherit;

    font-family: var(--font-family-secondary);
    font-size: clamp(3.15rem, 5.5vw, 6.4rem);
    font-weight: var(--font-weight-light);
    line-height: .92;
    letter-spacing: -.045em;
    text-decoration: none;
}

.nav-megapanel__description {
    max-width: 31rem;
    margin: 0;

    color: rgba(17, 17, 17, .78);

    font-size: clamp(.92rem, 1.25vw, 1.08rem);
    line-height: 1.62;
}

.nav-megapanel__text-link {
    display: inline-flex;
    align-items: center;
    gap: 1.8rem;

    margin-top: 2rem;
    padding-bottom: .45rem;

    color: inherit;

    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(17, 17, 17, .24);
}

.nav-megapanel__text-link span:last-child {
    transition: transform 320ms cubic-bezier(.23, 1, .32, 1);
}

.nav-megapanel__text-link:hover span:last-child {
    transform: translateX(.3rem);
}

.nav-megapanel__links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;

    align-content: start;
    padding-top: .1rem;
}

.nav-megapanel__link-group {
    display: grid;
    align-content: start;
    gap: .73rem;
}

.nav-megapanel__link-group .nav-megapanel__eyebrow {
    margin-bottom: .35rem;
}

.nav-megapanel__link-group a {
    width: fit-content;

    color: inherit;

    font-size: .72rem;
    line-height: 1.45;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.nav-megapanel__note {
    margin-top: -.35rem;

    color: rgba(17, 17, 17, .48);

    font-size: .68rem;
    line-height: 1.5;
    letter-spacing: .04em;
}

.nav-megapanel__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, .42fr);
    gap: 1rem;

    min-width: 0;
}

.nav-megapanel__media--collections {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .55fr);
}

.nav-megapanel__feature {
    position: relative;

    display: block;
    min-width: 0;
    min-height: 21rem;

    overflow: hidden;

    background: #eceae6;
}

.nav-megapanel__feature--small {
    align-self: end;
    min-height: 15rem;
    height: 72%;
}

.nav-megapanel__feature img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 900ms cubic-bezier(.23, 1, .32, 1);
}

.nav-megapanel__feature--yemanja {
    min-height: 0;
    height: auto;
    aspect-ratio: 2 / 3;
}

.nav-megapanel__feature--yemanja img {
    object-position: center;
}

.nav-megapanel__feature:hover img {
    transform: scale(1.025);
}

.nav-megapanel__media-caption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;

    display: flex;
    align-items: center;

    color: #ffffff;

    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;

    text-shadow: 0 1px 12px rgba(0, 0, 0, .28);
}

.nav-megapanel a:hover {
    opacity: .58;
}

.nav-megapanel__feature:hover {
    opacity: 1;
}

.nav-megapanel a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: .3rem;
}


/* ==========================================================
   ANNOUNCEMENT BAR
========================================================== */

.site-announcement {
    position: fixed;

    top: var(--nav-height);
    inset-inline: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: var(--announcement-height);
    padding-inline: var(--announcement-padding-inline);

    color: #111111;
    background: rgba(255, 255, 255, .75);

    border-top: 1px solid rgba(17, 17, 17, .08);

    opacity: 0;
    transform: translateY(0);

    pointer-events: none;

    z-index: 29;

    transition:
        opacity var(--hero-transition-duration)
        var(--hero-transition-ease)
        var(--nav-transition-delay),

        transform var(--hero-transition-duration)
        var(--hero-transition-ease)
        var(--nav-transition-delay);
}

.announcement-text,
.announcement-link {
    color: inherit;

    font-size: .75rem;
    letter-spacing: .06em;
    text-decoration: none;

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 520ms var(--announcement-exit-ease),
        transform 520ms var(--announcement-exit-ease);
}

.announcement-text {
    margin: 0;
}

.announcement-text-large,
.announcement-link-large {
    display: none;
}

.announcement-text-mobile,
.announcement-link-mobile {
    display: inline;
}


/* ==========================================================
   HOMEPAGE SCENE STATE
========================================================== */

body.scene-nav .site-nav {
    color: #111111;
    background: rgba(255, 255, 255, .75);

    opacity: 1;
    pointer-events: auto;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.scene-nav .site-announcement {
    opacity: 1;
    pointer-events: auto;
}

body.scene-nav:has(.nav-secondary-panel.is-open) .site-announcement {
    opacity: 0;
    pointer-events: none;
}

body.scene-nav .nav-logo {
    opacity: 1;
    pointer-events: auto;
}


/* ==========================================================
   ANNOUNCEMENT EXIT
========================================================== */

body.scene-nav.announcement-hidden .announcement-text,
body.scene-nav.announcement-hidden .announcement-link {
    opacity: 0;
    transform: translateY(-.25rem);

    transition:
        opacity 720ms var(--announcement-exit-ease),
        transform 720ms var(--announcement-exit-ease);
}

body.scene-nav.announcement-hidden .site-announcement {
    opacity: 0;
    transform: translateY(-.55rem);

    pointer-events: none;

    transition:
        opacity var(--announcement-exit-duration)
        var(--announcement-exit-ease)
        180ms,

        transform var(--announcement-exit-duration)
        var(--announcement-exit-ease)
        180ms;
}

/* ==========================================================
   NAVIGATION PANEL GLOBAL STATE
========================================================== */

body.nav-panel-open {
    overflow: hidden;
}

.nav-panel {
    position: fixed;
    inset: 0;

    color: #111111;
    background: #ffffff;

    opacity: 0;
    visibility: hidden;

    z-index: 1000;

    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

.nav-panel.is-open {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================
   PANEL HEADER
========================================================== */

.nav-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 3.25rem;
    padding-inline: 1.5rem;

    border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.nav-panel__label {
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nav-panel__close {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.125rem;
    height: 1.125rem;
    padding: 0;

    border-radius: 0;

    color: inherit;
}

.nav-panel__close::before,
.nav-panel__close::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 1.1rem;
    height: 1px;

    background: currentColor;
}

.nav-panel__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-panel__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-panel__close:hover {
    opacity: .6;
}

.nav-panel__close:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: .35rem;
}

/* ==========================================================
   MOBILE NAVIGATION PANEL
========================================================== */

.nav-panel--mobile {
    min-height: 100dvh;
}

.nav-panel__menu-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;

    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mobile-navigation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: calc(100dvh - 3.25rem);
    padding: 1.65rem 0 0;
}

.mobile-navigation__links,
.mobile-navigation__utility {
    margin: 0;
    padding: 0;

    list-style: none;
}

.mobile-navigation__links {
    display: grid;
    align-content: start;

    padding-inline: 1.5rem;
}

.mobile-navigation__item {
    border-bottom: 1px solid rgba(17, 17, 17, .1);
}

.mobile-navigation__accordion {
    width: 100%;
}

.mobile-navigation__summary,
.mobile-navigation__direct-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 4.15rem;

    color: inherit;

    font-size: clamp(2.15rem, 9vw, 3.65rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.04em;
    text-decoration: none;
}

.mobile-navigation__summary {
    cursor: pointer;
    list-style: none;
}

.mobile-navigation__summary::-webkit-details-marker {
    display: none;
}

.mobile-navigation__toggle {
    position: relative;

    width: 1rem;
    height: 1rem;

    flex: 0 0 auto;
    margin-left: 1rem;
}

.mobile-navigation__toggle::before,
.mobile-navigation__toggle::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: .9rem;
    height: 1px;

    background: currentColor;

    transition: transform 260ms cubic-bezier(.23, 1, .32, 1);
}

.mobile-navigation__toggle::before {
    transform: translate(-50%, -50%);
}

.mobile-navigation__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.mobile-navigation__accordion[open]
.mobile-navigation__toggle::after {
    transform: translate(-50%, -50%) rotate(0);
}

.mobile-navigation__submenu {
    display: grid;
    gap: 1.75rem;

    padding: .25rem 0 2rem;
}

.mobile-navigation__group {
    display: grid;
    gap: .68rem;
}

.mobile-navigation__eyebrow {
    margin: 0 0 .2rem;

    color: rgba(17, 17, 17, .48);

    font-size: .61rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mobile-navigation__submenu a {
    width: fit-content;

    color: inherit;

    font-size: .82rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .055em;
    text-decoration: none;
    text-transform: uppercase;
}

.mobile-navigation__utility {
    display: grid;
    gap: 0;

    width: 100%;
    padding: 0;
}

.mobile-navigation__utility a {
    display: flex;
    align-items: center;

    min-height: 3.75rem;
    padding-inline: 1.5rem;

    color: inherit;

    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;

    border-top: 1px solid rgba(28, 28, 28, .12);
}

.mobile-navigation__utility li:last-child a {
    border-bottom: 1px solid rgba(28, 28, 28, .12);
}

.mobile-navigation__summary:hover,
.mobile-navigation__direct-link:hover,
.mobile-navigation__submenu a:hover,
.mobile-navigation__utility a:hover {
    opacity: .6;
}

.mobile-navigation__summary:focus-visible,
.mobile-navigation__direct-link:focus-visible,
.mobile-navigation__submenu a:focus-visible,
.mobile-navigation__utility a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: .25rem;
}

/* ==========================================================
   SEARCH PANEL
========================================================== */

.nav-panel--search {
    inset: 0 0 auto;

    min-height: auto;

    border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.site-search-form {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;

    min-height: 3.5rem;
    margin: 1.25rem 1.5rem 1.5rem;
    padding: 0 1rem;

    background: #f2f1ee;
}

.site-search-form__input {
    width: 100%;
    min-width: 0;

    padding: 0;

    border-radius: 0;

    color: inherit;

    font-size: 1rem;

    appearance: none;
    -webkit-appearance: none;
}

.site-search-form__input::-webkit-search-decoration,
.site-search-form__input::-webkit-search-cancel-button,
.site-search-form__input::-webkit-search-results-button,
.site-search-form__input::-webkit-search-results-decoration {
    display: none;
}

.site-search-form__input:focus {
    outline: none;
}

.site-search-form__submit {
    padding: 0;

    border-radius: 0;

    color: inherit;

    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.site-search-form__submit:hover {
    opacity: .6;
}

.site-search-form__submit:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: .35rem;
}

/* ==========================================================
   LANGUAGE AND CONTACT PANEL
========================================================== */

.nav-panel--language {
    inset: 0 0 auto;

    min-height: auto;

    border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.language-menu__links {
    display: grid;

    margin: 0;
    padding: .75rem 1.5rem 1.5rem;

    list-style: none;
}

.language-menu__links a {
    display: flex;
    align-items: center;

    min-height: 3rem;

    color: inherit;

    font-size: .78rem;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(17, 17, 17, .1);
}

.language-menu__links li:last-child a {
    border-bottom: 0;
}

.language-menu__links a:hover {
    opacity: .6;
}

.language-menu__links a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -.1rem;
}

.language-menu__links a[aria-current="page"]::after {
    content: "Current";

    margin-left: auto;

    font-size: .65rem;
    letter-spacing: .08em;

    opacity: .5;
}


/* ==========================================================
   SURFACE NAVIGATION

   Used on product, collection and information pages.
   Unlike the homepage navigation, this version occupies
   its own surface and is immediately visible.
========================================================== */

.page-header {
    --nav-height: 3.25rem;
    --nav-padding-inline: 1.5rem;
    --nav-logo-width: 4rem;

    position: sticky;
    top: 0;

    width: 100%;

    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(17, 17, 17, .08);

    z-index: var(--z-navigation);
}


/* ==========================================================
   SURFACE NAV STATE
========================================================== */

.site-nav--surface {
    position: relative;

    inset: auto;
    top: auto;

    height: var(--nav-height);
    padding-inline: var(--nav-padding-inline);

    color: #111111;
    background: transparent;

    opacity: 1;
    pointer-events: auto;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition: none;
}

.site-nav--surface .nav-logo {
    opacity: 1;
    pointer-events: auto;

    transition: none;
}


/* ==========================================================
   SURFACE INTERACTION
========================================================== */

.site-nav--surface .nav-button,
.site-nav--surface .nav-links a,
.site-nav--surface .nav-primary-link {
    color: #111111;
}


/* ==========================================================
   TABLET
========================================================== */

@media (min-width: 768px) {

    .hero {
        --nav-height: var(--nav-height-tablet);
        --nav-padding-inline: var(--nav-padding-inline-tablet);
        --announcement-padding-inline:
            var(--announcement-padding-inline-tablet);
        --nav-logo-width: var(--nav-logo-width-tablet);
    }

    .page-header {
        --nav-height: 3.5rem;
        --nav-padding-inline: 2rem;
        --nav-logo-width: 4.7rem;
    }

    .nav-menu {
        display: none;
    }

    .nav-links {
        display: flex;
        gap: 1.5rem;
    }

    .nav-panel--mobile {
        display: none;
    }

    .announcement-text-mobile,
    .announcement-link-mobile {
        display: none;
    }

    .announcement-text-large,
    .announcement-link-large {
        display: inline;
    }

    .nav-panel__header {
        min-height: 3.5rem;
        padding-inline: 2rem;
    }

    .mobile-navigation {
    min-height: calc(100dvh - 3.5rem);
    padding: 3rem 0 0;
}

.mobile-navigation__links {
    padding-inline: 2rem;
}

.mobile-navigation__utility a {
    padding-inline: 2rem;
}

    .site-search-form {
        padding: 2rem;
    }

    .language-menu__links {
        padding: 1rem 2rem 2rem;
    }

}

/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1200px) {

    .hero {
        --nav-height: var(--nav-height-desktop);
        --nav-padding-inline: var(--nav-padding-inline-desktop);
        --announcement-padding-inline:
            var(--announcement-padding-inline-desktop);
        --nav-logo-width: var(--nav-logo-width-desktop);
    }

    .page-header {
        --nav-height: 3.75rem;
        --nav-padding-inline: 3rem;
        --nav-logo-width: 4.7rem;
    }

    .nav-links {
        gap: 2rem;
    }

    .nav-panel--search,
    .nav-panel--language {
        top: 4.5rem;
        right: 3rem;
        bottom: auto;
        left: auto;

        width: min(26rem, calc(100vw - 6rem));

        border: 1px solid rgba(17, 17, 17, .12);
    }

    .nav-panel--search .nav-panel__header,
    .nav-panel--language .nav-panel__header {
        min-height: 3.5rem;
        padding-inline: 1.5rem;
    }

    .site-search-form {
        padding: 1.5rem;
    }

    .language-menu__links {
        padding: .75rem 1.5rem 1.5rem;
    }

}

/* ==========================================================
   SECONDARY NAVIGATION ON SURFACE PAGES
========================================================== */

.page-header + .nav-secondary-panel,
.page-header .nav-secondary-panel {
    top: var(--nav-height);
}

@media (max-width: 767px) {

    .nav-secondary-panel {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    .nav-secondary-panel,
    .mobile-navigation__toggle::before,
    .mobile-navigation__toggle::after {
        transition: none;
    }

}


/* ==========================================================
   MEGA-PANEL RESPONSIVE REFINEMENTS
========================================================== */

@media (min-width: 1200px) {

    .nav-megapanel {
        padding-inline: 3rem;
    }

}

@media (min-width: 768px) and (max-width: 1050px) {

    .nav-megapanel {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.75rem;

        min-height: auto;
    }

    .nav-megapanel__content {
        grid-template-columns: minmax(0, 1.2fr) minmax(12rem, .8fr);
    }

    .nav-megapanel__media {
        grid-template-columns: minmax(0, 1.5fr) minmax(11rem, .5fr);
    }

    .nav-megapanel__feature {
        min-height: 18rem;
    }

    .nav-megapanel__feature--small {
        min-height: 13rem;
    }

}

@media (prefers-reduced-motion: reduce) {

    .nav-megapanel__feature img,
    .nav-megapanel__text-link span:last-child {
        transition: none;
    }

}


/* ==========================================================
   CURIOSITIES MEGA-PANEL
========================================================== */

.nav-secondary-panel--curiosities .nav-megapanel__title {
    max-width: 9ch;
}

.nav-secondary-panel--curiosities .nav-megapanel__description {
    max-width: 28rem;
}



/* ==========================================================
   HOUSE LOGOTYPE HERO
========================================================== */

.nav-secondary-panel--house .nav-megapanel__intro {
    padding-top: clamp(.5rem, 1vw, 1.25rem);
}

.nav-megapanel__logo {
    display: inline-block;

    width: fit-content;
    max-width: 100%;
    margin: clamp(.65rem, 1.4vw, 1.35rem) 0 clamp(2rem, 3vw, 3.25rem);

    color: inherit;
    text-decoration: none;
}

.nav-megapanel__logo img {
    display: block;

    width: clamp(17rem, 27vw, 28rem);
    max-width: 100%;
    height: auto;
}

.nav-secondary-panel--house .nav-megapanel__description {
    max-width: 30rem;
}

.nav-secondary-panel--house .nav-megapanel__text-link {
    margin-top: clamp(2.2rem, 3vw, 3.5rem);
}

@media (min-width: 1200px) {

    .nav-secondary-panel--house .nav-megapanel__content {
        grid-template-columns: minmax(0, 1.35fr) minmax(12rem, .65fr);
    }

}

@media (min-width: 768px) and (max-width: 1050px) {

    .nav-megapanel__logo img {
        width: clamp(15rem, 38vw, 22rem);
    }

}


/* ==========================================================
   HOUSE PANEL REFINEMENT v2
========================================================== */

.nav-secondary-panel--house .nav-megapanel__intro{
    padding-top:2.5rem;
}

.nav-megapanel__logo{
    margin:0 0 3.5rem;
}

.nav-megapanel__logo img{
    width:clamp(15rem,23vw,24rem);
    height:auto;
}

.nav-secondary-panel--house .nav-megapanel__description{
    max-width:28rem;
    margin-top:0;
}

.nav-secondary-panel--house .nav-megapanel__text-link{
    margin-top:3rem;
}
/* Saved-object count shares the restrained utility rhythm. */
.nav-saved {
  position: relative;
  text-decoration: none;
}

.nav-saved__count {
  position: absolute;
  top: .15rem;
  right: .05rem;
  min-width: 1rem;
  padding: .05rem .2rem;
  border-radius: 1rem;
  background: #111111;
  color: #ffffff;
  font-size: .55rem;
  line-height: 1rem;
  text-align: center;
}

/* ==========================================================
   ANNOUNCEMENT PHRASE SEQUENCE
========================================================== */

.announcement-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.announcement-sequence {
    display: inline-flex;
    align-items: center;
    gap: .38em;
}

.announcement-sequence__phrase {
    display: inline-block;
    opacity: 0;
    transform: translateX(2rem);
    animation-duration: 11s;
    animation-timing-function: cubic-bezier(.22, .8, .3, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: calc(
        var(--hero-transition-duration) +
        var(--nav-transition-delay)
    );
    animation-play-state: paused;
    will-change: opacity, transform;
}

body.scene-nav .announcement-sequence__phrase {
    animation-play-state: running;
}

.announcement-sequence__phrase--one {
    animation-name: announcement-phrase-one;
}

.announcement-sequence__phrase--two {
    animation-name: announcement-phrase-two;
}

.announcement-sequence__phrase--three {
    animation-name: announcement-phrase-three;
}

@media (max-width: 767px) {
    .site-announcement {
        gap: .5rem;
    }

    .announcement-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@keyframes announcement-phrase-one {
    0%, 4% { opacity: 0; transform: translateX(2rem); }
    13%, 84% { opacity: 1; transform: translateX(0); }
    91%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes announcement-phrase-two {
    0%, 18% { opacity: 0; transform: translateX(2rem); }
    27%, 84% { opacity: 1; transform: translateX(0); }
    91%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes announcement-phrase-three {
    0%, 32% { opacity: 0; transform: translateX(2rem); }
    41%, 84% { opacity: 1; transform: translateX(0); }
    91%, 100% { opacity: 0; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .announcement-sequence__phrase {
        opacity: 1;
        transform: none;
        animation: none;
    }
}