/*
 * 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: 100px; /* design: 100px gap between last section and footer */
    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 Garamond', 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;
    list-style: none;
    margin: 0;
    padding: 0;
}

.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;
    font-weight: 500;
    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 Garamond', 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: 1024px) {

    .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;
    }
}

/* Redesigned pages own the page background (design --bg). Without this
   the parent theme's near-black shows in gaps outside the article
   (e.g. the 100px footer margin). */
body.klipist-redesign {
    background-color: var(--bg, #160000);
    color: var(--text, #ffffff);
    font-family: var(--ff-body, 'montserrat', 'Helvetica Neue', Arial, sans-serif);
    font-size: 15px;
    line-height: 1.5; /* design base — parent theme's ~2.3 inflated every unset element */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* =========================================================================
   Pixel-QA pass (2026-06-10, Philip's list): colors / weights / synthesis
   ========================================================================= */

/* bely-display ships as a single 400 face (Typekit); the design's
   embedded face covers 400-700 in one file. Without this, every h2/h3
   at weight 600/700 gets browser faux-bold and looks too heavy. */
body.klipist-redesign {
    font-synthesis-weight: none;
}

/* .site-header a / .footer a { color: inherit } are (0,1,1) and were
   beating the (0,1,0) component rules below. Re-declare at higher
   specificity with the design values. */
.site-header .header-submit {
    color: var(--accent, #e6c8bd);
    font-weight: 700;
}
.site-header .header-submit:hover {
    background: var(--accent, #e6c8bd);
    color: #160000;
}
.site-header .header-icon-btn { color: var(--text, #ffffff); }
.site-header .site-nav a { color: var(--text-dim, rgba(230, 200, 189, 0.72)); font-weight: 500; }
.site-header .site-nav a:hover { color: var(--text, #ffffff); }
.site-header .site-nav a.active { color: var(--text, #ffffff); font-weight: 700; }

.footer .footer-social-dot { color: var(--text-dim, rgba(230, 200, 189, 0.72)); }
.footer .footer-social-dot:hover { color: var(--accent, #e6c8bd); border-color: var(--accent, #e6c8bd); }
.footer .footer-col a {
    font-family: var(--ff-body, 'montserrat', 'Helvetica Neue', Arial, sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dim, rgba(230, 200, 189, 0.72));
    text-decoration: none;
    transition: color 0.16s;
}
.footer .footer-col a:hover { color: var(--text, #ffffff); }
/* ≥1441px: header content and footer columns align to the 1440px cap. */
@media (min-width: 1441px) {
  body.klipist-redesign .site-header {
    padding-left: calc((100% - 1440px) / 2 + 40px);
    padding-right: calc((100% - 1440px) / 2 + 40px);
  }
  body.klipist-redesign .footer-grid,
  body.klipist-redesign .footer-meta {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 601–900px (tablet zone): compress the desktop header so the full nav
   fits on portrait iPads / unfolded foldables. */
@media (min-width: 1025px) and (max-width: 900px) {
    .site-header { padding: 18px 24px; gap: 14px; }
    .site-nav { gap: 16px; }
    .site-nav a { font-size: 12px; }
    .header-right { gap: 8px; }
    .header-submit { padding: 8px 13px; font-size: 12px; }
}

/* Landscape phones (wide but very short viewports, e.g. iPhone 15 at
   852×393): the compressed desktop nav is too cramped vertically —
   switch to the mobile topbar based on HEIGHT, not just width. */
@media (max-width: 940px) and (max-height: 500px) {
    .site-header { display: none; }
    .mh-topbar { display: flex; }
}

/* UA-default restore (marker: ua-restore): the design relies on browser
   default margins where its CSS doesn't set them; the parent theme
   resets them. :where() keeps inner specificity at zero so every
   extracted design rule still wins. */
:where(body.klipist-redesign p, body.klipist-redesign blockquote) { margin: 1em 0; }
:where(body.klipist-redesign figure) { margin: 1em 40px; }
:where(body.klipist-redesign h1) { margin: 0.67em 0; }
:where(body.klipist-redesign h2) { margin: 0.83em 0; }
:where(body.klipist-redesign h3) { margin: 1em 0; }
:where(body.klipist-redesign h4) { margin: 1.33em 0; }
:where(body.klipist-redesign ul, body.klipist-redesign ol) { margin: 1em 0; padding-left: 40px; }

/* Design's universal reset (design source line 76) — without it, padded
   max-width containers compute wider (content-box) and text wraps fewer
   lines than the design. */
body.klipist-redesign *,
body.klipist-redesign *::before,
body.klipist-redesign *::after { box-sizing: border-box; }

/* UNCAP (Philip 2026-06-11): pages must render like the raw HTML at any
   width — the design stretches fluidly beyond 1440, so the earlier
   ≥1441 centering caps are reverted. */
@media (min-width: 1441px) {
  .col-page .col-body { max-width: none; }
  .film-page .film-body { max-width: none; }
  body.klipist-redesign .site-header { padding: 22px 80px; }
  body.klipist-redesign .footer-grid,
  body.klipist-redesign .footer-meta { max-width: none; }
  .home-page .hero-content,
  .home-page .row,
  .home-page .originals-row,
  .home-page .submission-wall { max-width: none; margin-left: 0; margin-right: 0; }
}

/* ════ POLISH ROUND (2026-06-11) ════ */

/* 1. Backdrop glow layers — global base (design ~5170); pages provide
   inline gradient colors on .col-backdrop-blur. Was missing on
   genres/moods/submit/about/etc. */
body.klipist-redesign .col-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 780px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
body.klipist-redesign .col-backdrop-blur {
  position: absolute; inset: -20%;
  filter: blur(140px) saturate(0.85);
  opacity: 0.9;
}
body.klipist-redesign .col-backdrop-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,0,0,0.35) 0%, rgba(22,0,0,0.72) 60%, var(--bg, #160000) 100%);
}
body.klipist-redesign .col-backdrop-tint {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(22,0,0,0) 0%, rgba(22,0,0,0.5) 100%);
}

/* 2. In-flow header on pages where the design uses a relative header
   (genre/mood/country/language singles, see-all, submissions). */
body.klipist-header-static .site-header {
  position: relative;
  /* keep the design's transparent gradient + blur so page backdrops bleed through */
}

/* 3. Subtle reveal-on-scroll (sections fade up once). */
body.klipist-redesign .kl-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
body.klipist-redesign .kl-reveal.kl-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.klipist-redesign .kl-reveal { opacity: 1; transform: none; transition: none; }
}

/* 4. Consistent interactive polish: gentle lift on tiles/cards. */
body.klipist-redesign :is(.tile, .top9-art, .original-tile, .taxo-tile, .genre-tile-v3, .mood-tile-v3, .collection-card, .col-more-tile, .mc-more-card, .gpm-tile) {
  transition: transform .25s ease, box-shadow .25s ease;
}
body.klipist-redesign :is(.tile, .top9-art, .original-tile, .taxo-tile, .genre-tile-v3, .mood-tile-v3, .collection-card, .col-more-tile):hover {
  transform: translateY(-4px);
}
body.klipist-redesign :is(.btn-play, .btn-mylist, .col-action, .sm-btn, .ld-btn, .submission-wall-cta, .header-submit, .m-btn-play) {
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.klipist-redesign :is(.btn-play, .col-action-primary, .sm-btn, .ld-btn, .submission-wall-cta):hover {
  transform: translateY(-1px);
}
/* v6: element-only selectors under page scopes (em, i, ...) */
.pt-page > footer { position: relative; z-index: 1; }
.sm-page h1 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.sm-page h2 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.sm-page h3 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.ab-page h1 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.ab-page h2 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.ab-page h3 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.pt-page h1 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.pt-page h2 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.pt-page h3 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.hp-page h1 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.hp-page h2 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.hp-page h3 em { color: #F2D5C9;
  font-weight: 500;
  letter-spacing: -0.005em; }
.hp-page > footer { position: relative; z-index: 1; }
/* UA-default heading sizes/weights (design has no element h rules and
   relies on browser defaults; parent theme overrides them). :where()
   = zero specificity so every design class rule still wins. */
:where(body.klipist-redesign h1) { font-size: 2em; font-weight: bold; }
:where(body.klipist-redesign h2) { font-size: 1.5em; font-weight: bold; }
:where(body.klipist-redesign h3) { font-size: 1.17em; font-weight: bold; }
:where(body.klipist-redesign h4) { font-size: 1em; font-weight: bold; }
:where(body.klipist-redesign h5) { font-size: 0.83em; font-weight: bold; }
:where(body.klipist-redesign h6) { font-size: 0.67em; font-weight: bold; }

/* punch list 4: on static-header pages the page backdrop bleeds under the header like the design (marker: klipist_pl4_bleed) */
body.klipist-header-static .site-header { background: none; }
body.klipist-header-static article .col-backdrop { top: -84px; }

/* click-to-play overlay + collection title size fix (punch list 4) */
.kl-player-overlay{position:fixed;inset:0;z-index:99999;background:rgba(12,0,0,0.93);display:flex;align-items:center;justify-content:center;padding:4vmin;}
.kl-player-frame{width:min(1280px,100%);aspect-ratio:16/9;}
.kl-player-frame iframe{width:100%;height:100%;border:0;border-radius:10px;}
.kl-player-close{position:absolute;top:16px;right:26px;background:none;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer;opacity:0.7;}
.kl-player-close:hover{opacity:1;}
body.klipist-redesign .col-watchlist-title{font-size:32px;}

/* Logged-in admin bar: keep the overlay header attached to the page, not the viewport (marker: klipist_adminbar) */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* PL8 (Philip): header fully transparent on ALL pages (no scrim, no blur),
   logo + nav aligned with the 80px content edge (marker: klipist_pl8_header) */
body.klipist-redesign .site-header { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.klipist-redesign .mh-topbar { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (min-width: 901px) { body.klipist-redesign .site-header { padding-left: 80px; padding-right: 80px; } }

/* PL9: genres/moods/search pages aligned to the same 80px edge as logo+rows (marker: klipist_pl9_align) */
@media (min-width: 901px) {
  body.klipist-redesign .taxo-page .taxo-page-head,
  body.klipist-redesign .sf-page .taxo-page-head { padding-left: 80px; padding-right: 80px; }
  body.klipist-redesign .taxo-page .taxo-layout,
  body.klipist-redesign .sf-page .taxo-layout { padding-left: 80px; padding-right: 80px; }
}

/* defer offscreen rows (paint + image fetch) — marker: klipist_cv */
body.klipist-redesign .home-desktop-wrap section.row { content-visibility: auto; contain-intrinsic-size: auto 560px; }

/* PL17: term pages mobile stacked list (moved from taxo.css — not loaded there) */
@media (max-width: 1024px) {
  .gpm-stack { display: flex; flex-direction: column; gap: 34px; overflow-x: visible; padding: 0 20px; }
  .gpm-stack .mh-tile { width: 100%; min-width: 0; max-width: none; flex: none; }
  .gpm-stack .kl-more-rest-m { display: none; }
  .gpm-stack .mh-tile-art { position: relative; }
  .gpm-stack .mh-tile-art .still { position: absolute; inset: 0; height: auto; }
}

/* PL18: term-page breadcrumbs below the header like film singles */
body.klipist-redesign .hero .gp-breadcrumbs-top { position: absolute; top: 112px; left: 80px; z-index: 3; margin: 0; }
@media (max-width: 900px) { body.klipist-redesign .hero .gp-breadcrumbs-top { left: 40px; } }
@media (max-width: 1024px) { body.klipist-redesign .hero .gp-breadcrumbs-top { display: none; } }


/* PL20: anchor jumps were scrolling INSIDE overflow:hidden articles (article.scrollTop>0 broke hero + left an end void). clip = same visual, not scrollable. (marker: klipist_overflowclip) */
body.klipist-redesign article { overflow: clip !important; }

/* PL20: about + landing final sections use the SAME radial as the submissions final (marker: klipist_final_parity) */
body.klipist-redesign .ab-page .ab-final-bg { background: radial-gradient(ellipse at center, rgba(46, 80, 79, 0.4) 0%, rgba(31, 6, 6, 0.6) 60%, var(--bg, #160000) 100%) !important; }
body.klipist-redesign .ld-page .ld-final { background: radial-gradient(ellipse at center, rgba(46, 80, 79, 0.4) 0%, rgba(31, 6, 6, 0.6) 60%, var(--bg, #160000) 100%) !important; }

/* PL20: native smooth scrolling misbehaves (programmatic smooth scrolls get cancelled) — we animate manually in JS (marker: klipist_sbfix) */
html { scroll-behavior: auto !important; }

/* PL21: all card/tile loglines font-weight 300 (marker: klipist_logline_weight) */
body.klipist-redesign .tile-logline,
body.klipist-redesign .mh-tile-logline,
body.klipist-redesign .gp-tile-logline,
body.klipist-redesign .gpm-tile-logline,
body.klipist-redesign .col-film-logline,
body.klipist-redesign .mc-film-logline,
body.klipist-redesign .b-more-logline,
body.klipist-redesign .mh-orig-logline,
body.klipist-redesign .original-tile .l,
body.klipist-redesign .vb-film-logline,
body.klipist-redesign .vb-film-logline-mobile,
body.klipist-redesign .fs-episode-logline,
body.klipist-redesign .collection-blurb,
body.klipist-redesign .top9-logline { font-weight: 400 !important; }

/* PL21: featured-collection hero shows the image (the 140px blur made it look like a flat gradient) — marker: klipist_cov_bgimage */
body.klipist-redesign .col-backdrop-blur.cov-bg-image { filter: saturate(1.05) brightness(0.8); opacity: 1; inset: 0; background-size: cover; background-position: center; }
body.klipist-redesign .cov-bg-image + .col-backdrop-fade { background: linear-gradient(180deg, rgba(22,0,0,0.30) 0%, rgba(22,0,0,0.55) 55%, var(--bg) 100%), linear-gradient(90deg, rgba(22,0,0,0.78) 0%, rgba(22,0,0,0.35) 45%, transparent 75%); }

/* Back-to-top button (PL21; PL28 solid Suede fill + shadow for visibility) */
.kl-to-top { position: fixed; right: 24px; bottom: 24px; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--accent, #e6c8bd); color: var(--bg, #160000); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; box-shadow: 0 6px 22px rgba(0,0,0,0.55); transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease, box-shadow .2s ease; z-index: 90; }
.kl-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.kl-to-top:hover { background: var(--accent-2, #F7E0D3); color: var(--bg, #160000); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.6); }
@media (max-width: 1024px) { .kl-to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; } }

/* PL21: header-static backdrop bleeds up under the header — overflow:clip was cutting the -84px bleed (marker: klipist_clip_margin) */
body.klipist-header-static article { overflow-clip-margin: 120px; }

/* PL21: partners/help have short heroes — fit the gradient to the hero + tighten so the gradient band isn't a big empty area (marker: klipist_pt_hp_hero) */
body.klipist-redesign .pt-page .col-backdrop, body.klipist-redesign .hp-page .col-backdrop { height: 360px; }
body.klipist-redesign .pt-page .taxo-page-head, body.klipist-redesign .hp-page .taxo-page-head { padding-top: 96px; padding-bottom: 28px; }

/* PL26: collection card = 3-up first-films covers (marker klipist_tri_covers) */
body.klipist-redesign .tile-art .kl-tri-covers, body.klipist-redesign .mh-tile-art .kl-tri-covers { position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; }
body.klipist-redesign .tile-art .kl-tri-covers .still, body.klipist-redesign .mh-tile-art .kl-tri-covers .still { position:static; inset:auto; height:100%; width:100%; border-radius:0; background-size:cover; background-position:center; }

/* PL26: Safari/WebKit gradient bleed — overflow-clip-margin is unsupported in WebKit, so the header-static backdrop bleed got clipped; let it bleed (marker klipist_safari_bleed) */
body.klipist-header-static article { overflow: visible !important; }
body.klipist-redesign .col-backdrop-blur { -webkit-transform: translateZ(0); transform: translateZ(0); }

/* PL33: installed PWA (display-mode: standalone) = app-like chrome. Hide web footer + app-store CTAs (you're already in the app; legal links live in the menu/Help page), clear the iOS status bar with safe-area inset, and contain overscroll rubber-band. Mobile WEBSITE keeps footer + badges as install funnel. marker klipist_pwa */
@media all and (display-mode: standalone) {
  body.klipist-redesign .mf, body.klipist-redesign .footer { display: none !important; }
  body.klipist-redesign .menu-stores, body.klipist-redesign .menu-stores-label { display: none !important; }
  body.klipist-redesign .mh-topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  html, body.klipist-redesign { overscroll-behavior-y: contain; }
}
html.kl-pwa body.klipist-redesign .mf, html.kl-pwa body.klipist-redesign .footer { display: none !important; }
html.kl-pwa body.klipist-redesign .menu-stores, html.kl-pwa body.klipist-redesign .menu-stores-label { display: none !important; }
html.kl-pwa body.klipist-redesign .mh-topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
html.kl-pwa, html.kl-pwa body.klipist-redesign { overscroll-behavior-y: contain; }

/* PL35 (mobile QA): abm-h2 (about mobile gallery title) had NO font rule → fell back to default; give it the editorial serif. marker klipist_qa2 */
body.klipist-redesign .abm-h2 { font-family: var(--ff-title); font-weight: 700; font-size: clamp(28px, 8vw, 36px); line-height: 1.08; letter-spacing: -0.5px; color: var(--text); margin: 0 0 12px; }
body.klipist-redesign .abm-h2 em { font-family: var(--ff-italic); font-style: italic; font-weight: 400; color: var(--accent); }
/* PL35: submissions By-the-numbers — at mobile the 4-col stat row crammed/dividers off-centre; make a clean 2x2 with a centred divider. */
@media (max-width: 820px) {
  body.klipist-redesign .sm-page .sm-numbers-band-stats { grid-template-columns: repeat(2, 1fr); column-gap: 0; row-gap: 28px; }
  body.klipist-redesign .sm-page .sm-stat { padding: 0; border-right: none; }
  body.klipist-redesign .sm-page .sm-stat:nth-child(odd) { padding-right: 20px; border-right: 1px solid rgba(230,200,189,0.14); }
  body.klipist-redesign .sm-page .sm-stat:nth-child(even) { padding-left: 20px; }
}

/* PL38: mobile SEARCH (sfm-) was a static, non-functional mockup. Show the FUNCTIONAL desktop search on the search page at mobile widths instead (klipist-search.js drives .sf-page .sf-search-input + .home-desktop-wrap .sf-results-grid), restyled responsive: stacked filter sidebar, fluid results. marker klipist_sf_mobile */
@media (max-width: 1024px) {
  body.klipist-redesign .sf-page .home-desktop-wrap { display: block !important; }
  body.klipist-redesign .sf-page .home-mobile-wrap { display: none !important; }
  body.klipist-redesign .sf-page .taxo-layout { grid-template-columns: 1fr; gap: 22px; padding: 20px 20px 80px; }
  body.klipist-redesign .sf-page .taxo-side { position: static; top: auto; }
  body.klipist-redesign .sf-page .taxo-page-head { padding-left: 20px; padding-right: 20px; }
  body.klipist-redesign .sf-page .sf-results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  body.klipist-redesign .sf-page .sf-results-grid { grid-template-columns: 1fr; }
}

/* PL40: submissions How-it-works — removed the duplicate 'Your timeline' aside; the 01-04 steps now fill the full row as a balanced 2x2 (desktop). marker klipist_sm_steps_full */
@media (min-width: 1025px) {
  body.klipist-redesign .sm-page .sm-how-grid { grid-template-columns: 1fr; gap: 0; }
  body.klipist-redesign .sm-page .sm-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 64px; }
  body.klipist-redesign .sm-page .sm-step { border-bottom: none; padding-bottom: 0; }
}

/* PL41: attribute (genres/moods/countries/languages) + director/actor pages = overview-style header (static bar) + pill nav, per design. marker klipist_w8 */
@media (max-width: 1024px) {
  body[class*="tax-video"] .mh-topbar { position: static !important; background: var(--bg, #160000) !important; }
  body.klipist-redesign .sm-page .sm-numbers-band-inner { padding-left: 20px; padding-right: 20px; }
}

/* PL43: mobile film tiles — the .still (image) div was position:static height:0 so only the gradient overlay showed. Make it fill the tile-art behind the gradient. marker klipist_mh_still */
body.klipist-redesign .home-page .mh-tile-art .still { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
body.klipist-redesign .home-page .mh-tile-art .mh-tile-gradient { z-index: 1; }
body.klipist-redesign .home-page .mh-tile-art .mh-tile-badge, body.klipist-redesign .home-page .mh-tile-art .mh-tile-title-overlay { z-index: 2; }

/* PL44: same still-fill fix for Top9 + Originals mobile tiles; close landing footer gap so the final gradient meets the footer. marker klipist_mh_still2 */
body.klipist-redesign .home-page .mh-t9-art .still, body.klipist-redesign .home-page .mh-orig-art .still { position: absolute; inset: 0; background-size: cover; background-position: center; }
body.klipist-redesign.home .mf { margin-top: 0; }

/* PL45: mobile back button on film/collection single (breadcrumb hidden on mobile). marker klipist_mback */
@media (max-width: 1024px) {
  body.klipist-redesign .kl-mback { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.14); }
  body.klipist-redesign .kl-mback:hover { background: rgba(0,0,0,0.6); }
}
@media (min-width: 1025px) { body.klipist-redesign .kl-mback { display: none; } }

/* PL46: originals mobile tile — copy (title/logline/stats) is a sibling of the art; make the tile a positioning context so the absolute copy overlays the poster. marker klipist_orig_copy */
body.klipist-redesign .home-page .mh-orig-tile { position: relative; }
body.klipist-redesign .home-page .mh-orig-copy { z-index: 3; }

/* PL49: make 3-up collection covers (kl-tri-covers) robust on EVERY page — a generic/.mh-tile-art .still{absolute} kept overriding the grid so covers stacked or collapsed. Force them into the 3-col grid everywhere. Also remove the strange decorative radial filter over mc-more covers. marker klipist_tri_global */
body.klipist-redesign .kl-tri-covers { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; z-index: 0; }
body.klipist-redesign .kl-tri-covers .still { position: static !important; inset: auto !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; border-radius: 0 !important; }
body.klipist-redesign .col-page .mc-more-art::before { display: none !important; }

/* PL51: functional mobile search — show the sfm mobile design (revert PL38 desktop-search-on-mobile) + Filters sheet styling. marker klipist_sfm_v2 */
@media (max-width: 1024px) {
  body.klipist-redesign .sf-page .home-desktop-wrap { display: none !important; }
  body.klipist-redesign .sf-page .home-mobile-wrap { display: block !important; }
}
body.klipist-redesign .sfm-sheet { position: fixed; inset: 0; z-index: 200; }
body.klipist-redesign .sfm-sheet[hidden] { display: none; }
body.klipist-redesign .sfm-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
body.klipist-redesign .sfm-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; background: var(--bg, #160000); border-top: 1px solid var(--border-strong, rgba(230,200,189,0.28)); border-radius: 18px 18px 0 0; padding: 0 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
body.klipist-redesign .sfm-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px 0 12px; background: var(--bg, #160000); }
body.klipist-redesign .sfm-sheet-title { font-family: var(--ff-header); font-weight: 700; font-size: 16px; color: var(--text); }
body.klipist-redesign .sfm-sheet-close { background: none; border: 0; color: var(--text); font-size: 30px; line-height: 1; cursor: pointer; padding: 0 4px; }
body.klipist-redesign .sfm-sheet-body .sf-side { position: static; display: block; width: auto; }
body.klipist-redesign .sfm-sheet-foot { position: sticky; bottom: 0; background: transparent; padding: 12px 0 0; pointer-events: none; }
body.klipist-redesign .sfm-sheet-apply { width: 100%; padding: 14px; border-radius: 999px; border: 0; background: var(--accent, #e6c8bd); color: var(--bg, #160000); font-family: var(--ff-header); font-weight: 700; font-size: 14px; cursor: pointer; pointer-events: auto; }

/* PL51b: .sfm-results-wrap had display:none (design only showed it via a #search-mobile-results view id we do not use) — show it; visibility is controlled by the parent .sfm-state-results. marker klipist_sfm_reswrap */
body.klipist-redesign .sf-page .sfm-results-wrap { display: block; }

/* PL51c: search page — header transparent-overlays the sfm-backdrop gradient (like landing). marker klipist_sf_backdrop */
@media (max-width: 1024px) {
  body.klipist-redesign.klipist-search.page .mh-topbar { position: absolute !important; background: none !important; }
  body.klipist-redesign.klipist-search .sf-page .sfm-pagehead { padding-top: 84px; }
}

/* PL52: drop the Search title/subtitle on mobile, start at the search box. marker klipist_sf_notitle */
@media (max-width: 1024px) {
  body.klipist-redesign .sf-page .sfm-pagehead { display: none; }
  body.klipist-redesign.klipist-search .sf-page .sfm-search-wrap { margin-top: 84px; }
}

/* PL53: mobile partner logos as images; search result tiles always fully visible (Safari reveal artifact on first tile); help mobile legal links. marker klipist_b2 */
body.klipist-redesign .smm-trusted-logo img { height: 26px; width: auto; display: block; opacity: 0.9; }
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile { opacity: 1 !important; transform: none !important; }
body.klipist-redesign .hpm-company-legal { margin-top: 10px; }
body.klipist-redesign .hpm-company-legal a { color: var(--accent); text-decoration: none; }

/* PL53b: help mobile FAQ search box — softer corners + comfortable padding. marker klipist_hpm_search */
body.klipist-redesign .hp-page .hpm-search { border-radius: 12px; padding: 13px 16px; margin-bottom: 28px; }

/* PL54: search result tiles — force the tile AND its children fully visible (Safari/Chrome showed the first tile's logline/stats faded with reserved padding; cause not reproducible in headless, defensive). marker klipist_sf_tilefix2 */
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile,
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-art,
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-gradient,
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-badge,
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-title-overlay,
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-logline,
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-stats {
  opacity: 1 !important; transform: none !important; visibility: visible !important; filter: none !important; animation: none !important;
}


/* PL55: REAL FIX for search "first tile faded / text hiding behind image".
   The mobile results grid is a FLEX COLUMN (search.css .sf-results-grid-mobile),
   but .mh-tile carries `flex: 0 0 240px` from the horizontal row scroller
   (home.css) -> in a column that becomes a fixed HEIGHT, so tall tiles overflow
   and the next tile's image overlaps the previous tile's logline/stats (Safari).
   Reset tiles to content-sized auto height. marker klipist_sf_tileflex */
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* PL56: REAL fix for search "first/top tile logline looks dim/faded".
   The result logline/stats use SEMI-TRANSPARENT text (--text-dim 0.72,
   --text-muted 0.42). The search page's .sfm-backdrop gradient is dark at
   the TOP and sits BEHIND the results, so see-through text over it reads
   dim on the top tiles (first always, more as the viewport shifts) while
   lower tiles over the normal bg read fine. Make the result text OPAQUE
   (the same colour those vars composite to over --bg #160000) so it renders
   identically everywhere regardless of the backdrop. marker klipist_sf_textsolid */
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-logline,
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-moods { color: rgb(172,144,136) !important; }
body.klipist-redesign .sf-page .sf-results-grid-mobile .mh-tile-stats { color: rgb(109,84,79) !important; }

/* PL57: TRUE root cause of search "first/top tile logline dim". The .sfm-backdrop
   gradient is position:absolute; z-index:0, but the result tiles are statically
   positioned (z auto), so the POSITIONED backdrop paints ON TOP of the static
   results and its dark gradient tints/dims them (worst at top where the gradient
   is darkest; pointer-events:none hid it from elementsFromPoint probes). Lift the
   results wrapper into its own stacking context above the backdrop. marker klipist_sf_resultsz */
body.klipist-redesign .sf-page .sfm-results-wrap { position: relative; z-index: 1; }

/* PL58: submissions "Recently selected filmmaker work" cards are now <a> to /films/; keep card styling intact. marker klipist_sub_filmlinks */
body.klipist-redesign .sm-page a.sm-film-tile,
body.klipist-redesign .sm-page a.smm-film { display: block; color: inherit; text-decoration: none; }


/* === Footer / mobile-footer typography lock (marker: klipist_footer_typelock) ===
   The shared redesigned footer (.footer) and mobile footer (.mf) render on
   EVERY page, including the Elementor / WooCommerce utility pages
   (submission-form, checkout) that do NOT carry the body.klipist-redesign
   class. On those pages the legacy Customizer "Additional CSS" — scoped with
   body:not(.klipist-redesign) — leaks its heading/paragraph typography
   (bely-display / gatwick faces, Montserrat on <p>) into the footer, so the
   footer looked different there. Re-assert the redesign footer typography,
   footer-scoped, so it matches the rest of the site regardless of body class.
   Footer-only: cannot affect page content. */
.footer .footer-col h4 {
    font-family: var(--ff-header, 'Gatwick', 'Helvetica Neue', Arial, sans-serif) !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
}
.footer .footer-brand .footer-tagline,
.mf .mf-tagline {
    font-family: var(--ff-italic, 'Cormorant Garamond', Georgia, serif) !important;
    font-style: italic !important;
    letter-spacing: normal !important;
    -webkit-font-smoothing: antialiased !important;
}
.mf .mf-app-pill,
.mf .mf-copyright,
.mf .mf-legal a {
    font-family: var(--ff-header, 'Gatwick', 'Helvetica Neue', Arial, sans-serif) !important;
}
.mf .mf-app-label { font-weight: 700 !important; }
.mf .mf-app-label small,
.footer .footer-app-label small { font-weight: 400 !important; }

/* === Attribute pages: more space between stacked mobile film cards (klipist_gpm_gap) ===
   .home-page .mh-row-scroller {gap:10px} (0,2,0) was overriding .gpm-stack, so the
   stacked cards on term pages sat too close. Win with a higher-specificity rule. */
@media (max-width: 1024px) {
  .gp-page .mh-row-scroller.gpm-stack { gap: 34px !important; }
}

/* === Mobile header bleed on listing/attribute pages (klipist_mhbleed) ===
   Desktop shows a colored .col-backdrop glow behind the header; on mobile that
   backdrop is hidden, so these pages had a flat top. Paint an equivalent warm
   top gradient on the mobile wrap (excludes home/search via the body class). */
@media (max-width: 1024px) {
  body.klipist-mhbleed .home-mobile-wrap {
    background-image: linear-gradient(180deg, rgba(139,58,58,0.45) 0%, rgba(94,40,40,0.20) 38%, rgba(22,0,0,0) 100%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 420px;
  }
}

/* === Mobile header bleed starts at the page top, behind the header (klipist_mhbleed2) ===
   The bleed was on .home-mobile-wrap which begins below the (black) header.
   Move it to the page top and make the mobile header transparent on these
   pages so the gradient bleeds through the header too. */
@media (max-width: 1024px) {
  body.klipist-mhbleed .home-mobile-wrap { background-image: none !important; }
  body.klipist-mhbleed {
    background-image: linear-gradient(180deg, rgba(139,58,58,0.50) 0%, rgba(94,40,40,0.22) 40%, rgba(22,0,0,0) 100%) !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: 100% 440px !important;
  }
  body.klipist-mhbleed .mh-topbar { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* === Mobile bleed: let the page-top gradient show through the content (klipist_mhbleed3) ===
   The content <article> has a solid bg that was covering the body gradient,
   leaving only the (outside-article) header showing it. Make the article
   transparent on these pages so the gradient bleeds through header AND content
   (body keeps the same #160000 base beneath). */
@media (max-width: 1024px) {
  body.klipist-mhbleed article { background: transparent !important; }
}

/* === Partners + Help: match About's taller desktop backdrop + teal mobile bleed (klipist_bleed_teal) === */
body.klipist-redesign .pt-page .col-backdrop,
body.klipist-redesign .hp-page .col-backdrop { height: 780px; }
@media (max-width: 1024px) {
  body.klipist-bleed-teal {
    background-image: linear-gradient(180deg, rgba(46,80,79,0.55) 0%, rgba(46,80,79,0.22) 42%, rgba(22,0,0,0) 100%) !important;
  }
}

/* === Dark document background to avoid white flash on reload/navigation (klipist_htmlbg) ===
   <html> had no background, so the blank moment during a (Progressier SW) reload
   or page navigation flashed white. Paint it the brand dark instead. */
html { background-color: #160000; }

/* Klipist icon in sidebar profile avatar (marker: klipist_menu_avatar_icon) */
.menu-profile-avatar{overflow:hidden;background:var(--bg,#160000);}
.menu-profile-avatar-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}

/* Hover-lift headroom (marker: klipist_hover_lift_clip) — the -4px tile lift on
   :is(.tile,.top9-art,...):hover was clipped at the TOP by the row scrollers'
   overflow (overflow:hidden / overflow-x:auto). Give those scrollers 8px top
   headroom and pull it back with a negative margin so layout is unchanged. */
body.klipist-redesign :is(.scroller, .mh-row-scroller, .mc-more-scroller) {
  padding-top: 8px;
  margin-top: -8px;
}

/* ═══ klipist_pwa_nav ═══════════════════════════════════════════════════
   Floating capsule bottom nav (Home · Search · My List · Menu). Shows ONLY in
   the installed PWA on mobile: html.kl-pwa (set by the PL33 standalone probe)
   + @media display-mode:standalone, gated to mobile widths. Markup partial:
   template-parts/chrome/pwa-nav.php (rendered in footer.php). Menu reuses the
   existing drawer via data-menu-open. No viewport-fit:cover added — env() has a
   0px fallback so it floats correctly in the current auto-viewport mode too. */
.kn-dock {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 60; pointer-events: none;
}
@media (max-width: 1024px) { .kn-dock { display: block; } }
@media (display-mode: standalone) and (max-width: 1024px) { .kn-dock { display: block; } }
html.kl-filtersheet-open .kn-dock { display: none !important; }

.kn-nav {
  pointer-events: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: 64px; border-radius: 20px;
  background: rgba(32, 10, 10, 0.97);
  border: 1px solid rgba(230, 200, 189, 0.26);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(230, 200, 189, 0.06), inset 0 1px 0 rgba(230, 200, 189, 0.12);
}
.kn-item {
  position: relative;
  appearance: none; -webkit-appearance: none;
  border: none; background: none; cursor: pointer; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 0;
  color: var(--text-muted, rgba(230, 200, 189, 0.52));
  -webkit-tap-highlight-color: transparent;
  transition: color .22s ease;
}
.kn-pill {
  position: absolute; top: 6px; bottom: 6px; left: 6px; right: 6px;
  border-radius: 16px; background: rgba(230, 200, 189, 0.10);
  opacity: 0; transform: scale(0.86);
  transition: opacity .24s ease, transform .24s cubic-bezier(.34, 1.56, .64, 1);
}
.kn-item.is-active { color: var(--accent, #E6C8BD); }
.kn-item.is-active .kn-pill { opacity: 1; transform: scale(1); }
.kn-ico { width: 22px; height: 22px; display: block; position: relative; transition: transform .24s cubic-bezier(.34, 1.56, .64, 1); }
.kn-ico svg { width: 100%; height: 100%; display: block; }
.kn-item.is-active .kn-ico { transform: translateY(-1px); }
.kn-label {
  position: relative;
  font-family: var(--ff-header, sans-serif);
  font-size: 10px; line-height: 1; letter-spacing: 0.03em; font-weight: 600;
  transition: opacity .22s ease;
}
.kn-item:active .kn-ico { transform: scale(0.9); }
.kn-item:active { opacity: 0.85; }
.kn-item:focus-visible { outline: none; }
.kn-item:focus-visible .kn-pill { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px rgba(230, 200, 189, 0.4); }
@media (prefers-reduced-motion: reduce) {
  .kn-pill, .kn-ico { transition: none; }
}
/* Content clearance so the floating capsule never covers the last items
   (the web footer is hidden in standalone via klipist_pwa). */
@media (max-width: 1024px) {
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
}
@media (display-mode: standalone) and (max-width: 1024px) {
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
}
/* ═══ end klipist_pwa_nav ═══ */

/* ═══ klipist_pwa_nav_fix ═══════════════════════════════════════════════
   iOS: a position:fixed element with backdrop-filter drops out during fast /
   momentum scroll (only renders when scrolled very slowly). Promote the capsule
   to its own compositing layer so it stays painted. */
/* On mobile (≤1024px = wherever the floating bottom-nav capsule shows): HIDE the
   back-to-top button — the bottom nav replaces it — and hide the header search +
   hamburger (the bottom nav already covers Search and Menu). */
@media (max-width: 1024px) {
  .kl-to-top { display: none !important; }
  .mh-topbar-icons { display: none !important; }
}
@media (display-mode: standalone) and (max-width: 1024px) {
  .kl-to-top { display: none !important; }
  .mh-topbar-icons { display: none !important; }
}
/* ═══ end klipist_pwa_nav_fix ═══ */

/* ═══ klipist_pwa_nav_fix2 — iOS: keep the capsule's compositing layer alive
   during long fast scrolls (the /films page is long enough that translateZ
   alone gets discarded; will-change pins the layer). ═══ */
.kn-nav { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
/* ═══ end klipist_pwa_nav_fix2 ═══ */

/* Elementor popups (e.g. legacy popup 9762 = old footer nav + social icons) print their
   HTML in wp_footer, but Elementor frontend CSS/JS is dequeued on redesign pages (perf),
   so the popup had no hiding CSS and leaked as raw unstyled links below the footer. Elementor
   is dequeued here so these popups cannot be triggered anyway — hide their leaked markup.
   marker klipist_hide_el_popup */
body.klipist-redesign [data-elementor-type="popup"],
body.klipist-redesign .elementor-location-popup { display: none !important; }