{{- $c := site.Data.content -}}
<div class="curtain">
    <section class="hero" id="top" aria-labelledby="hero-h">
      <div class="hero-media"><img src="{{ ($c.curtain.img_1_image | relURL) }}" width="1600" height="1067" alt="{{ $c.curtain.img_1_alt }}" fetchpriority="high"></div>
      <div class="hero-dim"></div>
      <div class="hero-in">
        <div class="hero-row">
          <div>
            <p class="hero-lead">{{ $c.curtain.p_2 }}</p>
            <div class="hero-btns">
              <a class="btn berry" href="#book">{{ $c.curtain.text_3 }} <svg class="arr" width="20" height="20" aria-hidden="true"><use href="#i-arrow" /></svg></a>
              <a class="btn ghost" href="#how">{{ $c.curtain.a_4 }}</a>
            </div>
          </div>
          <a class="badge" href="#book" aria-label="Free 15-minute intro call: book it">
            <svg class="sunbg" aria-hidden="true"><use href="#i-sun" /></svg>
            <svg class="ring" viewBox="0 0 120 120" aria-hidden="true"><defs><path id="ring-path" d="M60 60m-45 0a45 45 0 1 1 90 0a45 45 0 1 1-90 0" /></defs><text><textPath href="#ring-path" textLength="276" lengthAdjust="spacing">Free 15-minute intro call • Free 15-minute intro call •</textPath></text></svg>
            <svg class="heart" aria-hidden="true"><use href="#i-heart" /></svg>
          </a>
        </div>
        <h1 class="giant" id="hero-h"><span class="sr">{{ $c.curtain.span_5 }}</span><span class="word" aria-hidden="true"><span style="--i:0">{{ $c.curtain.span_6 }}</span><span style="--i:1">{{ $c.curtain.span_7 }}</span><span style="--i:2">{{ $c.curtain.span_8 }}</span><span style="--i:3">{{ $c.curtain.span_9 }}</span><span style="--i:4">{{ $c.curtain.span_10 }}</span><span style="--i:5">{{ $c.curtain.span_11 }}</span><span style="--i:6">{{ $c.curtain.span_12 }}</span><span class="dot" style="--i:7">.</span></span></h1>
      </div>
    </section>

    <section class="about sheet" id="practice" aria-labelledby="about-h">
      <div class="shape s-sun" data-speed="-.12" style="right:4%;top:70px;width:clamp(70px,9vw,130px);aspect-ratio:1;fill:var(--sun)"><svg aria-hidden="true" style="--dur:8s"><use href="#i-sun" /></svg></div>
      <div class="shape" data-speed=".16" style="left:-30px;top:44%;width:clamp(80px,9vw,140px);aspect-ratio:110/200;color:var(--fern)"><svg aria-hidden="true" style="--dur:6s"><use href="#i-fern" /></svg></div>
      <div class="shape s-blob" data-speed=".08" style="right:-40px;bottom:16%;width:clamp(120px,13vw,200px);aspect-ratio:160/120;fill:var(--blush)"><svg aria-hidden="true" style="--dur:9s"><use href="#i-blob" /></svg></div>
      <div class="g4">
        <h2 class="label" id="about-h">{{ $c.curtain.h2_13 }}</h2>
        <p class="statement rv">{{ $c.curtain.text_14 }} <span class="hl">{{ $c.curtain.text_15 }}<svg class="squiggle" viewBox="0 0 300 20" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M3 12C28 3 46 18 74 10s48-8 74 1 50 9 76-1 50-8 73 2" /></svg></span>.</p>
      </div>
      <div class="about-media">
        <figure class="ph door rv" data-speed="-.06"><img src="{{ ($c.curtain.img_16_image | relURL) }}" width="1024" height="1536" loading="lazy" alt="{{ $c.curtain.img_16_alt }}"></figure>
        <figure class="ph nook rv" style="--d:.1s"><img src="{{ ($c.curtain.img_17_image | relURL) }}" width="1600" height="1067" loading="lazy" alt="{{ $c.curtain.img_17_alt }}"></figure>
        <div class="about-text rv" style="--d:.2s">
          <p>{{ $c.curtain.p_18_html | safeHTML }}</p>
          <p>{{ $c.curtain.p_19_html | safeHTML }}</p>
          <p>{{ $c.curtain.p_20_html | safeHTML }}</p>
        </div>
      </div>
      <ul class="facts">
        <li class="rv">{{ $c.curtain.li_21_html | safeHTML }}</li>
        <li class="rv" style="--d:.08s">{{ $c.curtain.li_22_html | safeHTML }}</li>
        <li class="rv" style="--d:.16s">{{ $c.curtain.li_23_html | safeHTML }}</li>
        <li class="rv" style="--d:.24s">{{ $c.curtain.li_24_html | safeHTML }}</li>
      </ul>
    </section>
  </div>