main {
    position:relative;
    background-color:#000;
    overflow-x:clip;
}

.hero {
    position: relative;
    background-color:#fff;
    border-right:solid var(--padding) #000;
    height:calc(var(--padding_x2) + 36px);
}

.nigel {
    position:fixed;
    height:100vh;
    top:0;
    right:var(--padding);
}

.tour-dates {
    padding:5rem var(--padding_x2);
    width:75%;
    overflow-x:clip;

    & h1 {
        position: relative;
        z-index:2;
        font-size:clamp(4rem,18cqw,18cqw);
        margin:0 0 2rem 0;
    }

    & .line1 {
        position:absolute;
        right: var(--padding);
        width: var(--padding);
        height:100%;
        top:0;
        border-left:1px solid var(--orange);
        border-right:1px solid var(--orange);
    }

    & .show-type {
        position: relative;
        display:grid;
        background-color:#0006;
        padding:0.5rem;
        

        & .month-title {
            font-size:3rem;
            color:#fff;
            margin:0;
        }
    }

    & .month-group {
        display:grid;
        gap:var(--padding);
        align-items:start;
    }

    & .shows {
        margin-bottom:var(--padding);
    }

    & .tour-date {
        display:grid;
        grid-template-columns: 90px 1fr 225px;
        gap:0.25rem 1rem;
        align-items: start;
        padding-block:0.5rem;
        border-bottom:1px solid var(--orange);
        color:#fff;

        &:last-of-type {
            border-bottom:none;
        }

        & p {
            line-height:1;
            margin:0;
        }

        & .datebox {
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:0.5rem;
            align-items: center;

            & .dotw {
                font-size:1rem;
                letter-spacing:0.4em;
                text-transform: uppercase;
                text-align:Center;
                color:var(--orange);
            }
            
            & .day {
                text-align:Center;
                font-size:4rem;
                line-height:0.7;
            }

            & .month {
                font-size:1.8rem;
                text-transform: uppercase;
                text-align:Center;
            }
        }

        & .country {
            display:none;
        }

        & .city {
            display:inline;
            font-size:2rem;
            line-height:0.7;
            color:var(--orange);
            margin-right:0.25rem;
        }

        & .venue {
            display:inline;
            font-size:2rem;
            line-height:0.7;
        }

        & .venue-main {
            display:Grid;
        }

        & .contact-info {
            & p {
                font-size: 1rem;
                opacity:0.5;
            }
        }

        & .btn {
            display:block;
            width:100%;
            text-align: center;
            color:#000;
            background-color:#fff;
            padding:1rem 2rem;
            text-decoration: none;

            &:hover {
                background-color:var(--orange);
            }

            &.sold-out,
            &.soon {
                background-color:#666;
            }
        }

    }
}

footer > * {
    position:Relative;
    z-index:3;
}

@media screen and (max-width:1100px){
    .tour-dates {
        width:85%;
        padding-inline:var(--padding);
    }

    .nigel {
        right:calc(var(--padding) * -1);
    }
}

@media screen and (max-width:800px){
    .tour-dates .tour-date {
        grid-template-columns: 100px 1fr;

        & .buy {
            grid-column:2/-1;
        }
    }

    .nigel {
        width:100%;
        height:100%;
        object-fit:cover;
        object-position: right;
        scale:-1 1;
        right:unset;
        left:70vw;
        z-index:2;
    }
}

@media screen and (max-width:600px){
    .tour-dates {
        width:100%;
        & .tour-date {
            & p.venue,
            & p.city {
                display:block;
                clear:left;
                width:100%;
            }
        }

        & .show-type {
            z-index:3;
            padding:0;
            & .month-title {
                font-size:2rem;
            }
        }

    }
    
    .nigel {
        left:60vw;
    }
}