/* ==========================================================================
   Mobile navigation (992px and below): sticky white header, "Menu" pill,
   maroon drawer from the right over a dimmed page
   ========================================================================== */

.m-nav, .m-nav-scrim { display: none; }

@media (max-width: 992px) {

/* sticky header */
#dtr-responsive-header { position: sticky; top: 0; z-index: 1001; transition: box-shadow .3s ease; }
body.m-nav-scrolled #dtr-responsive-header { box-shadow: 0 6px 20px rgba(74, 6, 13, .08); }

/* the "Menu" pill (open) and "Close" pill (inside the drawer) share one look */
.m-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--dtr-radius-round); background: var(--dtr-secondary-light); color: var(--dtr-primary); font: 800 12px/1 var(--dtr-font-family-base); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.m-btn:hover { background: var(--dtr-primary); color: var(--dtr-white); }
.m-btn:focus { outline: none; }
.m-btn:focus-visible { outline: 2px solid var(--dtr-secondary); outline-offset: 3px; }
#dtr-resp-menu-button.m-btn { display: inline-flex; margin-top: -20px; right: 16px; padding: 0 16px; background-color: var(--dtr-secondary-light); }
#dtr-resp-menu-button.m-btn:hover { background-color: var(--dtr-primary); color: var(--dtr-white); }

/* two lines, the top one shorter: reads as "menu" without the generic three bars */
.m-btn__icon { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 18px; }
.m-btn__icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: width .25s ease; }
.m-btn__icon i:first-child { width: 12px; }
.m-btn__icon i:last-child { width: 18px; }
.m-btn:hover .m-btn__icon i:first-child { width: 18px; }

/* close icon: a clean X */
.m-btn__x { position: relative; width: 12px; height: 12px; }
.m-btn__x::before, .m-btn__x::after { content: ""; position: absolute; top: 5px; left: -1px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
.m-btn__x::before { transform: rotate(45deg); }
.m-btn__x::after { transform: rotate(-45deg); }

/* dimmed page behind the drawer */
.m-nav-scrim { display: block; position: fixed; inset: 0; z-index: 1002; background: rgba(74, 6, 13, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
body.m-nav-open .m-nav-scrim { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
body.m-nav-open { overflow: hidden; }

/* the drawer */
.m-nav { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1003; width: min(86vw, 380px); overflow-y: auto; color: var(--dtr-white); visibility: hidden;
    background:
        radial-gradient(90% 45% at 100% 0%, rgba(200, 99, 88, .32) 0%, rgba(200, 99, 88, 0) 65%),
        var(--dtr-primary);
    box-shadow: -24px 0 60px rgba(74, 6, 13, .35);
    -webkit-transform: translateX(100%); transform: translateX(100%);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .45s; }
body.m-nav-open .m-nav { visibility: visible; -webkit-transform: none; transform: none; transition: transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s; }

.m-nav__top { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 16px 0 24px; }
.m-nav__label { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 234, 230, .55); }

.m-nav__inner { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: 8px 24px 28px; }

.m-nav__list { list-style: none; margin: 0; padding: 0; }
.m-nav__list li { border-bottom: 1px solid rgba(245, 234, 230, .12); opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.m-nav__list li:first-child { border-top: 1px solid rgba(245, 234, 230, .12); }
body.m-nav-open .m-nav__list li { opacity: 1; -webkit-transform: none; transform: none; }
body.m-nav-open .m-nav__list li:nth-child(1) { transition-delay: .12s; }
body.m-nav-open .m-nav__list li:nth-child(2) { transition-delay: .16s; }
body.m-nav-open .m-nav__list li:nth-child(3) { transition-delay: .20s; }
body.m-nav-open .m-nav__list li:nth-child(4) { transition-delay: .24s; }
body.m-nav-open .m-nav__list li:nth-child(5) { transition-delay: .28s; }

.m-nav__list a { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; color: var(--dtr-secondary-light); font-family: var(--dtr-font-family-heading); font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-decoration: none; transition: color .2s ease; }
.m-nav__num { flex: none; width: 22px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--dtr-secondary); }
.m-nav__list a:hover { color: var(--dtr-white); }
.m-nav__list a:focus { outline: none; }
.m-nav__list a:focus-visible { color: var(--dtr-white); text-decoration: underline; text-decoration-color: var(--dtr-secondary); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.m-nav__list a.is-current { color: var(--dtr-white); }
.m-nav__list a.is-current::after { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--dtr-secondary); }

.m-nav__foot { margin-top: 32px; opacity: 0; transition: opacity .35s ease .3s; }
body.m-nav-open .m-nav__foot { opacity: 1; }
.m-nav__cta { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; border-radius: var(--dtr-radius-rounded); background: var(--dtr-secondary-light); color: var(--dtr-primary); font-weight: 800; font-size: 15px; text-decoration: none; }
.m-nav__cta:hover, .m-nav__cta:focus-visible { background: var(--dtr-white); color: var(--dtr-primary); }
.m-nav__cta svg { width: 18px; height: 18px; }
.m-nav__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.m-nav__meta p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(245, 234, 230, .7); }
.m-nav .dtr-social { margin: 0; }
.m-nav .dtr-social a, .m-nav .dtr-social a:before { color: var(--dtr-secondary-light); }
.m-nav .dtr-social a:hover:before { color: var(--dtr-white); }

}

@media (prefers-reduced-motion: reduce) {
.m-nav, .m-nav-scrim, .m-nav__list li, .m-nav__foot { transition: none !important; -webkit-transform: none !important; transform: none !important; }
}