/*
   Carnival Figures responsive mobile layer
   -----------------------------------------
   The existing desktop site remains untouched above 800px.  This file only
   supplies the compact mobile presentation and shared mobile components.
*/

.cf-mobile-shell,
.cf-mobile-footer,
.cf-mobile-project,
.cf-mobile-page-title {
    display: none;
}

@media screen and (max-width: 800px) {
    :root {
        --cf-mobile-black: #000;
        --cf-mobile-white: #f5f5f5;
        --cf-mobile-grey: #777;
        --cf-mobile-grey-bright: #b9b9b9;
        --cf-mobile-gutter: clamp(20px, 5vw, 40px);
    }

    * {
        box-sizing: border-box;
    }

    html {
        background: var(--cf-mobile-black);
        min-width: 0;
        scroll-behavior: smooth;
    }

    body,
    body#black-background,
    body#home-background {
        background: var(--cf-mobile-black) !important;
        background-image: none !important;
        color: var(--cf-mobile-white);
        font-family: "Myriad Pro", Arial, sans-serif;
        height: auto;
        min-height: 100%;
        min-width: 0;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }

    body.cf-mobile-menu-active {
        overflow: hidden;
    }

    body > #wrapper,
    #wrapper {
        height: auto;
        margin: 0 auto !important;
        min-height: 0;
        min-width: 0;
        width: 100% !important;
    }

    /* The original image navigation is preserved for desktop. */
    #header,
    #nav-project-wrapper,
    #footer,
    #footer-project,
    #footer-transp {
        display: none !important;
    }

    /* Colorbox is a desktop-only viewer. Mobile uses the responsive inline
       players and vertically stacked galleries assembled by mobile.js. */
    #colorbox,
    #cboxOverlay,
    #cboxWrapper,
    .cboxElement #colorbox {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
    }

    .cf-mobile-original-project-content {
        display: none !important;
    }

    .cf-mobile-shell {
        display: block;
        position: relative;
        z-index: 1000;
    }

    .cf-mobile-header {
        align-items: center;
        display: grid;
        grid-template-columns: 48px 1fr 48px;
        margin: 0 auto;
        max-width: 800px;
        min-height: 132px;
        padding: 30px var(--cf-mobile-gutter) 22px;
    }

    .cf-mobile-logo {
        grid-column: 2;
        justify-self: center;
    }

    .cf-mobile-logo img {
        display: block;
        height: auto;
        padding: 0;
        width: 47px;
    }

    .cf-mobile-menu-open,
    .cf-mobile-menu-close {
        appearance: none;
        background: none;
        border: 0;
        border-radius: 0;
        color: var(--cf-mobile-grey);
        cursor: pointer;
        height: 48px;
        padding: 8px;
        width: 48px;
    }

    .cf-mobile-menu-open {
        grid-column: 3;
        justify-self: end;
    }

    .cf-mobile-menu-open span,
    .cf-mobile-menu-open::before,
    .cf-mobile-menu-open::after {
        background: currentColor;
        content: "";
        display: block;
        height: 3px;
        margin: 7px 0;
        width: 34px;
    }

    .cf-mobile-menu-overlay {
        background: rgba(0, 0, 0, 0.985);
        inset: 0;
        opacity: 0;
        overflow-y: auto;
        padding: 46px var(--cf-mobile-gutter) 70px;
        pointer-events: none;
        position: fixed;
        transition: opacity 180ms ease;
        visibility: hidden;
        z-index: 1100;
    }

    .cf-mobile-menu-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .cf-mobile-menu-inner {
        margin: 0 auto;
        max-width: 620px;
    }

    .cf-mobile-menu-close {
        display: block;
        margin-left: auto;
        position: relative;
    }

    .cf-mobile-menu-close::before,
    .cf-mobile-menu-close::after {
        background: currentColor;
        content: "";
        height: 3px;
        left: 8px;
        position: absolute;
        top: 22px;
        width: 34px;
    }

    .cf-mobile-menu-close::before {
        transform: rotate(45deg);
    }

    .cf-mobile-menu-close::after {
        transform: rotate(-45deg);
    }

    .cf-mobile-nav {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin: 54px 0 72px;
    }

    .cf-mobile-nav a {
        color: var(--cf-mobile-grey);
        font-family: "Century Gothic", CenturyGothic, "Apple Gothic", Futura, Arial, sans-serif;
        font-size: clamp(20px, 4.8vw, 27px);
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

    .cf-mobile-nav a[aria-current="page"],
    .cf-mobile-nav a:hover,
    .cf-mobile-nav a:focus-visible,
    .cf-mobile-menu-open:hover,
    .cf-mobile-menu-open:focus-visible,
    .cf-mobile-menu-close:hover,
    .cf-mobile-menu-close:focus-visible {
        color: var(--cf-mobile-white);
    }

    .cf-mobile-nav a:focus-visible,
    .cf-mobile-menu-open:focus-visible,
    .cf-mobile-menu-close:focus-visible,
    .cf-mobile-footer a:focus-visible,
    .projectinfo a:focus-visible,
    .cf-mobile-video-link:focus-visible {
        outline: none;
        filter: brightness(1.45);
    }

    #content,
    #content-index,
    #content-project {
        display: block;
        float: none;
        margin: 0 auto !important;
        max-width: 800px;
        min-height: 0;
        padding: 20px var(--cf-mobile-gutter) 55px !important;
        width: 100% !important;
    }

    #content-project {
        padding-top: 10px !important;
    }

    #projects,
    #main,
    #rightpanel,
    .panel-fullwidth,
    #scrollerwrapper,
    #scrollerwrapper-mainpage,
    #scrollerwrapper-project-about,
    #scrollerwrapper-large,
    #about-box,
    #about-box-dark,
    #about-box-left,
    #about-box-left-wider {
        float: none !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    #about-box,
    #about-box-dark,
    #about-box-left,
    #about-box-left-wider {
        background: none !important;
        margin-bottom: 38px !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    #about-box::before,
    #about-box-dark::before,
    #about-box-left::before,
    #about-box-left-wider::before {
        display: none;
    }

    .work-category-nav {
        display: none !important;
    }

    .cf-mobile-page-title,
    .cf-mobile-project-title {
        color: var(--cf-mobile-white);
        display: block;
        font-size: clamp(23px, 5vw, 34px);
        font-weight: 700;
        letter-spacing: 0.025em;
        line-height: 1.2;
        margin: 24px 0 44px;
        text-align: center;
        text-transform: uppercase;
    }

    #projects .projectbox,
    .projectbox {
        display: block;
        float: none !important;
        height: auto !important;
        margin: 0 0 54px !important;
        min-height: 0;
        padding: 0 !important;
        width: 100% !important;
    }

    .projectinfo {
        color: #ededed;
        float: none !important;
        font-size: clamp(18px, 4.3vw, 24px);
        font-weight: 700;
        height: auto !important;
        line-height: 1.3;
        margin: 0 !important;
        min-width: 0;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .projectinfo a {
        color: #ededed;
        display: block;
        text-decoration: none;
    }

    .projectinfo a:hover,
    .projectinfo a:focus-visible {
        color: var(--cf-mobile-grey-bright);
    }

    .projectinfo img,
    #projects .projectbox img {
        background: #0b0b0b;
        display: block;
        float: none !important;
        height: auto !important;
        margin: 0 0 17px !important;
        max-width: none !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .projectinfo br {
        display: none;
    }

    .clear,
    .clearfix {
        height: auto;
    }

    #projects > .clearfix {
        display: none;
    }

    #about-box p,
    #about-box-dark p,
    #about-box-left p,
    #about-box-left-wider p,
    .cf-mobile-project-copy,
    .cf-mobile-project-copy p,
    .cf-mobile-project-copy li {
        color: #8d8d8d !important;
        font-size: clamp(16px, 3.8vw, 20px) !important;
        line-height: 1.58 !important;
    }

    .cf-mobile-project {
        display: block;
    }

    .cf-mobile-video {
        aspect-ratio: 16 / 9;
        background: #090909;
        margin: 0 0 42px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .cf-mobile-video iframe,
    .cf-mobile-video video {
        border: 0;
        height: 100%;
        inset: 0;
        max-width: 100%;
        position: absolute;
        width: 100%;
    }

    .cf-mobile-video-link {
        align-items: center;
        background: #151515;
        color: var(--cf-mobile-white);
        display: flex;
        font-size: 18px;
        font-weight: 700;
        justify-content: center;
        min-height: 120px;
        padding: 24px;
        text-align: center;
        text-decoration: none;
    }

    .cf-mobile-project-copy {
        margin: 0 0 58px;
    }

    .cf-mobile-project-copy h1,
    .cf-mobile-project-copy h2,
    .cf-mobile-project-copy h3,
    .cf-mobile-project-copy h4,
    .cf-mobile-gallery-title {
        color: var(--cf-mobile-white) !important;
        font-size: clamp(20px, 4.5vw, 27px) !important;
        line-height: 1.3 !important;
        margin: 44px 0 18px !important;
        text-transform: uppercase;
    }

    .cf-mobile-project-copy img {
        height: auto !important;
        max-width: 100% !important;
    }

    #content img,
    #content-index img,
    #content-project img {
        height: auto;
        max-width: 100%;
    }

    .cf-mobile-gallery {
        display: grid;
        gap: 38px;
        margin-top: 68px;
    }

    .cf-mobile-gallery-title {
        margin: 0 0 -6px !important;
        text-align: center;
    }

    .cf-mobile-gallery figure {
        margin: 0;
    }

    .cf-mobile-gallery img {
        display: block;
        height: auto;
        width: 100%;
    }

    .cf-mobile-loading {
        color: var(--cf-mobile-grey);
        font-size: 14px;
        margin: 0 0 36px;
        text-align: center;
    }

    /* Laundry Monsters retains the local site's exact list, one clip per row. */
    .lm-styles h4 {
        color: var(--cf-mobile-grey-bright);
        font-size: 17px;
        line-height: 1.5;
        margin: 0 0 42px;
    }

    .lm-styles .projectinfo a.cf-mobile-lm-playing {
        color: var(--cf-mobile-grey-bright);
    }

    .lm-styles .projectinfo .cf-mobile-video {
        margin-bottom: 17px;
    }

    .cf-mobile-poster-image {
        background: #090909;
        margin-bottom: 17px;
        overflow: hidden;
        position: relative;
    }

    .projectinfo .cf-mobile-poster-image img {
        margin-bottom: 0 !important;
        opacity: 0.84;
    }

    .cf-mobile-play {
        align-items: center;
        background: #e50921;
        border-radius: 16px;
        color: #fff;
        display: flex;
        font-family: Arial, sans-serif;
        font-size: 30px;
        height: 58px;
        justify-content: center;
        left: 50%;
        padding-left: 4px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 84px;
    }

    .cf-mobile-lm-section {
        border-top: 1px solid #171717;
        margin-top: 76px;
        padding-top: 72px;
    }

    .cf-mobile-lm-section-title {
        color: var(--cf-mobile-white);
        font-size: clamp(22px, 4.8vw, 30px);
        font-weight: 700;
        letter-spacing: 0.02em;
        margin: 0 0 38px;
        text-align: center;
        text-transform: uppercase;
    }

    .cf-mobile-lm-section .projectbox:last-child {
        margin-bottom: 0 !important;
    }

    .cf-mobile-lm-section > img,
    .cf-mobile-lm-section p > img {
        display: block;
        height: auto !important;
        margin-left: auto;
        margin-right: auto;
        max-width: 100% !important;
    }

    .cf-mobile-characters {
        border-top: 1px solid #171717;
        margin-top: 76px;
        padding-top: 72px;
    }

    .cf-mobile-character {
        border-top: 1px solid #171717;
        margin-top: 74px;
        padding-top: 70px;
    }

    .cf-mobile-character:first-of-type {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .cf-mobile-character-title {
        color: var(--cf-mobile-white);
        font-size: clamp(23px, 5vw, 33px);
        font-weight: 700;
        letter-spacing: 0.02em;
        margin: 0 0 32px;
        text-align: center;
        text-transform: uppercase;
    }

    .cf-mobile-character-lead {
        margin: 0 0 38px;
    }

    .cf-mobile-character-lead img,
    .cf-mobile-character-gallery img {
        display: block;
        height: auto;
        width: 100%;
    }

    .cf-mobile-character-copy {
        color: #8d8d8d;
        font-size: clamp(16px, 3.8vw, 20px);
        line-height: 1.58;
        margin-bottom: 48px;
    }

    .cf-mobile-character-copy p {
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    .cf-mobile-character-gallery {
        display: grid;
        gap: 38px;
    }

    .cf-mobile-character-gallery figure {
        margin: 0;
    }

    .cf-mobile-character-gallery figcaption {
        color: #777;
        font-size: 14px;
        line-height: 1.4;
        margin-top: 12px;
    }

    .cf-mobile-lm-links {
        align-items: center;
        border-top: 1px solid #171717;
        display: flex;
        flex-direction: column;
        gap: 28px;
        margin-top: 76px;
        padding-top: 72px;
    }

    .cf-mobile-lm-links a {
        color: var(--cf-mobile-grey);
        font-family: "Century Gothic", CenturyGothic, "Apple Gothic", Futura, Arial, sans-serif;
        font-size: clamp(18px, 4.3vw, 24px);
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

    .cf-mobile-lm-links a:hover,
    .cf-mobile-lm-links a:focus-visible {
        color: var(--cf-mobile-white);
        outline: none;
    }

    .cf-mobile-footer {
        color: #656565;
        display: block;
        margin: 0 auto;
        max-width: 800px;
        padding: 75px var(--cf-mobile-gutter) 70px;
        text-align: center;
    }

    .cf-mobile-back-to-top {
        color: var(--cf-mobile-grey);
        display: inline-block;
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 58px;
        text-decoration: none;
    }

    .cf-mobile-social {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        justify-content: center;
        margin: 0 auto 42px;
    }

    .cf-mobile-social a {
        color: var(--cf-mobile-grey);
        font-size: 22px;
        font-weight: 700;
        min-width: 22px;
        text-decoration: none;
    }

    .cf-mobile-social a:hover,
    .cf-mobile-social a:focus-visible {
        color: var(--cf-mobile-grey-bright);
    }

    .cf-mobile-footer-copy {
        color: #656565;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.55;
        margin: 0 auto;
        max-width: 680px;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        .cf-mobile-menu-overlay {
            transition: none;
        }
    }
}