Footer 03

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="footer_component">
  <div class="footer_top">
    <div class="footer_lead">
      <p class="footer_eyebrow">Maison Aurelle — Est. 1987</p>
      <h2 class="footer_title">
        <span class="footer_title_accent">kept.</span>
      </h2>
    </div>
    <a class="footer_cta" href="#newsletter">Join the atelier list</a>
  </div>
  <div class="footer_rule"></div>
  <nav class="footer_nav">
    <ul class="footer_col">
      <li class="footer_col_head">Collections</li>
      <li class="footer_link_item">
        <a class="footer_link" href="#tableware">Tableware</a>
      </li>
      <li class="footer_link_item">
        <a class="footer_link" href="#lighting">Lighting</a>
      </li>
      <li class="footer_link_item">
        <a class="footer_link" href="#textiles">Textiles</a>
      </li>
    </ul>
    <ul class="footer_col">
      <li class="footer_col_head">Maison</li>
      <li class="footer_link_item">
        <a class="footer_link" href="#story">Our Story</a>
      </li>
      <li class="footer_link_item">
        <a class="footer_link" href="#craft">The Craft</a>
      </li>
      <li class="footer_link_item">
        <a class="footer_link" href="#stockists">Stockists</a>
      </li>
    </ul>
    <ul class="footer_col">
      <li class="footer_col_head">Connect</li>
      <li class="footer_link_item">
        <a class="footer_link" href="#instagram">Instagram</a>
      </li>
      <li class="footer_link_item">
        <a class="footer_link" href="#journal">Journal</a>
      </li>
      <li class="footer_link_item">
        <a class="footer_link" href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
  <div class="footer_bottom">
    <p class="footer_copy">© 2026 Maison Aurelle — Made in France</p>
    <div class="footer_meta">
      <a class="footer_meta_link" href="#privacy">Privacy</a>
      <a class="footer_meta_link" href="#terms">Terms</a>
      <a class="footer_meta_link" href="#cookies">Cookies</a>
    </div>
  </div>
</section>

<style>
.footer_component {
  width:100%;
  background:#faf8f4;
  padding:7rem 6vw 3rem 6vw;
  box-sizing:border-box;
}

.footer_top {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:3rem;
  padding-bottom:3.5rem;
}

.footer_lead {
  max-width:40rem;
}

.footer_eyebrow {
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.7rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:#a67c52;
  margin:0 0 1.4rem 0;
}

.footer_title {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(2.4rem,5vw,4.2rem);
  line-height:1.02;
  color:#1a1712;
  margin:0;
}

.footer_title_accent {
  font-style:italic;
  color:#a67c52;
}

.footer_cta {
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#1a1712;
  text-decoration:none;
  border-bottom:1px solid #a67c52;
  padding-bottom:0.5rem;
  transition:color 0.3s ease;
}

.footer_rule {
  width:100%;
  height:1px;
  background:#ddd6ca;
  border:none;
}

.footer_nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:3rem;
  padding-top:3rem;
}

.footer_col {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}

.footer_col_head {
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.65rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#a67c52;
  margin-bottom:0.4rem;
}

.footer_link_item {
  list-style:none;
}

.footer_link {
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.9rem;
  color:#3b352c;
  text-decoration:none;
  transition:color 0.3s ease;
}

.footer_bottom {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-top:3.5rem;
  margin-top:2.5rem;
  border-top:1px solid #ddd6ca;
}

.footer_copy {
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.68rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8a8175;
  margin:0;
}

.footer_meta {
  display:flex;
  gap:1.8rem;
}

.footer_meta_link {
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.68rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8a8175;
  text-decoration:none;
  transition:color 0.3s ease;
}
</style>