* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
    --ink:#e1151c;                   
    --text:#2a2a2a;                  
    --bg:#f7f4e9;                    
    --line:#e9ded3;                  
    --shadow:0 10px 28px rgba(0,0,0,.08);
    --radius:24px;                   
}

body{
    background: var(--bg);
    font-family: "Archivo Narrow", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    color: var(--ink);
    line-height: 1.4;
}
.site-header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:2rem;
    padding:.9rem 1.75rem;
    border-bottom:2px solid var(--ink);
    background:var(--bg);
    position:sticky;
    top:0;
    z-index:20;
    font-family: "Inria Sans", sans-serif;
    font-style: bold;
}

.brand img{
    height:30px;
    display:block;
}

.site-nav{
    display:flex;
    gap:1.75rem;
    font-size:.95rem;
    text-transform:lowercase;
    letter-spacing:.06em;
}

.site-nav a{
    color:#8c8c8c;
    text-decoration:none;
    font-weight:600;
}

.site-nav a.is-active,
.site-nav a:hover{
    color:var(--ink);
}
.wrap{
    width:min(1180px, 92vw);
    margin: 0 auto;
}

.home-main{
    padding-bottom: 4rem;
}

.hero{
    padding: 2.5rem 0 3.5rem;
}

.hero-grid{
    display:grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items:center;
}

.hero-media{
    margin:0;
}

.hero-frame{
    background:#fff;
    border:14px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:1rem;
}

.hero-frame img{
    display:block;
    width:100%;
    height:auto;
}

.hero-copy{
    color:var(--text);
}

.hero-title{
    font-family: "Varela Round", sans-serif;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size: clamp(2.4rem, 2.1rem + 2.4vw, 3.6rem);
    color:var(--ink);
    margin-bottom:1.5rem;
}

.hero-lede{
    font-weight:600;
    margin-bottom:.75rem;
}

.hero-copy p{
    margin:.4rem 0;
}

.band{
    background: var(--ink);
    color:#fff;
    padding: 3rem 0;
    margin-bottom: 3rem;
}

.band-inner{
    text-align:center;
}

.band-title{
    font-family: "Varela Round", sans-serif;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
    margin-bottom: 1.25rem;
}

.band-text{
    max-width: 520px;
    margin: 0 auto;
    font-size:1.05rem;
}

.drinks{
    margin-top: 0;
}

.drinks-frame{
    margin:0 auto;
    background:#fff;
    border:0;
    border-radius: 0;
}

.drinks-frame img{
    display:block;
    width:100%;
    height:auto;
    box-shadow: var(--shadow);
}

.site-footer{
    text-align:center;
    color:#8c8c8c;
    padding:2.5rem 1rem;
    border-top:1px solid var(--line);
}

@media (max-width: 900px){
    .hero-grid{
    grid-template-columns: 1fr;
    gap:2rem;
    }

.hero{
    padding: 1.75rem 0 2.75rem;
    }

.hero-copy{
    text-align:left;
    }
}

@media (max-width: 560px){
.site-header{
    padding:.8rem 1.1rem;
    gap:1.25rem;
    }

.site-nav{
    gap:1.2rem;
    font-size:.88rem;
    }

.hero-frame{
    border-width:10px;
    border-radius:18px;
    }
}

.site-footer{
    text-align:center; color:#8c8c8c; padding:2.5rem 1rem;
    border-top:1px solid var(--line);
    margin-top: 3rem;
}