/* TRM navigation. Loaded after the original theme and the optional color module. */
:root { --trm-drawer-top: 0px; }

/* A 44px hit area surrounds the restrained line-to-dot icon. */
.trm-menu-button {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: block;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.trm-menu-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 2px;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    transition: transform 120ms ease 120ms, width 120ms ease, height 120ms ease;
}
.trm-menu-button span:first-child { transform: translate(-50%, calc(-50% - 7px)); }
.trm-menu-button span:last-child { transform: translate(-50%, calc(-50% + 7px)); }
.trm-menu-button[aria-expanded="true"] span {
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    transition: transform 120ms ease, width 120ms ease 120ms, height 120ms ease 120ms;
}
.trm-menu-button:focus-visible,
#trm-menu :is(a, button):focus-visible {
    outline: 2px solid var(--trm-focus, #5e594c);
    outline-offset: 4px;
}

.trm-menu-backdrop {
    position: fixed;
    inset: var(--trm-drawer-top) 0 0;
    z-index: 1300;
    background: rgb(0 0 0 / 26%);
    opacity: 0;
    transition: opacity 240ms ease;
    touch-action: pan-y pinch-zoom;
}
.trm-menu-backdrop.is-open { opacity: 1; }
.trm-menu-backdrop[hidden], #trm-menu[hidden] { display: none !important; }

/* The root prefix also overrides the older color module's document-flow z-index. */
:root #trm-menu {
    position: fixed;
    inset: var(--trm-drawer-top) auto auto 0;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    width: min(350px, 86vw);
    height: calc(100vh - var(--trm-drawer-top));
    height: calc(100dvh - var(--trm-drawer-top));
    max-height: calc(100dvh - var(--trm-drawer-top));
    min-height: 0;
    padding: 0;
    overflow: hidden;
    color: var(--trm-text, #151613);
    background: var(--trm-bg, #f7f5ef);
    border-right: 1px solid var(--trm-border, #d6d2c8);
    transform: translateX(-100%);
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transition: transform 240ms cubic-bezier(.22, .61, .36, 1), visibility 240ms;
}
:root #trm-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}
#trm-menu .trm-menu-top {
    position: relative;
    flex: 0 0 auto;
    min-height: 60px;
    margin: 0 26px;
    padding: 8px 0;
    border-bottom: 1px solid var(--trm-border, #d6d2c8);
}
#trm-menu .trm-menu-label {
    display: block;
    color: var(--trm-text-muted, #635f55);
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 400;
}
#trm-menu .trm-menu-close {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 60px;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    color: inherit;
    letter-spacing: .02em;
    touch-action: manipulation;
}
#trm-menu .trm-menu-close span { font-size: 7px; }
#trm-menu .trm-menu-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 26px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
#trm-menu .trm-menu-primary {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 36px;
}
#trm-menu .trm-menu-primary a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 10px 0;
    border-bottom: 1px solid var(--trm-border, #d6d2c8);
    /* Font family remains the publication's existing Baskerville / Iowan / Georgia. */
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
    text-decoration: none;
}
#trm-menu .trm-menu-primary a:hover { opacity: .72; }
#trm-menu .trm-menu-secondary {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0;
    margin-top: auto;
    padding-top: 0;
}
#trm-menu .trm-menu-secondary :is(a, button) {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 0;
    border-bottom: 1px solid var(--trm-border, #d6d2c8);
    border-radius: 0;
    color: inherit;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .015em;
    text-align: left;
    text-decoration: none;
}
#trm-menu .trm-menu-secondary .trm-menu-search {
    gap: 11px;
    padding: 12px 13px;
    margin-bottom: 12px;
    border: 1px solid var(--trm-border, #d6d2c8);
    background: var(--trm-surface, #fff);
}
#trm-menu .trm-menu-secondary svg { flex: 0 0 auto; }
#trm-menu .trm-menu-secondary :is(a, button):hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 600px) {
    #trm-menu .trm-menu-primary a { font-size: 25px; min-height: 50px; }
    #trm-menu .trm-menu-top { margin-inline: 22px; }
    #trm-menu .trm-menu-content { padding-inline: 22px; }
}
@media (max-height: 480px) {
    #trm-menu .trm-menu-top { min-height: 48px; padding-block: 0; }
    #trm-menu .trm-menu-primary { padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .trm-menu-button span, :root #trm-menu, .trm-menu-backdrop { transition: none; }
}
@media (forced-colors: active) {
    .trm-menu-button span { background: ButtonText !important; }
    .trm-menu-backdrop { background: transparent; }
    :root #trm-menu { border-right-color: CanvasText; background: Canvas; color: CanvasText; }
}
@media print {
    :root #trm-menu, .trm-menu-backdrop, .trm-menu-button { display: none !important; }
}