@charset "utf-8";


/* typography */

h1 {
    font-family: "source-code-variable", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-variation-settings: "wght" 800;
}

.site-logo {
    font-family: source-code-variable, sans-serif;
    font-weight: 900;
}

.section-header-1 {
    width: min(80rem, 85%);
    margin-inline: auto;
}

.section-header-1-text {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.82;
    font-variation-settings: "wght" 700;
    text-transform: uppercase;
    letter-spacing: clamp(.1rem, .45vw, 1rem);
}

.section-header-2-text {
    margin: 0;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 0.82;
    font-variation-settings: "wght" 700;
    text-transform: uppercase;
    letter-spacing: clamp(.1rem, .45vw, 1rem);
}

.accent-font-1 {
    font-family: var(--font-accent-one);
}

.accent-font-2 {
    font-family: var(--font-accent-two);
    color: white;
}

.accent-font-3 {
    font-family: var(--font-accent-three);
    color: red;
}

.hero-accent-chinese {
    font-size: 1.5rem;
    outline: 0;
    -webkit-text-stroke: 0 currentColor;
    letter-spacing: -.2rem;
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
}


/* base styles */
p, h1, h2, h3 {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "source-code-variable", sans-serif;
    font-weight: 400;
    margin: 0;
}

section {
    margin: 0;
    scroll-margin-top: var(--header-height);
    scroll-margin-top: 0;

}

.section {
    min-height: 70vh;
}


.book-us-side-panel__text,
.upcoming-events__accent,
.our-story-header-accents-right,
.past-events__accent {
    font-size: clamp(0.9rem, 1.5vw, 1.25rem);
    -webkit-text-stroke: .25pt currentColor;
}


/* mobile nav styles */
    .mobile-site-header {
        display: none;
    }




/* hero section styles */

.hero {
    --hero-gutter: clamp(1.25rem, 3.25vw, 4rem);
    --hero-top: clamp(1.5rem, 4vh, 3.5rem);
    --ticker-height: clamp(3rem, 6vh, 5rem);

    position: relative;

    background: #2a6293;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
}

.hero__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 65%;
    z-index: 0;
}

.hero__background--mobile {
    display: none;
}

.shop-icon-container {
    height: 3rem;
    width: 2rem;
    position: absolute;
    right: .5rem;
    display: flex;
    padding: .5rem;
}

.hero-shop {
    display: flex;
}

.carton-icon  {
    color: #e6d6c8;
    transition: all .25s ease;
}

.carton-icon:hover  {
    color: #d6b293;
    transform: scale(1.1);
}

.item-indicator-container {
    background: white;
    color: black;
    text-decoration: none;
    height: 1rem;
    width: 1rem;
    position: absolute;
    right: .5rem;
    top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;;
}

.hero-top-lines {
    position: absolute;

    top: var(--hero-top);
    left: var(--hero-gutter);
    right: var(--hero-gutter);
}

.hero-top-line {
    display: grid;

    grid-template-columns:
        minmax(1rem, 1fr)
        min(60vw, 80rem)
        minmax(1rem, 1fr);

    align-items: end;
}


.hero-top-line__side {
    height: 3px;

    background: #e6d6c8;
}


.hero-top-line__center {
    display: block;

    width: calc(100% + 4px);
    height: 1.8rem;

    margin-inline: -2px;

    position: relative;
    z-index: 1;

    overflow: visible;

    color: #e6d6c8;
}

.second-top-line {
    grid-template-columns:
        minmax(1rem, 1fr)
        calc(min(60vw, 80rem) + 1.5rem)
        minmax(1rem, 1fr);

    transform: translateY(-1rem);
}

.hero-header {
    position: absolute;

    top: clamp(3.25rem, 10vh, 8rem);
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(70rem, 70vw);

    text-align: center;
    letter-spacing: .25rem;
}

.hero-title {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 5.5rem);
    line-height: 0.9;
}

.hero-nav {
    margin-top: clamp(0.75rem, 2vh, 1.5rem);
    text-transform: uppercase;
    letter-spacing: .05rem;
}


.hero-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: clamp(0.4rem, 2vw, 2rem);

    margin: 0;
    padding: 0;

    list-style: none;
}

.hero-nav__list li {
    border-right: 2px solid black;
    padding-right: clamp(0.4rem, 2vw, 2rem);
    font-variation-settings: "wght" 600;
    text-align: left;
    line-height: 1.1rem;
    transition: all .4s ease;
}

.hero-nav__list li:hover {
    color: #0a7ade;
}

.hero-nav__list > li:last-child {
    border-right: none;
    padding-right: 0;
}

.hero-nav a {
    color: inherit;
    text-decoration: none;
}

.hero-logo {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    color: white;
    transition: all .1s ease;
    cursor: pointer;
}

.hero-logo:hover {
    color: #0a7ade;
}

.hero-logo__image {
    display: block;
    width: clamp(3.5rem, 6vw, 7rem);
    height: auto;
}

.hero-accent {
    position: absolute;
}

.hero-accent p {
    margin: 0;
}

.hero-accent--primary {
    top: 10%;
    right: var(--hero-gutter);

    display: flex;
    flex-direction: column;

    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #e6d6c8;
    gap: clamp(0.25rem, 0.5vw, 0.55rem);
    font-size: clamp(1.25rem, 2vw, 2rem);
    line-height: clamp(1rem, 2vw, 1.75rem);
}

.large-overlay-text-container {
    position: absolute;
    right: calc(var(--hero-gutter) + clamp(5rem, 10vw, 9rem));
    top: 50%;
    /* top: calc(50% - 24dvh); */
    top: calc(50% - 24dvh);
    height: 60dvh;
    width: clamp(4rem, 10vw, 9rem);
}

.red-text-svg-container {
    height: 90%;
}

.red-text-svg-container > svg {
    display: block;
    height: 100%;
    width: 100%;
    color: #cc0631;
    mix-blend-mode: multiply;
}

.blend-test {
    width: 200px;
    height: 200px;

    background: #cc0631;

    mix-blend-mode: multiply;
}

.svg-corner-text-overlay {
    position: absolute;

    right: 0;
    bottom: 0;

    margin: 0;

    font-size: clamp(1.5rem, 7vw, 3rem);
    font-size: 3rem;
    color: #e6d6c8;
    font-family: var(--font-accent-one);
    letter-spacing: -.5rem;
    outline: 0;
    -webkit-text-stroke: .5pt currentColor;
    transform: translate(50%, -15%);
}


.hero-side-mark {
    position: absolute;

    left: var(--hero-gutter);
    top: 55%;

    width: 1.5rem;
    height: 1.5rem;

    transform: translateY(-50%);
    color: white;
}

.hero-side-mark span {
    position: absolute;

    top: 50%;
    left: 50%;

    background: currentColor;

    transform: translate(-50%, -50%);
}


.hero-side-mark span:first-child {
    width: 100%;
    height: 5px;
}


.hero-side-mark span:last-child {
    width: 3px;
    height: 100%;
}

.hero-bottom-lines {
    position: absolute;

    left: var(--hero-gutter);
    right: var(--hero-gutter);

    bottom: calc(var(--ticker-height) + 0.5rem);

    display: grid;
    gap: 0.4rem;
    color: #e6d6c8;
}


.hero-bottom-lines span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
}

.hero-bottom-lines span:last-of-type {
    height: 5px;
}

.hero-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ticker-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    color: white;
    font-family: var(--font-accent-two);
}


.hero-marquee__track {
    display: flex;
    flex-shrink: 0;
    width: max-content;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}


.hero-marquee__track p {
    flex-shrink: 0;
    margin: 0;
    padding-right: 3rem;
    font-size: clamp(1.25rem, 2vw, 2rem);
    padding: 0 5vw;
}

.ticker-txt-2 {
    font-family: var(--font-accent-one);
    -webkit-text-stroke: .5pt currentColor;
}









/* book us section styles */

#book-us {
    background: #e6d6c8;
}

.book-us {
    --book-us-gutter: clamp(1.25rem, 4vw, 5rem);

    position: relative;

    min-height: 150svh;

    padding:
        clamp(5rem, 10vh, 9rem)
        var(--book-us-gutter)
        clamp(6rem, 12vh, 10rem);
    color: #0d0806;
}

.book-us-side-panel {
    position: absolute;

    top: 2rem;
    left: var(--book-us-gutter);

    bottom: 18%;

    width: clamp(2.5rem, 4vw, 4rem);

    display: flex;
    flex-direction: column;
    align-items: center;
}

.book-us-side-panel .ui-plus {
    color: #9b8877;
    margin: 2rem 0;
}


.book-us-side-panel__text {
    margin: 0;

    writing-mode: vertical-rl;
    text-orientation: upright;

    color: #bfafa1;
}


.book-us-side-panel__line {
    width: 1px;
    flex: 1;
    margin-top: 1rem;
    background: currentColor;
}

/* .book-us-header {
    width: min(80rem, 85%);
    margin-inline: auto;
}

.book-us-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.82;
    font-variation-settings: "wght" 700;
    text-transform: uppercase;
    letter-spacing: clamp(.1rem, .45vw, 1rem);
} */

.book-us-red-accent {
    position: absolute;
    top: 6rem;
    right: 10%;
    padding: 0.35rem 0.1rem;
    border: 3px solid #d71920;
    color: #d71920;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-variation-settings: "wght" 900;
    letter-spacing: .25rem;
    font-weight: 900;
    font-size: 1.5em;
    font-size: clamp(.75em, 2vw, 1.5em);
}

.book-us-red-accent p {
    margin: 0;
}



.book-us-feature {
    position: relative;

    width: min(32rem, 48vw);

    margin:
        clamp(2rem, 5vh, 4rem)
        auto
        0;
}


.book-us-feature__image-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    border: 2px solid #000;

    overflow: hidden;
}


.book-us-feature__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* white corner overlays */

.book-us-feature__corner {
    position: absolute;
    width: 12%;
    aspect-ratio: 1 / 1;
    padding: .25rem;

    z-index: 2;
}

.book-us-feature__corner svg {
    display: block;

    width: 100%;
    height: 100%;
    color: white;
}

.book-us-feature__corner:first-of-type {
    transform: rotate(180deg);
}

.book-us-feature__corner--top-left {
    top: 0;
    left: 0;
}


.book-us-feature__corner--bottom-right {
    right: 0;
    bottom: 0;
}


/* vertical text to left of image */

.book-us-feature__accent-text {
    position: absolute;

    right: calc(100% + 1.5rem);
    top: 0;

    writing-mode: vertical-rl;
    text-orientation: upright;

    color: #ad9b8e;

    font-size: clamp(0.65rem, 0.75vw, 0.9rem);
}


.book-us-feature__accent-text p {
    margin: 0;
}


/* decorative red lines */

.book-us-feature__line {
    position: absolute;

    height: 1vw;

    border: 2px solid #d71920;
    border-right: none;
}


.book-us-feature__line--top {
    top: -1.25rem;
    left: -1rem;

    width: 28%;
    border-bottom: none;
}


.book-us-feature__line--bottom {
    bottom: .5vw;
    left: -1rem;

    width: 48%;

    border-top: none;
}

.book-us-feature__line--left {
    position: absolute;

    left: -1rem;
    top: 1%;

    height: 93%;
    width: 2px;

    background: black;
}


/* external small logo */

.book-us-feature__logo {
    position: absolute;

    left: -3.75rem;
    bottom: -1rem;

    width: clamp(2rem, 2vw, 2.5rem);
}


.book-us-feature__logo svg {
    display: block;

    width: 100%;
    height: auto;
}


/* bottom image caption */

.book-us-feature__caption {
    margin: 0.5rem 0 0;

    text-align: right;

    font-size: clamp(0.75rem, 1vw, 1rem);
    font-variation-settings: "wght" 600;
}


.book-us-cta-wrap {
    display: flex;
    justify-content: center;

    margin-top: clamp(4rem, 7vh, 6rem);
}


.book-us-cta {
    display: grid;

    grid-template-columns:
        auto
        minmax(10rem, 1fr)
        auto
        ;

    align-items: center;

    gap: 1rem;

    width: min(22rem, 80vw);

    padding-block: 0.6rem;

    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    color: inherit;

    text-decoration: none;
    transition: all .5s ease;
}

.book-us-cta:hover {
    background: #d71920;
}

.book-us-cta__text {
    text-align: center;
    font-family: var(--font-accent-two);
    font-size: clamp(1.5rem, 2vw, 1.8rem);
}

.cta-logo {
    width: clamp(.5rem, 4vw, 2em);
    height: clamp(1rem, 6vw, 3em);
}

.book-us-cta-wrap .ui-plus {
    color: #d71920;
}

.book-us-right-accent {
    position: absolute;
    right: 10%;
    top: 60%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: clamp(2rem, 4vw, 4rem);
    color: #000;
    -webkit-text-stroke: .5pt currentColor;
}

.book-us-right-accent p {
    margin: 0;
}





.book-us-gallery,
.past-events-gallery {
    width: min(65rem, 76vw);

    margin:
        clamp(8rem, 18vh, 14rem)
        auto
        0
        auto;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.book-us-gallery__item {
    margin: 0;
    min-width: 0;

    aspect-ratio: 4 / 5;
}

.book-us-gallery__item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border: 2px solid #000;
}

.hear-from-you {
    font-family: var(--font-accent-two);
    text-align: right;
    padding: .25rem 0 0 0;
    line-height: 1.1rem;
}










/* icon styles */

.icon {
    width: 1.5rem;
}

.ui-plus {
    position: relative;

    display: inline-block;

    width: 1.25rem;
    height: 1.25rem;

    flex-shrink: 0;
}


.ui-plus::before,
.ui-plus::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background: currentColor;

    transform: translate(-50%, -50%);
}


.ui-plus::before {
    width: 100%;
    height: 4px;
}


.ui-plus::after {
    width: 2px;
    height: 100%;
}






/* upcoming events section */

.upcoming-events,
.past-events,
.our-story,
.menu-section {
    --events-gutter: clamp(1.25rem, 3vw, 3.5rem);

    position: relative;

    padding:
        clamp(4rem, 8vh, 7rem)
        var(--events-gutter)
        clamp(4rem, 8vh, 7rem);

    background: #0d0806;
    color: #0d0806;

    overflow: hidden;
}

.upcoming-events__background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}

.upcoming-events__logo {
    position: absolute;

    top: clamp(1.5rem, 2vh, 3rem);
    left: 50%;

    transform: translateX(-50%);

    width: clamp(2rem, 2vw, 3rem);

    color: #fff;
}


.upcoming-events__logo svg {
    display: block;

    width: 100%;
    height: 4rem;
}

.upcoming-events__line,
.past-events-lines {
    position: absolute;

    left: calc(var(--events-gutter) * 0.7);
    right: calc(var(--events-gutter) * 0.7);

    height: 2px;

    background: #cf0221;
}


.upcoming-events__line--top {
    top: clamp(5rem, 12vh, 8rem);
}

.upcoming-events-header {

    position: relative;

    margin:
        clamp(5rem, 8vh, 8rem)
        auto
        0;

}

.upcoming-events-title {
   color: white;
}

.upcoming-events__accent,
.past-events__accent {
    position: absolute;

    right: calc(var(--events-gutter) * 0.7);

    writing-mode: vertical-rl;
    text-orientation: upright;

    color: #d71920;
}


.upcoming-events__accent p {
    margin: 0;
}

.upcoming-events__accent--top {
    top: clamp(10rem, 16vh, 16rem);
}

.upcoming-events__accent--bottom {
    bottom: clamp(5rem, 12vh, 7rem);
}

.upcoming-events__cards-window {
    width: min(80rem, 85%);

    margin: 0 auto;

    overflow: hidden;

    padding:
        clamp(2rem, 4vw, 3.5rem)
        clamp(1.5rem, 3vw, 3rem);
}

.upcoming-events__cards {
    display: grid;

    grid-template-columns: 1.15fr 1fr 1fr;

    gap: clamp(2rem, 6vw, 8rem);
    align-items: flex-end;

    width: 100%;


    --card-gap: clamp(2rem, 6vw, 8rem);
    display: flex;
    justify-content: center;
    align-items: center;

    gap: var(--card-gap);

    width: 100%;
}

.upcoming-events__cards > .event-card:first-child {
    flex-basis:
        calc(
            (
                (100% - (var(--card-gap) * 2))
                / 3.15
            )
            * 1.15
        );
}

.event-card {
    min-width: 0;
    color: #decab8;
    font-size: clamp(.5rem, 1.2vw, 1rem);
    flex:
        0
        0
        calc(
            (100% - (var(--card-gap) * 2))
            / 3.15
        );
}

.event-card__inner {
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 10px solid rgba(207, 2, 33, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    
}

.event-card__blend-layer {
    position: absolute;
    inset: 0;

    background: #cf0221;

    mix-blend-mode: multiply;

    z-index: 0;

    pointer-events: none;
}

/* .upcoming-events__cards > .event-card:first-child .event-card__inner {
    border: 10px solid rgba(207, 2, 33, 1);
} */

.card-details-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: clamp(.75rem, 1vw, 3rem);
    text-align: right;
    background: transparent;
}

.next-drop {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    opacity: 0;
    font-size: clamp(.75rem, 1vw, 3rem);
    line-height: clamp(.75rem, 1vw, 3rem);
    padding: .5vw 0 0 .55vw;
    z-index: 2;
}

.card-details-wrap {
    position: relative;

    width: 67%;
    height: 72%;
}

.card-details-blend-layer {
    position: absolute;
    inset: 0;

    background: #4b0f0f;

    mix-blend-mode: multiply;

    z-index: 0;

    pointer-events: none;
}

.upcoming-events__cards > .event-card:first-child .next-drop {
    opacity: 1;
}

.event-date {
    font-size: clamp(1.5rem, 2.25vw, 3rem);
    letter-spacing: -.2rem;
    font-variation-settings: "wght" 600;
    border-bottom: 2px solid #cf0221;
}

.event-time {
    font-size: clamp(.75rem, 1vw, 2rem);
}

.location-icon {
    width: 1em;
    height: 2em;
}

.location-name {
    font-size: 1.25em;
    text-transform: uppercase;
    font-variation-settings: "wght" 600;
    padding: 0 0 7.5% 0;
    line-height: 1em;
}


.upcoming-events__empty {
    position: relative;

    width: 60%;

    margin: 0 auto;

    box-sizing: border-box;

    padding: clamp(2rem, 4vw, 4rem);
    color: #decab8;
    font-size: clamp(.75rem, 1.25vw, 3rem);
}


.upcoming-events__empty-blend-layer {
    position: absolute;
    inset: 0;

    background: #cf0221;
    mix-blend-mode: multiply;

    z-index: 0;

    pointer-events: none;
}

.upcoming-events__empty-inner {
    position: relative;

    width: 100%;
    min-height: clamp(12rem, 25vw, 22rem);

    margin: 0 auto;
}

.upcoming-events__empty-inner-blend-layer {
    position: absolute;
    inset: 0;

    background: #4b0f0f;
    mix-blend-mode: multiply;

    z-index: 0;

    pointer-events: none;
}


.upcoming-events__empty-content {
    position: relative;
    z-index: 1;

    min-height: inherit;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;

    padding: clamp(1.5rem, 3vw, 3rem);

    text-align: center;
}

.upcoming-events__empty-title {
    text-transform: uppercase;
    font-variation-settings: "wght" 600;
}

.upcoming-events__empty-text {
    padding: 1em 0 0 0;
    font-size: .75em;
}







.upcoming-events__plus {
    position: absolute;
    color: #cf0221;
}

.upcoming-events__plus--left {
    left: calc(var(--events-gutter) * 0.4);
    top: 56%;
}

.upcoming-events__plus--right {
    right: calc(var(--events-gutter) * 0.4);
    top: 56%;
}

.upcoming-events__plus--top {
    top: clamp(7rem, 17vh, 10rem);
    left: 50%;

    transform: translateX(-50%);
}

.upcoming-events__plus--bottom {
    bottom: clamp(5rem, 12vh, 10rem);
    left: 50%;

    transform: translateX(-50%);
}

.upcoming-events__bottom-ui {
    position: relative;

    width: 100%;

    margin-top: 0;

    min-height: clamp(5rem, 15vh, 7rem);
}

.upcoming-events__line--bottom {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: #d71920;
}

.upcoming-events__plus--bottom {
    position: absolute;

    left: 50%;
    bottom: clamp(1rem, 2vh, 2rem);

    transform: translateX(-50%);
}

.upcoming-events__accent--bottom {
    position: absolute;

    right: 0;
    bottom: clamp(1rem, 2vh, 2rem);
}

.stay-updated-container {
    color: #dcc7b5;
    font-variation-settings: "wght" 600;
    background: #060d12;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 22vh;
    font-size: clamp(.9em, 2vw, 1.25rem);
}

.stay-updated-container svg {
    width: clamp(1em, 2vw, 3rem);
    height: clamp(1em, 2vw, 3rem);
    margin: .5em 0 0 1em;
}

.stay-updated-link,
.stay-updated-link:visited,
.stay-updated-link:hover,
.stay-updated-link:active {
    color: #dcc7b5;
    padding: 0 0 .075em 0;
    text-decoration: none;
    border-bottom: 2px solid #dcc7b5;
}

.stay-updated-icon-link,
.stay-updated-icon-link:visited,
.stay-updated-icon-link:active {
    color: #dcc7b5;
    text-decoration: none;
}

.stay-updated-link:hover {
    color: #0a7ade;
    border-bottom: 2px solid #0a7ade;
}


/* shop section styles */
.shop-section {
    background: #e6d6c8;
}






/* our story section styles */

.our-story {
    min-height: 150vh;
    color: white;
    position: relative;
    overflow: hidden;
}

.our-story__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 65%;
    z-index: 0;
}

.our-story-title {
    color: white;
}

.our-story-header-container {
    position: relative;
    z-index: 1;
    height: clamp(10rem, 45vh, 60rem);
}

.our-story-content-container[aria-hidden="true"] {
    pointer-events: none;
}

.our-story-header-accents-right,
.menu-section-accent-right {
    position: absolute;
    color: white;
    right: 0;
    top: 0;
    padding-right: 5vw;
    letter-spacing: -.15em;
    font-size: clamp(3rem, 4.5vw, 4.5rem)
}

.blend-mode-container {
    position: relative;
}

.our-story-content-container {
    background: #0c77e4;
    mix-blend-mode: multiply;
    width: 75%;
    margin: 0 auto;
    padding: 5%;
    position: relative;
    z-index: 1;
    color: transparent;
}

.our-story-text {
    background: rgba(13, 13, 28, 1);
    width: clamp(18rem, 45%, 25rem);
    font-size: clamp(.75rem, 1vw, 1rem);
    padding: 2em;
    text-indent: 6em;
}

.our-story-outer {
    mix-blend-mode: normal;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
}

.our-story-outer .our-story-text {
    background: transparent;
}










/* menu section styles */

.menu-section {
    min-height: 85svh;
}

.inner-content-container {
    width: 45%;
    max-width: 45rem;
}

.menu-title-container {
    position: relative;

    width: 100%;
    padding: 4.5em 0 1.25em 2.5em;

    box-sizing: border-box;
}

.menu-title-background {
    position: absolute;
    inset: 0;

    background: #0c77e4;

    mix-blend-mode: multiply;

    z-index: 0;
}

.menu-title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: white;
}

.menu-content-container {
    position: relative;
    width: 100%;
    margin-top: 0.5rem;
    padding: 2em;

    box-sizing: border-box;
}

.menu-content-transparent-background {
    position: absolute;
    inset: 0;
    background: #212131;
    mix-blend-mode: multiply;
    z-index: 0;
}

.menu-content-opaque-background {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 0 3em 2rem 3em;

    background: #d7d0cc;
    color: #111;
}

.menu-section-title {
    text-transform: uppercase;
    padding: 2rem 0 .5rem 0;
    font-size: 1.5rem;
    letter-spacing: .15rem;
    font-variation-settings: "wght" 900;
}

.special-item-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-variation-settings: "wght" 500;
    letter-spacing: .1rem;
    padding: 1.5rem 0 .25rem 0;
    font-size: 1.25rem;
}

.menu-section-title + .special-item-name {
    padding: .75rem 0 .25rem 0;
}

.special-item-price {
    color: #1a6daa;
    font-variation-settings: "wght" 600;
}

.special-item-description {
    padding: 0 0 .5rem 0;
    color: #1a6daa;
    font-variation-settings: "wght" 700;
    line-height: 1.25em;
}

.special-item-description  i {
    font-variation-settings: "wght" 600;
}

.menu-chinese-text {
    font-size: .75em;
    font-weight: 900;
    font-variation-settings: "wght" 900;
    padding: 0 0 0 1em;
}

.classics-item-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1a6daa;
    text-transform: capitalize;
    font-variation-settings: "wght" 600;
    font-size: 1.25rem;
}

.menu-section-logo {
    color: #0a7ade;
    position: absolute;
    left: 2rem;
    top: 2rem;
    height: 3.5rem;
    width: 2rem
}

.menu-section-accent-left {
    color: #0a7ade;
    position: absolute;
    left: 2rem;
    bottom: 1rem;
    font-size: 2rem;
    font-variation-settings: "wght" 900;
    -webkit-text-stroke: .5pt currentColor;
    letter-spacing: .15rem;
}

.menu-section-accent-right {
    position: absolute;
    top: auto;
    bottom: 2rem;
}















/* past events section styles */
.past-events {
    background: #eadbce;
}

.past-events-header-container,
.our-story-header-container {
    position: relative;
    color: #cf0221;
    font-size: clamp(1rem, 1.5vw, 2rem);
    font-variation-settings: "wght" 800;
}

.past-events-header-container p {
    -webkit-text-stroke: .5pt currentColor;
    letter-spacing: .2em;
    padding-bottom: .5em;
}

.past-events-title {
    color: black;
}

.past-header-subtext-L {
    width: min(80rem, 85%);
    margin: 0 auto;
}

.past-events-header-accents-right {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.past-events-header-logo {
    width: 1em;
    height: 2em;
}

.past-events__line--top {
    left: 0;
    right: 0;
}

.past-events-lines {
    background: black;
}

.past-events__accent {
    color: #96836e;
    right: 0;
}

.past-events__accent--top {
    margin-top: clamp(1rem, 2vh, 2rem);
    right: calc(var(--events-gutter));
}

.past-events-gallery {
    width: min(65rem, 76vw);
    padding: 3%;
    position: relative;
    margin-bottom: 10vh;
}












/* instagram ticker section styles */

.lower-ticker {
    position: relative;
}

.lower-ticker-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 5rem 0;
    color: #efc100;
}

.ticker-lines {
    width: 95%;
    height: auto;
}


.follow-us-ticker {
    width: 100%;
    overflow: hidden;
    font-size: 2.5rem;
    text-transform: uppercase;
    font-variation-settings: "wght" 800;
    padding: 4rem 0;
    color: white;
    box-sizing: border-box;
}

.follow-us-ticker__track {
    display: flex;

    width: max-content;

    animation: follow-us-marquee 35s linear infinite;

    will-change: transform;
}

.follow-us-ticker-link,
.follow-us-ticker-link:visited,
.follow-us-ticker-link:hover,
.follow-us-ticker-link:active {
    display: block;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    min-height: 5rem;
}

.follow-us-ticker__group {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    gap: clamp(1rem, 2vw, 2.5rem);

    padding-right: clamp(1rem, 2vw, 2.5rem);

    white-space: nowrap;
}

.follow-us-ticker__group * {
    margin: 0 5rem;
}

.follow-us-ticker__group p {
    margin: 0;
    flex-shrink: 0;
    text-shadow: .1rem .25rem 0.4rem rgba(0, 0, 0, 0.4);
}

.ticker-instagram-icon {
    display: block;

    width: clamp(1.5rem, 2vw, 2.25rem);
    height: auto;

    flex-shrink: 0;
    filter: drop-shadow(
        .1rem
        .25rem
        .25rem
        rgba(0, 0, 0, 0.4)
    );
}

@keyframes follow-us-marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

.ticker-lines:nth-child(3) {
    transform: rotate(180deg);
}

.ticker-fancy-corner {
    position: absolute;
    height: clamp(2.5rem, 4vw, 10rem);
    width: clamp(2.5rem, 4vw, 10rem);
}

.tfc-1 {
    transform: rotate(180deg);
    left: 3.75%;
    top: 22%;
}

.tfc-2 {
    transform: rotate(270deg);
    right: 3.75%;
    top: 22%;
}

.tfc-3 {
    right: 3.75%;
    bottom: 22%;
}

.tfc-4 {
    transform: rotate(90deg);
    left: 3.75%;
    bottom: 22%;
}







/* footer styles */
.site-footer {
    background: black;
    padding: 10rem 6rem 4rem 6rem;
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
}

.footer-contact {
    color: #decab8;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 5vw 2rem 5vw;
    width: clamp(8rem, 15vw, 25rem);
    position: relative;
    text-transform: uppercase;
    letter-spacing: .15rem;
}

.contact-label {
    text-align: center;
    font-size: 1.5rem;
    font-variation-settings: "wght" 800;
    padding: 0 0 1rem 0;
    margin: 0;
}

.contact-item-container {
    display: flex;
    align-items: center;
    margin: .75rem 0;
    cursor: pointer;
    transition: all .5s ease;
}

.contact-item-container.footer-link,
.contact-item-container.footer-link:visited,
.contact-item-container.footer-link:active  {
    color: #dcc7b5;
    text-decoration: none;
}

.contact-item-container.footer-link:hover {
    color: #0a7ade;
    fill: #0a7ade;
}

.footer-icon {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding-right: 1rem;
}

.contact-corner-one,
.past-events-corner-one {
    height: 2vw;
    width: 2vw;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 2px solid #decab8;
    border-left: 2px solid #decab8;
}

.contact-corner-two,
.past-events-corner-two {
    height: 2vw;
    width: 2vw;
    position: absolute;
    top: 0;
    right: 0;
    border-top: 2px solid #decab8;
    border-right: 2px solid #decab8;
}

.contact-corner-three,
.past-events-corner-three {
    height: 2vw;
    width: 2vw;
    position: absolute;
    bottom: 0;
    right: 0;
    border-right: 2px solid #decab8;
    border-bottom: 2px solid #decab8;
}

.contact-corner-four,
.past-events-corner-four {
    height: 2vw;
    width: 2vw;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #decab8;
    border-left: 2px solid #decab8;
}

.corner {
    border-color: #cf0221;
}


.footer-details {
    color: #decab8;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.footer-logo {
    height: clamp(2.5rem, 4vw, 5rem);
    margin: 0 0 0 auto;
    aspect-ratio: 2 / 3;
}

.footer-bhc {
    font-size: clamp(1.7rem, 2.5vw, 4rem);
    text-transform: uppercase;
    line-height: clamp(2rem, 3.5vw, 4rem);
    font-variation-settings: "wght" 900;
    letter-spacing: .1rem;
}

.footer-subtext {
    font-size: .75em;
}












@keyframes marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-33.333%);
    }

}

@media (min-width: 1250px) {

    .book-us-cta {
        width: min(25rem, 80vw);
    }
}


@media (max-width: 1300px) {
    .inner-content-container {
        width: 100%;
    }
}


@media (min-aspect-ratio: 16 / 9) { 
    .hero__background {
        object-position: 70% 0%;
    }
}

@media (max-width: 860px) {

    .hero__background--desktop {
        display: none;
    }

    .hero__background--mobile {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center bottom;
        transform: scale(1.2);
        transform-origin: center bottom;
    }


    .hero-logo {
        top: 42%;
    }

    .section-header-1 {
        width: min(80rem, 98%);
    }

    .past-header-subtext-L {
        width: min(80rem, 98%);
        margin: 0 auto;
    }
    
    .book-us-side-panel {
        top: 20vh;
        left: 0;
    }

    .book-us-feature {
        position: relative;

        width: min(32rem, 70vw);

        margin:
            clamp(2rem, 5vh, 4rem)
            auto
            0;
    }

    .book-us-feature__logo,
    .book-us-feature__line,
    .book-us-feature__line--left,
    .book-us-feature__accent-text {
        visibility: hidden;
    }

    .book-us-feature__caption {
        text-align: center;
    }

    .book-us-cta__text {
        font-size: clamp(1.25rem, 3.5vw, 4rem);
    }

    .card-details-wrap {
        position: relative;

        width: 80%;
    }

    .upcoming-events__empty  {
        width: 80%;
    }

    .lower-ticker {
        position: relative;
    }

    .lower-ticker-container {
        position: relative;
        z-index: 1;

        width: 100%;

        aspect-ratio: 6 / 3.5;

        padding: 0;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        color: #efc100;
    }

    .follow-us-ticker-link {
        width: 100%;
        min-height: 0;
    }

    .follow-us-ticker {
        padding: 0 0;
        font-size: 1.75rem;

        padding: 2.5rem 0;
        overflow: hidden;
    }

    .ticker-instagram-icon {
        height: 2rem;
    }

    .tfc-1, .tfc-2 {
        top: 20%;
    }

    .tfc-3, .tfc-4 {
        bottom: 20%;
    }

    .site-footer {
        padding: 2rem;
    }

    .site-footer__inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .footer-contact {
        width: 75%;
        margin: 2rem auto 10em auto;
        font-size: .75em;
    }

    .footer-details {
        align-items: center;
    }

    .footer-logo {
        margin: 0 auto 1rem auto;
    }




}



@media (max-width: 750px) {

    .mobile-site-header {
        position: absolute;

        top: 0;
        left: 0;
        right: 0;

        z-index: 101;

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

        box-sizing: border-box;

        width: 100%;

        padding:
            clamp(.75rem, 3vw, 2rem)
            clamp(1rem, 4vw, 2rem);

        background: transparent;
    }

    .mobile-nav-toggle {
        position: relative;

        top: 0;
        right: 0;

        z-index: 102;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        width: 2.25rem;
        height: 1.75rem;

        padding: 0;

        border: 0;
        background: transparent;

        cursor: pointer;
    }


    .mobile-nav-toggle__line {
        display: block;

        width: 100%;
        height: .45rem;

        background: white;

        transform-origin: center;

        transition:
            transform 0.35s ease,
            opacity 0.2s ease;
    }



    .mobile-nav-toggle.is-open
    .mobile-nav-toggle__line:nth-child(1) {
        transform: translateY(.65rem) rotate(45deg);
    }


    .mobile-nav-toggle.is-open
    .mobile-nav-toggle__line:nth-child(2) {
        opacity: 0;
    }


    .mobile-nav-toggle.is-open
    .mobile-nav-toggle__line:nth-child(3) {
        transform: translateY(-.65rem) rotate(-45deg);
    }

    .mobile-nav {
        position: fixed;

        inset: 0;

        z-index: 100;

        display: flex;
        justify-content: flex-end;
        align-items: flex-start;

        width: 100%;
        height: 100dvh;

        box-sizing: border-box;

        padding:
            clamp(8rem, 24vh, 12rem)
            clamp(2rem, 8vw, 4rem)
            4rem;

        background: #780000;

        transform: translateX(100%);

        visibility: hidden;

        transition:
            transform 0.45s ease,
            visibility 0s linear 0.45s;
    }


    .mobile-nav.is-open {
        transform: translateX(0);

        visibility: visible;

        transition:
            transform 0.45s ease,
            visibility 0s;
    }

    .mobile-nav__list {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        gap: clamp(1.25rem, 4vh, 2.5rem);

        width: 100%;

        margin: 0;
        padding: 0;

        list-style: none;
    }


    .mobile-nav__item {
        margin: 0;
        padding: 0;
    }


    .mobile-nav__link {
        display: block;

        color: #e6d6c8;

        font-family: var(--font-primary);
        font-size: clamp(1.75rem, 7vw, 2.75rem);
        font-variation-settings: "wght" 400;

        line-height: 1;

        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: right;

        text-decoration: none;
    }


    .mobile-nav__link:hover,
    .mobile-nav__link:focus-visible {
        opacity: 0.7;
    }

    .nav-logo {
        color: white;
        width: clamp(.75rem, 5vw, 2em);
        height: clamp(1.25rem, 7vw, 3em);
        margin: auto 0;
    }

    .nav-logo:hover {
        color: #0a7ade;
    }

    .mobile-site-header.is-fixed,
    .mobile-site-header.is-hiding {
        position: fixed;
        background: rgba(0, 0, 0, 0.85);
    }

    .mobile-site-header.is-fixed {
        animation: mobile-header-in .5s ease forwards;
    }

    .mobile-site-header.is-hiding {
        animation: mobile-header-out .25s ease forwards;
    }


    @keyframes mobile-header-in {
        from {
            transform: translateY(-100%);
        }

        to {
            transform: translateY(0);
        }
    }

    @keyframes mobile-header-out {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100%);
        }
    }

    .hero-top-lines {
        top: clamp(2.5rem, 8vw, 8rem);
    }
    
    .second-top-line {
        grid-template-columns:
            minmax(1rem, 1fr)
            calc(min(60vw, 80rem) + 1.5rem)
            minmax(1rem, 1fr);

        transform: translateY(-.75rem);
    }

    .hero-top-line__center {
        width: calc(100% + 4px);
        height: 1.4rem;
    }

    .hero-top-line__center {
        width: calc(100% + 4px);
        height: 1.25rem;
    }

    .hero-header {
        /* top: clamp(6rem, 10vh, 10rem); */
        left: 50%;
    }

    .hero-title {
        text-align: left;
        text-align: center;
    }

    .svg-corner-text-overlay {
        bottom: 10%;
        font-size: 2rem;
    }
    
    




    .shop-icon-container {
        left: .5rem;
    }

    .item-indicator-container {
        left: 1.5rem;
    }

    .large-overlay-text-container {
        right: var(--hero-gutter);
        height: 40dvh;
        margin-top: 10vh;
    }

    .hero-nav {
        display: none;
    }


    .upcoming-events {
        min-height: auto;

        padding-top: 6rem;
        padding-bottom: 3rem;
    }


    .upcoming-events__header {
        width: min(82vw, 36rem);

        margin-top: 5rem;
    }

    .upcoming-events__cards-window {
        width: min(75vw, 36rem);
        min-height: 50vh;
        margin: 2rem auto 0 auto;
        display: flex;
        align-items: center;
    }

    .upcoming-events__cards {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        gap: 1.5rem;
    }

    .event-card__inner {
        aspect-ratio: unset;
        padding: 3em 0;
    }

    .event-card,
    .upcoming-events__cards > .event-card:first-child {
        flex: none;

        width: min(90%, 25rem);
    }

    .upcoming-events__cards > .event-card:first-child .event-card__inner {
        aspect-ratio: unset;
    }

   

    .event-location-container {
        text-align: left;
        font-size: .75rem;
    }

    .upcoming-events__empty {
        width: 100%;
    }







    .upcoming-events__accent--top {
        top: 16%;
    }


    .upcoming-events__accent--bottom {
        bottom: 6%;
    }

    .upcoming-events__plus--left,
    .upcoming-events__plus--right {
        top: 58%;
    }



    .special-item-name {
        font-size: clamp(.85rem, 3vw, 4rem);
    }

    .special-item-description {
        font-size: clamp(.85rem, 2vw, 2rem);
    }




/* our story section styles */
    .our-story {
        min-height: 100vh;
    }

    .our-story-header-container {
        height: 50vh;
    }






    .book-us-gallery,
    .past-events-gallery {
        width: min(90vw, 32rem);

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: clamp(0.75rem, 3vw, 1.25rem);
    }

    .past-events-gallery,
    .book-us-gallery {
        width: 85%;
    }

    .book-us-cta {
        width: min(20rem, 80vw);
    }
    



    


    .menu-content-container {
        font-size: .65em;
    }




    

}