:root {
  --cream: #F5F0E8;
  --sand: #E8DDC8;
  --clay: #C4A882;
  --bark: #7A5C3A;
  --charcoal: #1E1A16;
  --terra: #B8956A;
  --mid: #2F2A25;
}

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

body {
  font-family:'DM Sans',sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  line-height:1.6
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.8rem 6%;
  background:var(--cream);
  border-bottom:1px solid var(--sand)
}

.logo-wrap {
  display:flex;
  align-items:center;
  gap:1.1rem;
  text-decoration:none
}

.logo-circle {
  width:68px;
  height:68px;
  background:var(--clay);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

.logo-js {
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;
  font-weight:600;
  color:var(--charcoal)
}

.logo-text .main {
  font-family:'Cormorant Garamond',serif;
  font-size:1.85rem;
  font-weight:600;
  text-transform:uppercase;
  color:var(--charcoal)
}

.page-hero {
  background:var(--clay);
  padding:4rem 6%;
  color:var(--charcoal);
  text-align:center
}

.page-hero h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:3rem;
  margin-bottom:1rem
}

.sitemap-container {
  padding:4rem 6%;
  max-width:1200px;
  margin:0 auto
}

.sitemap-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:3rem
}

.sitemap-group h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem;
  border-bottom:2px solid var(--terra);
  padding-bottom:.5rem;
  margin-bottom:1.5rem;
  color:var(--bark)
}

.sitemap-group h3 {
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:1.5rem 0 .8rem;
  color:var(--mid)
}

.sitemap-group ul {
  list-style:none
}

.sitemap-group li {
  margin-bottom:.6rem
}

.sitemap-group a {
  color:var(--charcoal);
  text-decoration:none;
  font-size:.95rem;
  transition:color .2s
}

.sitemap-group a:hover {
  color:var(--terra);
  text-decoration:underline
}

footer {
  background:var(--charcoal);
  padding:3rem 6%;
  color:rgba(255,255,255,.4);
  text-align:center;
  font-size:.8rem
}

footer a {
  color:var(--sand);
  text-decoration:none;
  margin:0 10px
}