/* MWG 117 — the template's assets/style.css, as delivered.
   Two edits only, so it cannot restyle the rest of the site: the template's
   '* {…}' normalize and its 'body {…}' rule are scoped to .mwg_effect117.
   Below that, byte-for-byte the template except where marked 'site theme',
   plus the site edits at the end (each one asked for). */
/* Inter 500/800 come from the site's self-hosted variable Inter (styles.css); the template's Google Fonts @import is dropped. */

/* NORMALIZE */
.mwg_effect117, .mwg_effect117 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* NORMALIZE */

.mwg_effect117 {
    background: var(--wk-canvas, #f4f3ef); /* site theme; template: #121212 */
    color: var(--wk-ink, #1a1712);          /* site theme; template: #F1F1F1 */
}
.mwg_effect117 {
    height: 100vh;
    display: grid;
    place-items: center;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    perspective: 1200px;
    font: 500 30px / 1 'Inter';
    letter-spacing: -0.04em;
}
.mwg_effect117 .title {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
}
.mwg_effect117 .stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}
.mwg_effect117 .words {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 90vw;
    pointer-events: none;
    transform: translateZ(40px);
    transform-style: preserve-3d;
}
.mwg_effect117 .word {
    grid-area: 1 / 1;
    margin: 0;
    font: 500 normal min(12vw, 140px) / 0.9 'Inter';
    text-align: center;
    will-change: transform, opacity;
    visibility: hidden;
}
.mwg_effect117 .word.is-active {
    visibility: visible;
}
.mwg_effect117 .medias {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transform-style: preserve-3d;
}
.mwg_effect117 .layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.mwg_effect117 .layer--0 {
    transform: translateZ(-160px);
}
.mwg_effect117 .layer--1 {
    transform: translateZ(0);
}
.mwg_effect117 .layer--2 {
    transform: translateZ(140px);
}
.mwg_effect117 .media {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(18vw, 160px);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0;
    display: block;
    border-radius: 0.4em;
    will-change: transform, opacity;
}
.mwg_effect117 .media-pool {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}
.mwg_effect117 .pager {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}
.mwg_effect117 .pager li {
    text-align: center;
    opacity: 0.3;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.3s;
    line-height: 1.2;
}
.mwg_effect117 .pager li:hover,
.mwg_effect117 .pager li.is-active {
    opacity: 1;
}

@media (max-width: 767px) {
    .mwg_effect117 {
        font-size: 20px;
    }
    .mwg_effect117 .media {
        width: min(28vw, 120px);
    }
    .mwg_effect117 .layer--0 {
        transform: translateZ(-80px);
    }
    .mwg_effect117 .layer--1 {
        transform: translateZ(-40px);
    }
    .mwg_effect117 .layer--2 {
        transform: translateZ(0);
    }
    .mwg_effect117 .pager {
        left: 16px;
    }
    .mwg_effect117 .word {
        font-size: 40px;
    }
}

/* ── Site edits (asked for on /portfolio/design) ───────────────────────── */

/* The pictures are the X-Acto cut-outs on transparent backgrounds: shown
   whole inside the template's square box instead of cropped to fill it. */
.mwg_effect117 .media {
    object-fit: contain;
    border-radius: 0;
}

/* A click on a collage opens the case study (mwg-117-site.js), so the
   collages have to take the pointer; the template sets none on .medias.
   The stage passes clicks through: its own plane sits in front of the back
   depth layer and would otherwise catch clicks meant for those collages.
   Empty space still lands on the section itself, so the template's own
   click (next word) is unchanged; the numbers keep their own pointer. */
.mwg_effect117 .stage {
    pointer-events: none;
}
.mwg_effect117 .media {
    pointer-events: auto;
}

/* Keep the word clear of the 1/2/3 numbers on narrow screens. The template's
   90vw box runs under the numbers below ~1000px; this only bites there. */
.mwg_effect117 .words {
    max-width: calc(100% - 104px);
}
@media (max-width: 767px) {
    .mwg_effect117 .words {
        max-width: calc(100% - 88px);
    }
}