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

/* ==========================================================================
   MARK ROBERTS MAGICIAN
   PRIVACY + COOKIE POLICY
   ========================================================================== */


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

.mr-legal-hero {

    position:
    relative;

    min-height:
    570px;

    display:
    flex;

    align-items:
    flex-end;

    overflow:
    hidden;

    isolation:
    isolate;

    background:

    radial-gradient(
        circle at 75% 35%,
        rgba(193,18,31,.19),
        transparent 31%
    ),

    linear-gradient(
        135deg,
        #060607,
        #111113 60%,
        #090909
    );

}


.mr-legal-hero::before {

    content:
    "";

    position:
    absolute;

    inset:
    0;

    z-index:
    -2;

    background-image:

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

    background-size:
    100% 80px;

}


.mr-legal-glow {

    position:
    absolute;

    width:
    min(70vw,900px);

    aspect-ratio:
    1;

    right:
    -25%;

    top:
    -50%;

    border:
    1px solid rgba(193,18,31,.12);

    border-radius:
    50%;

}


.mr-legal-hero-content {

    position:
    relative;

    max-width:
    900px;

    padding:
    calc(var(--header-h) + 110px)
    0
    75px;

}


.mr-legal-hero h1 {

    margin-top:
    14px;

}


.mr-legal-hero h1 span {

    display:
    block;

}


.mr-legal-hero p {

    max-width:
    720px;

    margin-top:
    24px;

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

    font-size:
    clamp(1rem,1.5vw,1.2rem);

}


.mr-legal-meta {

    display:
    flex;

    align-items:
    center;

    gap:
    12px;

    margin-top:
    30px;

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

    font-size:
    .78rem;

}


.mr-legal-meta strong {

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

}



/* =====================================================
LAYOUT
===================================================== */

.mr-legal-section {

    position:
    relative;

}


.mr-legal-layout {

    display:
    grid;

    grid-template-columns:
    260px
    minmax(0,850px);

    justify-content:
    space-between;

    align-items:
    start;

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

}



/* =====================================================
SIDEBAR
===================================================== */

.mr-legal-sidebar {

    position:
    relative;

}


.mr-legal-sidebar-inner {

    position:
    sticky;

    top:
    calc(
        var(--header-h)
        + 38px
    );

}


.mr-legal-sidebar-title {

    display:
    block;

    margin-bottom:
    18px;

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

    font-size:
    .7rem;

    font-weight:
    700;

    letter-spacing:
    .14em;

    text-transform:
    uppercase;

}


.mr-legal-nav {

    display:
    grid;

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

}


.mr-legal-nav a {

    position:
    relative;

    padding:
    11px 0;

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

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

    font-size:
    .84rem;

    transition:

    color .2s ease,
    padding-left .2s ease;

}


.mr-legal-nav a:hover {

    padding-left:
    8px;

    color:
    var(--red);

}



/* =====================================================
POLICY CONTENT
===================================================== */

.mr-legal-content {

    min-width:
    0;

}


.mr-legal-block {

    position:
    relative;

    padding:
    0 0 65px;

    margin:
    0 0 65px;

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

    scroll-margin-top:
    calc(
        var(--header-h)
        + 30px
    );

}


.mr-legal-block:last-child {

    margin-bottom:
    0;

}


.mr-legal-number {

    display:
    inline-block;

    margin-bottom:
    15px;

    color:
    var(--red);

    font-family:
    var(--serif);

    font-size:
    .8rem;

    font-weight:
    700;

    letter-spacing:
    .12em;

}


.mr-legal-block h2 {

    max-width:
    760px;

    font-size:
    clamp(1.9rem,3.2vw,3rem);

}


.mr-legal-block h3 {

    margin-top:
    35px;

    font-family:
    var(--sans);

    font-size:
    1.02rem;

    font-weight:
    700;

}


.mr-legal-block p {

    max-width:
    800px;

    margin-top:
    20px;

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

    line-height:
    1.8;

}


.mr-legal-block ul {

    margin:
    24px 0 0;

    padding:
    0;

    list-style:
    none;

}


.mr-legal-block li {

    position:
    relative;

    padding:
    8px 0
    8px 24px;

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

    line-height:
    1.65;

}


.mr-legal-block li::before {

    content:
    "";

    position:
    absolute;

    left:
    0;

    top:
    19px;

    width:
    7px;

    height:
    7px;

    border-radius:
    50%;

    background:
    var(--red);

}


.mr-legal-block p a {

    color:
    var(--red);

    font-weight:
    700;

    border-bottom:
    1px solid rgba(193,18,31,.25);

}



/* =====================================================
CALLOUT
===================================================== */

.mr-legal-callout {

    margin-top:
    30px;

    padding:
    25px 28px;

    border:
    1px solid rgba(193,18,31,.15);

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

    border-radius:
    0 14px 14px 0;

    background:
    rgba(193,18,31,.035);

}


.mr-legal-callout strong {

    display:
    block;

    font-family:
    var(--serif);

    font-size:
    1.05rem;

}


.mr-legal-callout p {

    margin-top:
    8px;

}



/* =====================================================
CONTACT BLOCK
===================================================== */

.mr-legal-contact {

    display:
    grid;

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

    gap:
    15px;

    margin-top:
    30px;

}


.mr-legal-contact > div {

    padding:
    22px;

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

    border-radius:
    14px;

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

}


.mr-legal-contact span {

    display:
    block;

    margin-bottom:
    5px;

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

    font-size:
    .7rem;

    font-weight:
    700;

    letter-spacing:
    .12em;

    text-transform:
    uppercase;

}


.mr-legal-contact a {

    color:
    var(--ink);

    font-weight:
    700;

    word-break:
    break-word;

}


.mr-legal-contact a:hover {

    color:
    var(--red);

}



/* =====================================================
COOKIE TABLE
===================================================== */

.mr-cookie-table-wrapper {

    margin-top:
    32px;

    overflow-x:
    auto;

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

    border-radius:
    15px;

}


.mr-cookie-table {

    width:
    100%;

    border-collapse:
    collapse;

    min-width:
    650px;

}


.mr-cookie-table th,
.mr-cookie-table td {

    padding:
    18px 20px;

    text-align:
    left;

    vertical-align:
    top;

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

}


.mr-cookie-table th {

    background:
    #111113;

    color:
    #fff;

    font-size:
    .72rem;

    letter-spacing:
    .1em;

    text-transform:
    uppercase;

}


.mr-cookie-table td {

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

    font-size:
    .88rem;

    line-height:
    1.6;

}


.mr-cookie-table
tr:last-child td {

    border-bottom:
    0;

}



/* =====================================================
BOTTOM CTA
===================================================== */

.mr-legal-cta {

    position:
    relative;

    overflow:
    hidden;

    padding:
    clamp(90px,12vw,155px)
    0;

    background:

    radial-gradient(
        circle at 50% 30%,
        rgba(193,18,31,.17),
        transparent 32%
    ),

    #090909;

}


.mr-legal-cta-content {

    max-width:
    780px;

    margin:
    0 auto;

    text-align:
    center;

}


.mr-legal-cta-content h2 {

    margin-top:
    14px;

}


.mr-legal-cta-content p {

    max-width:
    650px;

    margin:
    22px auto 0;

    color:
    var(--muted);

}


.mr-legal-cta-content
.button {

    margin-top:
    30px;

}



/* =====================================================
TABLET
===================================================== */

@media
(max-width:950px) {

    .mr-legal-layout {

        grid-template-columns:
        1fr;

    }


    .mr-legal-sidebar-inner {

        position:
        static;

    }


    .mr-legal-nav {

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

        gap:
        0 25px;

    }

}



/* =====================================================
MOBILE
===================================================== */

@media
(max-width:620px) {

    .mr-legal-hero {

        min-height:
        520px;

    }


    .mr-legal-hero-content {

        padding:
        145px 0 60px;

    }


    .mr-legal-nav {

        grid-template-columns:
        1fr;

    }


    .mr-legal-block {

        padding-bottom:
        45px;

        margin-bottom:
        45px;

    }


    .mr-legal-contact {

        grid-template-columns:
        1fr;

    }


    .mr-cookie-table {

        min-width:
        0;

    }


    .mr-cookie-table thead {

        display:
        none;

    }


    .mr-cookie-table,
    .mr-cookie-table tbody,
    .mr-cookie-table tr,
    .mr-cookie-table td {

        display:
        block;

        width:
        100%;

    }


    .mr-cookie-table tr {

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

    }


    .mr-cookie-table tr:last-child {

        border-bottom:
        0;

    }


    .mr-cookie-table td {

        position:
        relative;

        padding:
        15px 18px
        15px 125px;

        border:
        0;

    }


    .mr-cookie-table td::before {

        content:
        attr(data-label);

        position:
        absolute;

        left:
        18px;

        top:
        15px;

        width:
        95px;

        color:
        var(--ink);

        font-size:
        .7rem;

        font-weight:
        700;

        text-transform:
        uppercase;

    }

}