Navbar 03

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<nav class="nav03_component">
  <a class="nav03_brand" href="#">
    <span class="nav03_brand_accent">.field</span>
  </a>
  <ul class="nav03_links">
    <li class="nav03_item">
      <a class="nav03_link" href="#work">Work</a>
    </li>
    <li class="nav03_item">
      <a class="nav03_link" href="#studio">Studio</a>
    </li>
    <li class="nav03_item">
      <a class="nav03_link" href="#journal">Journal</a>
    </li>
    <li class="nav03_item">
      <a class="nav03_link_contact" href="#contact">Contact</a>
    </li>
  </ul>
</nav>

<style>
.nav03_component {
  width:100%;
  background:#ffffff;
  border-bottom:1px solid #e7e9e6;
  padding:22px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}

.nav03_brand {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:#101410;
  text-decoration:none;
  line-height:1;
  display:inline-flex;
  align-items:baseline;
}

.nav03_brand_accent {
  color:#0f4c3a;
}

.nav03_links {
  display:flex;
  align-items:center;
  gap:38px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav03_item {
  display:inline-flex;
}

.nav03_link {
  font-family:'SFMono-Regular',ui-monospace,'Roboto Mono',Menlo,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:#3a3f38;
  text-decoration:none;
  transition:color 0.2s ease;
}

.nav03_link_contact {
  font-family:'SFMono-Regular',ui-monospace,'Roboto Mono',Menlo,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:#0f4c3a;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1.5px;
  transition:opacity 0.2s ease;
}
</style>