/*==================================================
    ??? page
    "I Write Music by Day. I Sell Cars by... Also Day."
    Typography borrows the homepage's voice: a Great
    Vibes cursive flourish for the punchline, uppercase
    tracked Inter for labels/nav, and Special Elite
    (typewriter) for body copy — echoing the hand-drawn
    hero artwork's own lettering.
==================================================*/

.mystery-page-body{

    background-image:url("../assets/images/mystery-bg.jpg");

}


.mystery-page{

    max-width:900px;
    margin:70px auto 0;
    padding:20px 32px 0;
    text-align:center;

}


.mystery-subtitle{

    font-family:"Inter",sans-serif;
    font-weight:400;
    font-size:14px;
    letter-spacing:5px;
    text-transform:uppercase;
    color:rgba(45,39,35,.6);
    margin-bottom:22px;

}


.mystery-title{

    margin:0;

}


.mystery-title .line1{

    display:block;
    font-family:"Special Elite",monospace;
    font-weight:400;
    font-size:19px;
    letter-spacing:1px;
    color:rgba(45,39,35,.8);
    margin-bottom:14px;

}


.mystery-title .line2{

    display:block;
    font-family:"Great Vibes",cursive;
    font-weight:400;
    font-size:58px;
    line-height:1.2;
    color:#2d2723;
    white-space:nowrap;

}


.mystery-title .cars-emphasis{

    display:inline-block;
    font-size:1.65em;
    line-height:.6;
    vertical-align:-.1em;
    margin:0 .03em;

}


.mystery-tagline{

    margin:22px 0 0;
    font-family:"Special Elite",monospace;
    font-size:15px;
    letter-spacing:.5px;
    line-height:1.9;
    color:rgba(45,39,35,.75);

}


/*======================================
    One-Stop Auto Services
======================================*/

.auto-section{

    max-width:1000px;
    margin:60px auto 130px;
    padding:0 32px;

}


.auto-heading{

    font-family:"Inter",sans-serif;
    font-weight:500;
    font-size:16px;
    letter-spacing:4px;
    text-transform:uppercase;
    text-align:center;
    color:#2d2723;
    margin-bottom:44px;

}


.auto-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:rgba(45,39,35,.2);
    border:1px solid rgba(45,39,35,.2);

}


.auto-card{

    background:rgba(235,222,209,.55);
    padding:34px 32px;

}


.auto-card-label{

    font-family:"Inter",sans-serif;
    font-size:12px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:rgba(45,39,35,.55);
    margin-bottom:10px;

}


.auto-card-text{

    font-family:"Special Elite",monospace;
    font-size:16px;
    color:#2d2723;
    line-height:1.7;

}


/*======================================
    Responsive
======================================*/

@media (max-width:640px){

    .mystery-title .line2{
        font-size:34px;
        white-space:normal;
    }

    .auto-grid{
        grid-template-columns:1fr;
    }

    .mystery-page{
        margin-top:40px;
    }

}