/*
 * Klipist redesign — site-wide chrome styles.
 *
 * Stage 3 scope: skip link + desktop site header only.
 * Footer rules land in Stage 4; mobile topbar + drawer in Stage 5.
 *
 * Token fallbacks (#160000 etc.) are present on every var() call so
 * the chrome still renders if tokens.css hasn't loaded yet (e.g. if
 * Autoptimize is mid-rebuild after a deploy).
 */


/* === Skip link — keyboard nav to main content === */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 18px;
    background: var(--bg, #160000);
    color: var(--text, #ffffff);
    font-family: var(--ff-header, 'Gatwick', 'Helvetica Neue', Arial, sans-serif);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus,
.skip-link:active {
    left: 8px;
    top: 8px;
    outline: 2px solid var(--accent, #e6c8bd);
}


/* === Chrome resets — explicit selector allow-list ===
   Brief boundary rule: no universal-children selectors. Resets are
   applied to the chrome elements we actually emit, by name. */

.site-header,
.site-header nav,
.site-header a,
.site-header button,
.site-header span,
.site-header svg,
.site-header .wordmark,
.site-header .site-nav,
.site-header .header-right,
.site-header .header-submit,
.site-header .header-icon-btn,
.site-header .header-menu-btn {
    box-sizing: border-box;
}

.site-header a {
    color: inherit;
    text-decoration: none;
}

.site-header button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
}


/* === Desktop site header ===

   Two variants:
     .site-header           — transparent gradient overlay, for pages
                              with a full-bleed hero behind (future
                              homepage / future film redesigns).
     .site-header.opaque    — sticky oxblood-tinted bar. Default for
                              the rollout; works on top of any page
                              content without overlapping.
*/

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 22px 60px;
    display: flex;
    align-items: center;
    gap: 40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site-header.opaque {
    position: sticky;
    top: 0;
    background: rgba(22, 0, 0, 0.92);
    border-bottom: 1px solid var(--border, rgba(230, 200, 189, 0.14));
}


/* === Wordmark — CSS-rendered text logo ===
   Embedded base64 webp; visible text hidden with font-size: 0 for
   screen readers via the link's aria-label. Shared between the
   desktop header (.wordmark), the mobile topbar (.mh-logo), and the
   mobile footer (.mf-logo). The base64 image lives on the combined
   selector so it's only embedded once. Per-context size overrides
   follow below. */

.wordmark,
.mh-logo,
.mf-logo {
    display: inline-block;
    background-image: url("data:image/webp;base64,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");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 0;
    color: transparent;
    line-height: 0;
    vertical-align: middle;
}

.wordmark {
    height: 28px;
    width: 88px;
}

.mh-logo {
    height: 26px;
    width: 90px;
}

.mf-logo {
    height: 30px;
    width: 105px;
    margin-bottom: 14px;
}

.site-header .wordmark {
    flex-shrink: 0;
}


/* === Primary nav (.site-nav) ===
   Klipist_Nav_Walker emits a flat list of <a> tags; class="active"
   when the current URL matches the menu item server-side. */

.site-nav {
    display: flex;
    gap: 28px;
    flex: 1;
}

.site-nav a {
    font-family: var(--ff-header, 'Gatwick', 'Helvetica Neue', Arial, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s;
}

.site-nav a:hover {
    color: var(--text, #ffffff);
}

.site-nav a.active {
    color: var(--text, #ffffff);
    font-family: 'Gatwick Bold', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    border-bottom-color: var(--accent, #e6c8bd);
}


/* === Right side: Submit pill + search icon + hamburger === */

.header-right {
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
}

.header-submit {
    font-family: var(--ff-header, 'Gatwick', 'Helvetica Neue', Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--accent, #e6c8bd);
    color: var(--accent, #e6c8bd);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.header-submit:hover {
    background: var(--accent, #e6c8bd);
    color: var(--bg, #160000);
}

.header-icon-btn {
    width: 36px;
    height: 36px;
    color: var(--text, #ffffff);
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* === Site footer (.footer) ===
   Ported from slice 01-shared-components.css FOOTER section. Layout is
   a 4-column grid at desktop, stacked to 1 column ≤768px. The mobile
   media query here is a fallback for the Stage 4 rollout window; the
   proper mobile footer treatment lands in Stage 5. */


/* Chrome resets — explicit selector allow-list for footer descendants */

.footer,
.footer a,
.footer p,
.footer h4,
.footer ul,
.footer li,
.footer span,
.footer svg,
.footer small,
.footer .mark,
.footer .footer-grid,
.footer .footer-brand,
.footer .footer-tagline,
.footer .footer-apps,
.footer .footer-app-pill,
.footer .footer-app-label,
.footer .footer-social,
.footer .footer-social-dot,
.footer .footer-col,
.footer .footer-meta {
    box-sizing: border-box;
}

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

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* Footer shell */

.footer {
    margin-top: 0;
    padding: 48px 80px 40px;
    border-top: 1px solid var(--border, rgba(230, 200, 189, 0.14));
    color: var(--text, #ffffff);
    background: var(--bg, #160000);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 60px;
    align-items: start;
}


/* Brand column */

.footer-brand .mark {
    display: inline-block;
    margin-bottom: 14px;
}

.footer-brand .footer-tagline {
    font-family: var(--ff-italic, 'Cormorant Infant', Georgia, serif);
    font-style: italic;
    font-size: 16px;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    max-width: 320px;
    line-height: 1.5;
    margin: 0 0 28px;
}

.footer-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    width: 320px;
}

.footer-app-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: #0a0000;
    color: #ffffff;
    font-family: var(--ff-header, 'Gatwick', 'Helvetica Neue', Arial, sans-serif);
    transition: border-color 0.16s, background 0.16s;
}

.footer-app-pill:nth-child(1),
.footer-app-pill:nth-child(2) {
    width: 156px;
    flex-shrink: 0;
}

.footer-app-pill:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: #120303;
}

.footer-app-pill svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.footer-app-label {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.1px;
    min-width: 0;
    white-space: nowrap;
}

.footer-app-label small {
    font-size: 6px;
    font-weight: 400;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.68;
    margin-bottom: 2px;
    white-space: nowrap;
}

.footer-social {
    display: inline-flex;
    gap: 10px;
}

.footer-social-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-strong, rgba(230, 200, 189, 0.28));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    transition: color 0.16s, border-color 0.16s;
}

.footer-social-dot:hover {
    color: var(--accent, #e6c8bd);
    border-color: var(--accent, #e6c8bd);
}

.footer-social-dot svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}


/* Link columns */

.footer-col h4 {
    font-family: var(--ff-header, 'Gatwick', 'Helvetica Neue', Arial, sans-serif);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent, #e6c8bd);
    margin: 0 0 16px;
    font-weight: 600;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-col a {
    font-family: var(--ff-body, 'montserrat', 'Helvetica Neue', Arial, sans-serif);
    font-size: 14px;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    transition: color 0.16s;
}

.footer-col a:hover {
    color: var(--text, #ffffff);
}


/* Meta strip */

.footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border, rgba(230, 200, 189, 0.14));
    font-family: var(--ff-header, 'Gatwick', 'Helvetica Neue', Arial, sans-serif);
    font-size: 11px;
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
    letter-spacing: 0.5px;
}

.footer-meta .links {
    display: flex;
    gap: 22px;
}

.footer-meta .links a {
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
    transition: color 0.16s;
}

.footer-meta .links a:hover {
    color: var(--accent, #e6c8bd);
}


/* === Off-canvas drawer (.menu-overlay) ===
   Same markup for desktop (480px right panel) and mobile (full
   sheet). Opened by [data-menu-open] triggers via js/chrome.js. */

.menu-overlay,
.menu-overlay a,
.menu-overlay button,
.menu-overlay h3,
.menu-overlay p,
.menu-overlay span,
.menu-overlay svg,
.menu-overlay div {
    box-sizing: border-box;
}

.menu-overlay a {
    color: inherit;
    text-decoration: none;
}

.menu-overlay button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

.menu-overlay[data-menu-active] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body[data-menu-active] {
    overflow: hidden;
}

.menu-overlay-panel-wrap {
    width: 480px;
    max-width: 100vw;
    height: 100%;
    background: rgba(18, 0, 0, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-left: 1px solid var(--border, rgba(230, 200, 189, 0.14));
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transform: translateX(24px);
    transition: transform 0.25s ease;
}

.menu-overlay[data-menu-active] .menu-overlay-panel-wrap {
    transform: translateX(0);
}

.menu-overlay-head {
    flex-shrink: 0;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border, rgba(230, 200, 189, 0.14));
}

.menu-overlay-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    display: grid;
    place-items: center;
    transition: background 0.15s, color 0.15s;
}

.menu-overlay-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text, #fff);
}

.menu-overlay-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0 20px;
}

/* Auth-state toggle */
.menu-overlay[data-auth-state="logged-in"] [data-show-when="logged-out"] {
    display: none;
}

.menu-overlay[data-auth-state="logged-out"] [data-show-when="logged-in"] {
    display: none;
}

/* Logged-out auth card */
.menu-auth {
    padding: 8px 24px 24px;
    border-bottom: 1px solid var(--border, rgba(230, 200, 189, 0.14));
    margin-bottom: 16px;
}

.menu-auth-title {
    font-family: var(--ff-serif, 'bely-display', Georgia, serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--text, #fff);
    margin: 0 0 6px;
}

.menu-auth-sub {
    font-family: var(--ff-body, 'montserrat', sans-serif);
    font-size: 13px;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    line-height: 1.5;
    margin: 0 0 16px;
}

.menu-auth-row {
    display: flex;
    gap: 8px;
}

.menu-auth-btn {
    flex: 1;
    padding: 11px 0;
    border-radius: 8px;
    text-align: center;
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Both auth buttons need explicit .menu-overlay prefix to beat the
   .menu-overlay a { color: inherit } reset above (specificity 0,2,0
   vs the single-class 0,1,0 — without the prefix the inherited body
   colour overrides these, which broke the Sign-in button as white-
   on-white). */
.menu-overlay .menu-auth-primary {
    background: var(--text, #fff);
    color: var(--bg, #160000);
}

.menu-overlay .menu-auth-secondary {
    border: 1px solid var(--border-strong, rgba(230, 200, 189, 0.28));
    color: var(--text, #fff);
}

/* Logged-in profile row */
.menu-profile {
    padding: 8px 16px 24px;
    border-bottom: 1px solid var(--border, rgba(230, 200, 189, 0.14));
    margin-bottom: 16px;
}

.menu-profile-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border, rgba(230, 200, 189, 0.14));
    border-radius: 14px;
    transition: background 0.15s, border-color 0.15s;
}

.menu-profile-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-strong, rgba(230, 200, 189, 0.28));
}

.menu-profile-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #e6c8bd) 0%, #8B6E65 100%);
    color: var(--bg, #160000);
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-profile-text {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-profile-name {
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #fff);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-profile-email {
    font-family: var(--ff-body, 'montserrat', sans-serif);
    font-size: 12px;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-profile-chev {
    flex: 0 0 14px;
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
}

/* Sections */
.menu-section {
    margin-bottom: 20px;
}

.menu-section-label {
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
    padding: 4px 24px;
    margin-bottom: 4px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    color: var(--text, #fff);
    transition: background 0.12s, color 0.12s;
    /* Defensive: kill any transform the parent theme's a:hover rule
       might try to apply. Slice intent is a background-only hover. */
    transform: none;
}

.menu-item:hover,
.menu-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    transform: none;
}

.menu-item:hover .menu-item-icon,
.menu-item:focus-visible .menu-item-icon {
    color: var(--text, #fff);
}

.menu-item-icon {
    width: 22px;
    height: 22px;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: color 0.12s;
}

.menu-item-icon svg {
    width: 20px;
    height: 20px;
}

.menu-item-label {
    flex: 1;
    font-family: var(--ff-body, 'montserrat', sans-serif);
    font-size: 14px;
    color: var(--text, #fff);
}

.menu-item-chev {
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
    flex-shrink: 0;
}

/* Same defensive transform reset on the other drawer-row anchors. */
.menu-overlay .menu-profile-row,
.menu-overlay .menu-submit-row,
.menu-overlay .menu-store,
.menu-overlay .menu-item {
    transform: none;
}

.menu-overlay .menu-profile-row:hover,
.menu-overlay .menu-submit-row:hover,
.menu-overlay .menu-store:hover,
.menu-overlay .menu-item:hover {
    transform: none;
}

/* Submit promo box — suede-tinted, sits low in the drawer */
.menu-submit-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 16px 20px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(230, 200, 189, 0.08), rgba(230, 200, 189, 0.02));
    border: 1px solid rgba(230, 200, 189, 0.2);
    border-radius: 12px;
    color: var(--text, #fff);
    transition: border-color 0.15s, background 0.15s;
}

.menu-submit-row:hover {
    border-color: rgba(230, 200, 189, 0.35);
    background: linear-gradient(135deg, rgba(230, 200, 189, 0.12), rgba(230, 200, 189, 0.04));
}

.menu-submit-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--accent, #e6c8bd);
    color: var(--bg, #160000);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.menu-submit-text {
    flex: 1;
    min-width: 0;
}

.menu-submit-title {
    display: block;
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 3px;
}

.menu-submit-sub {
    display: block;
    font-family: var(--ff-body, 'montserrat', sans-serif);
    font-size: 12px;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    letter-spacing: 0.2px;
}

.menu-submit-chev {
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
    flex-shrink: 0;
}

/* App store pills inside drawer */
.menu-stores {
    display: flex;
    gap: 8px;
    padding: 4px 16px 8px;
}

.menu-store {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    transition: transform 0.12s, border-color 0.15s;
    min-width: 0;
}

.menu-store:hover {
    border-color: rgba(255, 255, 255, 0.28);
}

.menu-store-logo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.menu-store-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.menu-store-eyebrow {
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 2px;
    white-space: nowrap;
}

.menu-store-name {
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #fff;
    white-space: nowrap;
}

/* Legal */
.menu-legal {
    padding: 16px 24px 4px;
    display: flex;
    gap: 10px;
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 11px;
    letter-spacing: 0.3px;
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
}

.menu-legal a {
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
    transition: color 0.15s;
}

.menu-legal a:hover {
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
}

@media (prefers-reduced-motion: reduce) {
    .menu-overlay,
    .menu-overlay-panel-wrap {
        transition: none !important;
    }
}


/* === Mobile topbar (.mh-topbar) ===
   Hidden by default at desktop widths; shown at ≤640px (see viewport
   switches at the bottom of this file). Sibling of .site-header
   inside <header>; CSS controls which is visible per viewport. */

.mh-topbar,
.mh-topbar a,
.mh-topbar button,
.mh-topbar div,
.mh-topbar svg {
    box-sizing: border-box;
}

.mh-topbar a,
.mh-topbar button {
    color: inherit;
    text-decoration: none;
}

.mh-topbar button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
}

.mh-topbar {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 14px 20px;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
}

.mh-topbar-icons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.mh-icon-btn {
    width: 40px;
    height: 40px;
    color: var(--text, #fff);
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.mh-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* === Mobile footer (.mf) ===
   Slim editorial sign-off — wordmark + tagline + 2 app pills +
   social + meta. Hidden by default; revealed at ≤640px. */

.mf,
.mf a,
.mf p,
.mf div,
.mf span,
.mf small,
.mf svg {
    box-sizing: border-box;
}

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

.mf {
    display: none;
    padding: 36px 28px 28px;
    border-top: 1px solid var(--border, rgba(230, 200, 189, 0.14));
    background: var(--bg, #160000);
    margin-top: 56px;
    color: var(--text, #fff);
}

.mf-tagline {
    font-family: var(--ff-italic, 'Cormorant Infant', serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    margin: 0 0 22px;
    max-width: 320px;
}

.mf-apps {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.mf-app-pill {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: #0a0000;
    color: #fff;
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    transition: border-color 0.16s, background 0.16s;
}

.mf-app-pill:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: #120303;
}

.mf-app-pill svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.mf-app-label {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.1px;
    min-width: 0;
    white-space: nowrap;
}

.mf-app-label small {
    font-size: 6px;
    font-weight: 400;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.68;
    margin-bottom: 2px;
    white-space: nowrap;
}

.mf-social {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.mf-social-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-strong, rgba(230, 200, 189, 0.28));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    transition: color 0.16s, border-color 0.16s;
}

.mf-social-dot:hover {
    color: var(--accent, #e6c8bd);
    border-color: var(--accent, #e6c8bd);
}

.mf-social-dot svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.mf-meta {
    padding-top: 18px;
    border-top: 1px solid var(--border, rgba(230, 200, 189, 0.14));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mf-copyright {
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
}

.mf-legal {
    display: flex;
    gap: 16px;
}

.mf-legal a {
    font-family: var(--ff-header, 'Gatwick', sans-serif);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-muted, rgba(230, 200, 189, 0.42));
    transition: color 0.16s;
}

.mf-legal a:hover {
    color: var(--accent, #e6c8bd);
}


/* === Viewport switches (≤640px) ===
   At mobile widths, swap the desktop chrome (.site-header / .footer)
   for the mobile chrome (.mh-topbar / .mf). The drawer markup is
   shared; only its panel size changes. */

@media (max-width: 640px) {

    .site-header {
        display: none;
    }

    .mh-topbar {
        display: flex;
    }

    .footer {
        display: none;
    }

    .mf {
        display: block;
    }

    .menu-overlay-panel-wrap {
        width: 100%;
        max-width: none;
        border-left: 0;
    }
}