/* this section here is for all of the main colors. */
:root {
    --ink: #f7f0e5;
    --muted: #c9bcae;
    --paper: #211c19;
    --gold: #e2ae63;
    --line: rgba(247, 240, 229, 0.2);
}
/* this section is for the tab formatting*/
.tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    border-bottom: 2px solid #ccc;
    width: 100%;
}
.tab-button {
    flex: 1 1 0;
    min-width: 0;
    padding: clamp(0.45rem, 2vw, 0.75rem) clamp(0.4rem, 3vw, 1.25rem);
    border: none;
    background: var(--paper);
    color: var(--ink);
    font-size: clamp(0.65rem, 3.2vw, 1.1rem);
    cursor: pointer;
    white-space: nowrap;
}
.tab-button.active {
    background: var(--gold);
    color: var(--paper);
}
.tab-panel {
    display: none;
    padding: 1.5rem 0;
}
.tab-panel.active {
    display: block;
}
/* 
*** -------------------------------- ***
***this section is for the page body
*** -------------------------------- ***
*/
* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.5;
}
/*
*** -------------------------------------------------------------------------
***this section is for the hero header. I should probably rename these for header 1, 2, 3...
*** --------------------------------------------------------------------------
*/
.hero {
    min-height: 76vh;
    display: grid;
    align-items: end;
    padding: clamp(2rem, 7vw, 6rem) max(1.25rem, 7vw);
    background: linear-gradient(90deg, rgba(20, 16, 14, .80), rgba(20, 16, 14, .50)), url("/images/5.jpg") center / cover;
}
/* this section controls the stuff inside of the hero*/
.hero-content { width: 100%; max-width: 700px; margin: 0 auto; }
.eyebrow {
    color: var(--gold);
    font: 700 .78rem/1.2 Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}
/* this controls the size of the first header*/
h1 {
    margin: .75rem 0 1rem;
    font-size: clamp(2.8rem, 8vw, 6.8rem);
    line-height: .92;
    font-weight: 400;
}
/* this controls the size of the text in the intro*/
.intro { max-width: 560px; color: var(--muted); font-size: 1.15rem; }
/* this controls the information for the buttons in the main body*/
.button {
    display: inline-block;
    margin-top: 1rem;
    padding: .85rem 1.15rem;
    color: #201712;
    background: var(--gold);
    font: 700 .9rem Arial, sans-serif;
    text-decoration: none;
}
/*this controls the footer at the bottom of the page*/
footer { padding: 1.5rem max(1.25rem, 7vw); color: var(--muted); border-top: 1px solid var(--line); font: .9rem Arial, sans-serif; }
/*this will be for the welcome page*/
.welcome-page .hero {
    min-height: 76vh;
    display: grid;
    align-items: end;
    padding: clamp(2rem, 7vw, 6rem) max(1.25rem, 7vw);
    background-image: url("/images/banner");
}

.welcome-box {
    width: min(100% - 2.5rem, 900px);
    margin: 3rem auto 4rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    background: rgba(247, 240, 229, 0.04);
}
.welcome-box h2 {
    margin: 0 0 1.5rem;
    color: var(--gold);
    font-size: clamp(1.25rem, 3vw, 2rem);
    text-align: center;
}
/*this is for the dates page*/
.dates-page .hero {
    min-height: 76vh;
    display: grid;
    align-items: end;
    padding: clamp(2rem, 7vw, 6rem) max(1.25rem, 7vw);
    background-image: linear-gradient(90deg, rgba(20, 16, 14, .80), rgba(20, 16, 14, .50)), url("/images/band.jpg");
}
.dates-box {
    width: min(100% - 2.5rem, 900px);
    margin: 3rem auto 4rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    background: rgba(247, 240, 229, 0.04);
}
.dates-box h2 {
    margin: 0 0 1.5rem;
    color: var(--gold);
    font-size: clamp(1.25rem, 3vw, 2rem);
    text-align: center;
}
.dates-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.5rem, 3vw, 2rem);
}
.date-column { min-width: 0; }
.date-column h3 {
    margin: 0 0 .6rem;
    font: 700 clamp(.7rem, 2vw, 1.05rem)/1.2 Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
}
.date-column ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.date-column li {
    overflow: hidden;
    font-size: clamp(.52rem, 1.5vw, .95rem);
    line-height: 1.45;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dates-status {
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
}
/* this addresses the sizes if viewing from a phone*/
@media (max-width: 700px) {
    .hero {
        min-height: auto;
        padding: 46.2vw 1.25rem 3rem;
        background-position: center top;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    .tabs {
        gap: 0.35rem;
    }
    .tab-button {
        padding: clamp(0.4rem, 2vw, 0.65rem) clamp(0.25rem, 2vw, 0.8rem);
        font-size: clamp(0.6rem, 3.2vw, 1rem);
    }
    .dates-box {
        width: calc(100% - 1.5rem);
        margin-top: 2rem;
        padding: 1rem .45rem;
    }
    .dates-grid {
        gap: .15rem;
    }
}