{{- $c := site.Data.content -}}
<a class="skip" href="#projects">{{ $c.header.a_1 }}</a>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <symbol id="wordmark" viewBox="0 0 98 26"><path d="M2 24 12 2l10 22M30 2v13a8 8 0 0 0 16 0V2M54 2v22h12M70 24 80 2l10 22" fill="none" stroke="currentColor" stroke-width="2.2" /></symbol>
  <symbol id="i-phone" viewBox="0 0 24 24"><path fill="currentColor" d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z" /></symbol>
</svg>
<header>
  <div class="hbar">
    <div class="c1">
      <button class="burger" type="button" aria-label="Menu" aria-expanded="false" aria-controls="side" data-burger><span></span><span></span><span></span></button>
      <span class="slogan">{{ $c.header.span_2 }}</span>
      <button class="about-btn" type="button" aria-label="About the studio" aria-expanded="false" aria-controls="about" data-about-btn><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 2v12M2 8h12" /></svg></button>
    </div>
    <div class="c2"><a class="logo" href="#top" aria-label="AULA, home"><svg aria-hidden="true"><use href="#wordmark" /></svg></a></div>
    <div class="c3">
      <a class="pill" href="#contact">{{ $c.header.a_3 }}</a>
      <a class="phone" href="tel:+15550170433">{{ $c.header.a_4 }}</a>
    </div>
  </div>
  <nav class="side" id="side" aria-label="Main" inert>
    <a href="#about" data-open-about>{{ $c.header.a_5 }}</a>
    <button class="caret" type="button" aria-expanded="false" aria-controls="sub-projects" data-sub>{{ $c.header.button_6 }}</button>
    <div class="sub" id="sub-projects"><a href="#projects">{{ $c.header.a_7 }}</a><a href="#projects">{{ $c.header.a_8 }}</a><a href="#projects">{{ $c.header.a_9 }}</a><a href="#projects">{{ $c.header.a_10 }}</a></div>
    <a href="#contact" data-pick="design project">{{ $c.header.a_11 }}</a>
    <a href="#contact">{{ $c.header.a_12 }}</a>
    <a href="#contact" data-pick="furnishing">{{ $c.header.a_13 }}</a>
    <a href="#contact">{{ $c.header.a_14 }}</a>
  </nav>
  <section class="about" id="about" aria-label="About the studio" inert>
    <h1>{{ $c.header.h1_15 }}</h1>
    <p>{{ $c.header.p_16 }}</p>
    <p>{{ $c.header.p_17_html | safeHTML }}</p>
  </section>
</header>
<div class="shade" data-shade></div>