:root{
  --cream:#FBF7F2;
  --choc:#4A1E24;
  --berry:#B1121B;
  --cocoa:#7A3A3F;
  --border:#E9D9D2;
  --white:#ffffff;
  --radius:22px;
  --shadow:0 18px 45px rgba(74,30,36,.10);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--cream);
  color:var(--choc);
  line-height:1.55;
}

a{text-decoration:none;color:inherit}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:22px;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.brand img{height:56px}

nav a{
  font-size:13px;
  margin-left:12px;
  padding:8px 10px;
  border-radius:999px;
  color:rgba(74,30,36,.75);
}

nav a:hover{
  background:#fff;
  border:1px solid var(--border);
}

.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  margin-bottom:20px;
}

h1{font-size:40px;margin:0 0 12px}
h2{font-size:24px;margin:0 0 12px}
h3{color:var(--berry)}

.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:600;
}

.btnPrimary{
  background:linear-gradient(135deg, rgba(177,18,27,.15), rgba(74,30,36,.05));
  border-color:rgba(177,18,27,.35);
}

footer{
  text-align:center;
  font-size:12px;
  color:rgba(74,30,36,.65);
  margin-top:40px;
}
