@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   MARK ROBERTS MAGICIAN
   LIVE SHOWS
   ========================================================================== */


/* =====================================================
HERO
===================================================== */

.mr-shows-hero {

    position:
    relative;

    min-height:
    max(760px,100svh);

    display:
    flex;

    align-items:
    flex-end;

    overflow:
    hidden;

    isolation:
    isolate;

}


.mr-shows-hero-media {

    position:
    absolute;

    inset:
    0;

    z-index:
    -4;

}


.mr-shows-hero-media img {

    width:
    100%;

    height:
    100%;

    object-fit:
    cover;

    object-position:
    center 32%;

}


.mr-shows-hero-overlay {

    position:
    absolute;

    inset:
    0;

    z-index:
    -3;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.72) 43%,
            rgba(0,0,0,.22) 78%
        ),

        linear-gradient(
            0deg,
            rgba(8,8,9,.94),
            transparent 55%
        );

}


.mr-shows-hero-lines {

    position:
    absolute;

    inset:
    0;

    z-index:
    -2;

    opacity:
    .15;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
    100% 85px;

}


.mr-shows-hero-content {

    max-width:
    940px;

    padding:
    calc(var(--header-h) + 140px)
    0
    90px;

}


.mr-shows-hero h1 {

    margin-top:
    15px;

}


.mr-shows-hero h1 span {

    display:
    block;

}


.mr-shows-hero p {

    max-width:
    740px;

    margin-top:
    27px;

    color:
    rgba(255,255,255,.72);

    font-size:
    clamp(1.05rem,1.7vw,1.25rem);

}


.mr-shows-hero
.button-row {

    margin-top:
    32px;

}


.mr-shows-hero-meta {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    10px 24px;

    margin-top:
    46px;

    color:
    rgba(255,255,255,.54);

    font-size:
    .76rem;

    font-weight:
    600;

    letter-spacing:
    .11em;

    text-transform:
    uppercase;

}


.mr-shows-hero-meta
span:not(:last-child)::after {

    content:
    "•";

    margin-left:
    24px;

    color:
    var(--red);

}



/* =====================================================
INTRO
===================================================== */

.mr-shows-intro-grid {

    display:
    grid;

    grid-template-columns:
    minmax(0,.9fr)
    minmax(0,1.1fr);

    gap:
    clamp(50px,8vw,110px);

    align-items:
    start;

}


.mr-shows-intro-heading h2 {

    margin-top:
    14px;

}


.mr-shows-intro-copy {

    max-width:
    700px;

}


.mr-shows-intro-copy p {

    color:
    rgba(21,21,21,.7);

    font-size:
    clamp(1rem,1.4vw,1.12rem);

    line-height:
    1.8;

}


.mr-shows-intro-copy p + p {

    margin-top:
    20px;

}



/* =====================================================
EXPERIENCE
===================================================== */

.mr-shows-experience-grid {

    display:
    grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:
    18px;

}


.mr-shows-experience-card {

    min-height:
    330px;

    padding:
    30px;

    border:
    1px solid var(--border-dark);

    border-radius:
    var(--radius);

    background:
    rgba(255,255,255,.025);

}


.mr-shows-experience-card > span {

    display:
    block;

    margin-bottom:
    60px;

    color:
    var(--red-bright);

    font-family:
    var(--serif);

    font-weight:
    700;

}


.mr-shows-experience-card p {

    margin-top:
    15px;

    color:
    var(--muted);

}



/* =====================================================
SHOW FORMATS
===================================================== */

.mr-show-format-list {

    display:
    grid;

    gap:
    clamp(80px,10vw,140px);

}


.mr-show-format {

    display:
    grid;

    grid-template-columns:
    minmax(0,.95fr)
    minmax(0,1.05fr);

    gap:
    clamp(45px,7vw,100px);

    align-items:
    center;

}


.mr-show-format:nth-child(even)
.mr-show-format-image {

    order:
    2;

}


.mr-show-format-image {

    overflow:
    hidden;

    border-radius:
    var(--radius);

    box-shadow:
    var(--shadow);

}


.mr-show-format-image img {

    aspect-ratio:
    4/5;

    object-fit:
    cover;

}


.mr-show-number {

    display:
    block;

    margin-bottom:
    22px;

    color:
    rgba(21,21,21,.16);

    font-family:
    var(--serif);

    font-size:
    clamp(3.5rem,7vw,7rem);

    font-weight:
    700;

    line-height:
    .8;

}


.mr-show-format-content h2 {

    margin-top:
    12px;

}


.mr-show-format-content > p {

    margin-top:
    22px;

    color:
    rgba(21,21,21,.69);

    line-height:
    1.8;

}


.mr-show-best {

    margin-top:
    30px;

    padding-top:
    25px;

    border-top:
    1px solid var(--border-light);

}


.mr-show-best > span {

    display:
    block;

    margin-bottom:
    13px;

    color:
    rgba(21,21,21,.45);

    font-size:
    .7rem;

    font-weight:
    700;

    letter-spacing:
    .12em;

    text-transform:
    uppercase;

}


.mr-show-best ul {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    8px;

    margin:
    0;

    padding:
    0;

    list-style:
    none;

}


.mr-show-best li {

    padding:
    8px 12px;

    border:
    1px solid var(--border-light);

    border-radius:
    999px;

    font-size:
    .8rem;

}



/* =====================================================
FEATURE
===================================================== */

.mr-shows-feature {

    position:
    relative;

    min-height:
    720px;

    display:
    flex;

    align-items:
    center;

    overflow:
    hidden;

    isolation:
    isolate;

}


.mr-shows-feature-media {

    position:
    absolute;

    inset:
    0;

    z-index:
    -3;

}


.mr-shows-feature-media img {

    width:
    100%;

    height:
    100%;

    object-fit:
    cover;

}


.mr-shows-feature-overlay {

    position:
    absolute;

    inset:
    0;

    z-index:
    -2;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.9),
            rgba(0,0,0,.48) 60%,
            rgba(0,0,0,.5)
        ),

        linear-gradient(
            0deg,
            rgba(0,0,0,.65),
            transparent 50%
        );

}


.mr-shows-feature-content {

    max-width:
    780px;

    padding:
    110px 0;

}


.mr-shows-feature-content h2 {

    margin-top:
    14px;

}


.mr-shows-feature-content p {

    max-width:
    650px;

    margin-top:
    22px;

    color:
    rgba(255,255,255,.72);

}


.mr-shows-feature-content blockquote {

    margin:
    38px 0 0;

    padding-left:
    24px;

    border-left:
    3px solid var(--red);

    font-family:
    var(--serif);

    font-size:
    clamp(1.3rem,2.3vw,2rem);

    line-height:
    1.45;

}



/* =====================================================
EVENT TYPES
===================================================== */

.mr-shows-event-grid {

    display:
    grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:
    18px;

}


.mr-shows-event-card {

    min-height:
    300px;

    padding:
    30px;

    border:
    1px solid var(--border-dark);

    border-radius:
    var(--radius);

    background:
    rgba(255,255,255,.025);

}


.mr-shows-event-card > span {

    display:
    block;


    margin-bottom:
    55px;

    color:
    var(--red-bright);

    font-family:
    var(--serif);

}


.mr-shows-event-card p {

    margin-top:
    14px;

    color:
    var(--muted);

}



/* =====================================================
TECHNICAL
===================================================== */

.mr-shows-technical-grid {

    display:
    grid;

    grid-template-columns:
    minmax(0,.85fr)
    minmax(0,1.15fr);

    gap:
    clamp(50px,8vw,110px);

}


.mr-shows-technical-copy h2 {

    margin-top:
    14px;

}


.mr-shows-technical-copy p {

    margin-top:
    22px;

    color:
    rgba(21,21,21,.69);

}


.mr-shows-technical-list {

    display:
    grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:
    16px;

}


.mr-shows-technical-list > div {

    min-height:
    240px;

    padding:
    27px;

    border:
    1px solid var(--border-light);

    border-radius:
    var(--radius);

}


.mr-shows-technical-list span {

    display:
    block;

    margin-bottom:
    42px;

    color:
    var(--red);

    font-family:
    var(--serif);

}


.mr-shows-technical-list strong {

    display:
    block;

    font-family:
    var(--serif);

    font-size:
    1.15rem;

}


.mr-shows-technical-list p {

    margin-top:
    11px;

    color:
    rgba(21,21,21,.63);

}



/* =====================================================
PROCESS
===================================================== */

.mr-shows-process-grid {

    display:
    grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:
    18px;

}


.mr-shows-process-item {

    min-height:
    310px;

    padding:
    30px;

    border:
    1px solid var(--border-dark);

    border-radius:
    var(--radius);

}


.mr-shows-process-item > span {

    display:
    block;

    margin-bottom:
    58px;

    color:
    var(--red-bright);

    font-family:
    var(--serif);

}


.mr-shows-process-item p {

    margin-top:
    14px;

    color:
    var(--muted);

}



/* =====================================================
FAQ
===================================================== */

.mr-shows-faq-grid {

    display:
    grid;

    grid-template-columns:
    minmax(0,.7fr)
    minmax(0,1.3fr);

    gap:
    clamp(45px,8vw,110px);

}


.mr-shows-faq-intro h2 {

    margin-top:
    14px;

}


.mr-shows-faq-intro p {

    margin-top:
    18px;

    color:
    rgba(21,21,21,.64);

}



/* =====================================================
FINAL
===================================================== */

.mr-shows-final {

    position:
    relative;

    overflow:
    hidden;

    isolation:
    isolate;

    padding:
    clamp(110px,14vw,190px)
    0;

    background:
    #080809;

}


.mr-shows-final-glow {

    position:
    absolute;

    z-index:
    -1;

    width:
    min(85vw,950px);

    aspect-ratio:
    1;

    left:
    50%;

    top:
    50%;

    transform:
    translate(-50%,-50%);

    background:

        radial-gradient(
            circle,
            rgba(193,18,31,.2),
            transparent 60%
        );

}


.mr-shows-final-content {

    max-width:
    850px;

    margin:
    auto;

    text-align:
    center;

}


.mr-shows-final h2 {

    margin-top:
    14px;

}


.mr-shows-final h2 span {

    display:
    block;

}


.mr-shows-final p {

    max-width:
    680px;

    margin:
    24px auto 0;

    color:
    var(--muted);

}


.mr-shows-final .button {

    margin-top:
    32px;

}



/* =====================================================
RESPONSIVE
===================================================== */

@media
(max-width:1050px) {

    .mr-shows-experience-grid,
    .mr-shows-event-grid,
    .mr-shows-process-grid {

        grid-template-columns:
        repeat(2,1fr);

    }

}



@media
(max-width:850px) {

    .mr-shows-intro-grid,
    .mr-show-format,
    .mr-shows-technical-grid,
    .mr-shows-faq-grid {

        grid-template-columns:
        1fr;

    }


    .mr-show-format:nth-child(even)
    .mr-show-format-image {

        order:
        0;

    }

}



@media
(max-width:620px) {

    .mr-shows-hero {

        min-height:
        720px;

    }


    .mr-shows-hero-media img {

        object-position:
        62% center;

    }


    .mr-shows-hero-content {

        padding:
        150px 0 70px;

    }


    .mr-shows-hero-meta {

        gap:
        8px 12px;

    }


    .mr-shows-hero-meta
    span:not(:last-child)::after {

        margin-left:
        12px;

    }


    .mr-shows-experience-grid,
    .mr-shows-event-grid,
    .mr-shows-process-grid,
    .mr-shows-technical-list {

        grid-template-columns:
        1fr;

    }


    .mr-shows-experience-card,
    .mr-shows-event-card,
    .mr-shows-process-item {

        min-height:
        250px;

    }


    .mr-shows-feature {

        min-height:
        620px;

    }


    .mr-show-format-list {

        gap:
        80px;

    }

}