:root {
--bg: #FFFAF2;
--cream: #FFF1D6;
--wine: #75070F;
--rose: #EFC6C6;
--soft: #9B3A40;
color-scheme: light;
box-sizing: border-box;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}

html {
scroll-padding-top: env(safe-area-inset-top, 0px);
}

*, *:before, *:after {
box-sizing: inherit;
}

body {
margin: 0;
background: var(--bg);
color: var(--wine);
font: 14px/1.6 Inter, Arial, sans-serif;
}

h1, h2, h3, .logo {
font-family: Fraunces, Georgia, serif;
margin: 0;
}

a {
color: inherit;
}

header {
background: var(--cream);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 27px 37px;
}

.logo {
font-size: 48px;
font-weight: 700;
text-decoration: none;
line-height: 1.1;
display: block;
}

.tag {
font: 500 16px Inter;
letter-spacing: .2em;
text-transform: uppercase;
display: block;
}

nav {
display: flex;
gap: 32px;
align-items: center;
font-size: 20px;
}

nav a {
text-decoration: none;
}

nav a.on {
text-decoration: underline;
}

nav svg, .ig svg {
width: 29px;
height: 29px;
}

.page:not(.on) {
display: none;
}

.page.on {
display: block;
}

.band {
background: var(--wine);
color: #fff;
}

.hero {
background: var(--cream) center 35%/cover no-repeat;
min-height: max(calc(100vh - 130px), 60vw);
min-height: max(calc(100svh - 130px), 60vw);
flex-direction: column;
justify-content: center;
padding: 64px 8vw;
}

.hero.on {
display: flex;
}

.hero h1 {
font-size: clamp(38px, 8vw, 92px);
line-height: 1;
font-weight: 700;
}

.hero p {
font: 400 clamp(20px, 2.6vw, 28px)/1.4 Fraunces, serif;
max-width: 26em;
margin: 24px 0 32px;
}

.btn {
display: inline-block;
background: var(--wine);
color: #fff;
border: 0;
padding: 12px 28px;
font: 500 13px Inter;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
align-self: flex-start;
}

.btn:focus-visible, input:focus-visible, textarea:focus-visible, nav a:focus-visible {
outline: 2px solid var(--rose);
outline-offset: 2px;
}

.title {
font-size: clamp(36px, 5vw, 52px);
text-align: center;
padding: 42px 16px;
font-weight: 700;
}

.split {
display: grid;
grid-template-columns: 1fr 1fr;
}

.split > * {
min-height: 340px;
}

.split img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.txt {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 8%;
gap: 14px;
}

.txt p {
margin: 0;
max-width: 34em;
}

.txt h2 {
font-size: clamp(28px, 3.4vw, 40px);
}

.menu {
max-width: 1040px;
margin: 0 auto;
padding: 0 20px 60px;
text-align: center;
}

.menu .intro {
color: var(--soft);
font-weight: 600;
font-size: 16px;
margin: 0 0 6px;
}

.menu h2 {
font-size: 24px;
margin-top: 44px;
}

.menu .sub {
color: var(--soft);
font-size: 12px;
max-width: 50em;
margin: 4px auto 20px;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 22px;
text-align: center;
}

.card {
background: var(--cream);
border: 1px solid var(--wine);
border-radius: 46px;
padding: 12px 12px 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 34px;
}

.card h3 {
font-size: 15px;
margin-top: 6px;
}

.card p {
margin: 0;
font-size: 12px;
}

.badge {
background: var(--rose);
border-radius: 99px;
padding: 1px 12px;
font-size: 11px;
}

.price {
font-weight: 600;
}

form {
display: flex;
flex-direction: column;
gap: 6px;
padding: 36px 8%;
font-size: 12px;
}

label {
margin-top: 12px;
}

input[type=text], input[type=email], input[type=tel], textarea {
width: 100%;
background: transparent;
border: 1px solid rgba(255, 255, 255, .45);
color: #fff;
padding: 10px;
font: inherit;
font-size: 13px;
}

.radios {
display: flex;
gap: 22px;
flex-wrap: wrap;
}

.radios label {
margin: 0;
display: flex;
gap: 7px;
align-items: center;
}

.send {
background: var(--bg);
color: var(--wine);
border: 0;
padding: 11px;
margin-top: 20px;
font: inherit;
cursor: pointer;
}

.legal {
max-width: 900px;
margin: 0 auto;
padding: 40px 24px 70px;
font-size: 12px;
color: #fff;
}

.legal h2 {
font: 600 13px Inter;
margin: 26px 0 8px;
}

.legal ul {
margin: 0;
padding-left: 22px;
}

.legal-wrap {
background: var(--wine);
}

.legal-wrap .title {
color:#fff2db;
text-align: left;
max-width: 900px;
margin: 0 auto;
padding: 42px 24px 0;
}

footer {
background: var(--cream);
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
gap: 24px;
align-items: start;
padding: 26px 22px 16px;
font-size: 12px;
}

footer h4 {
font: 400 12px Inter;
margin: 0 0 10px;
text-align: center;
}

footer .logo {
font-size: 20px;
}

footer .ig svg {
width: 18px;
height: 18px;
}

footer p {
margin: 6px 0 0;
}

.c {
text-align: center;
}

.hrs {
display: grid;
grid-template-columns: auto auto;
gap: 2px 14px;
justify-content: center;
}

.copy {
grid-column: 1/-1;
font-size: 11px;
}

.fbtn {
padding: 12px 20px;
}

@media(max-width: 760px) {
header {
justify-content: center;
text-align: center;
padding: 18px 14px;
}
.logo {
font-size: 36px;
}
.tag {
font-size: 10.5px;
letter-spacing: .12em;
}
nav {
gap: 10px 18px;
flex-wrap: wrap;
font-size: 16px;
justify-content: center;
}
.hero {
padding: 48px 6vw;
background-position: 50% center;
}
.split > * {
min-height: 240px;
}
.txt {
padding: 32px 7%;
}
form {
padding: 28px 6%;
}
.menu {
padding: 0 14px 50px;
}
.split {
grid-template-columns: 1fr;
}
footer {
grid-template-columns: 1fr;
}
.fbtn {
justify-self: start;
}