/* =========================
COMMON
========================= */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
Arial,
sans-serif;
color: #111;
background: #f7f6f2;
}

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

/* =========================
HEADER
========================= */

.header {
height: 80px;
padding: 0 5vw;

display: flex;
align-items: center;
justify-content: space-between;

background: #f7f6f2;
border-bottom: 1px solid #ddd;
}

.logo {
font-size: 15px;
font-weight: 800;
line-height: 0.9;
letter-spacing: 1px;
}

.logo span {
font-weight: 400;
}

.nav {
display: flex;
gap: 28px;
}

.nav a {
font-size: 11px;
letter-spacing: 1.5px;
}

.nav a:hover {
opacity: 0.6;
}

.menu-button {
display: none;

border: 0;
background: none;

font-size: 11px;
letter-spacing: 1px;
cursor: pointer;
}

/* =========================
FOOTER
========================= */

.footer {
padding: 70px 5vw;

background: #111;
color: white;

text-align: center;
}

.footer-logo {
font-size: 28px;
font-weight: 800;
line-height: 0.9;
letter-spacing: 2px;
}

.footer-logo span {
font-weight: 400;
}

.footer p {
margin: 30px 0;

font-size: 11px;
color: #aaa;
}

.footer-nav {
display: flex;
justify-content: center;
gap: 24px;

margin: 30px 0;

flex-wrap: wrap;
}

.footer-nav a {
font-size: 10px;
letter-spacing: 1.5px;
}

.footer-nav a:hover {
opacity: 0.6;
}

.footer small {
font-size: 9px;
color: #666;
}

.footer-legal {
  display: flex;
  justify-content: center;
  gap: 24px;

  margin: 20px 0 30px;

  flex-wrap: wrap;
}

.footer-legal a {
  font-size: 10px;
  letter-spacing: 1px;
  color: #aaa;
}

.footer-legal a:hover {
  color: #fff;
}

/* =========================
MOBILE
========================= */

@media (max-width: 768px) {

.header {
height: 65px;
}

.nav {
display: none;
}

.menu-button {
display: block;
}

.footer-nav {
gap: 16px;
}

}