{{- $c := hugo.Data.content -}}
<section class="section wrap" id="work" aria-labelledby="w-h">
    <header class="section-head"><span class="note note--ink">{{ $c.work.span_1 }}</span><span class="note">{{ $c.work.span_2 }}</span></header>
    <h2 class="work__intro lead" id="w-h" data-reveal="up">{{ $c.work.h2_3 }}</h2>
    <div class="ws" data-work-stage>
      <div class="ws__count" aria-hidden="true"><span class="ws__n" data-ws-n>{{ $c.work.span_4 }}</span><span class="ws__of outline-text">{{ $c.work.span_5 }}</span></div>
      <div class="ws__stages note" aria-hidden="true">
        <ol><li data-ws-stage><span>{{ $c.work.span_6 }}</span><b>{{ $c.work.b_7 }}</b><i></i></li><li data-ws-stage><span>{{ $c.work.span_8 }}</span><b>{{ $c.work.b_9 }}</b><i></i></li><li data-ws-stage><span>{{ $c.work.span_10 }}</span><b>{{ $c.work.b_11 }}</b><i></i></li></ol>
        <div class="ws__rail"><i data-ws-dot></i><i data-ws-dot></i><i data-ws-dot></i></div>
      </div>

      <article class="ws__item" data-ws-item="angle">
        <div class="ws__text">
          <div class="ws__meta"><span class="note">{{ $c.work.span_12 }}</span><span class="note">{{ $c.work.span_13 }}</span></div>
          <h3 class="h3 ws__title">{{ $c.work.h3_14 }}</h3>
          <p class="ws__client note">{{ $c.work.p_15 }}</p>
          <p class="ws__summary">{{ $c.work.p_16 }}</p>
          <div class="ws__actions"><button type="button" class="btn btn--ghost" data-ws-try hidden>{{ $c.work.button_17_html | safeHTML }}</button></div>
        </div>
        <div class="ws__art" aria-hidden="true">
          <img class="ws__photo" data-b-wipe src="{{ ($c.work.img_18_image | relURL) }}" width="800" height="500" alt loading="lazy">
          <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
            <g class="plot">
              <path class="wire" pathLength="1" data-p-draw d="M60 440 300 60h420" />
              <path class="guide" d="M60 440h300" />
              <path class="wire" pathLength="1" data-p-draw d="M60 440a90 90 0 0 1 84-60" />
              <text x="160" y="420" class="lbl lbl--a" data-p-in>22°</text>
              <text x="310" y="48" class="lbl lbl--a" data-p-in>shelf angle · construction</text>
              <path d="M420 300h150v110h-150z" class="wire" pathLength="1" />
              <path d="M590 300h150v110h-150z" class="wire" pathLength="1" />
              <text x="420" y="290" class="lbl" data-p-in data-b-dim>slide · w 50%</text>
              <text x="590" y="290" class="lbl" data-p-in data-b-dim>next · last 1/12</text>
            </g>
            <g class="live" data-live>
              <rect x="0" y="0" width="800" height="500" class="veil" data-live-clip />
              <rect x="48" y="440" width="220" height="3" class="track" />
              <rect x="48" y="440" width="73.3" height="3" class="track-on" data-ws-progress />
              <text x="290" y="447" class="lbl lbl--light" data-ws-counter>01 / 03</text>
            </g>
          </svg>
        </div>
      </article>

      <article class="ws__item" data-ws-item="names">
        <div class="ws__text">
          <div class="ws__meta"><span class="note">{{ $c.work.span_19 }}</span><span class="note">{{ $c.work.span_20 }}</span></div>
          <h3 class="h3 ws__title">{{ $c.work.h3_21 }}</h3>
          <p class="ws__client note">{{ $c.work.p_22 }}</p>
          <p class="ws__summary">{{ $c.work.p_23 }}</p>
          <div class="ws__actions"><button type="button" class="btn btn--ghost" data-ws-try hidden>{{ $c.work.button_24_html | safeHTML }}</button></div>
        </div>
        <div class="ws__art" aria-hidden="true">
          <img class="ws__photo" data-b-wipe src="{{ ($c.work.img_25_image | relURL) }}" width="800" height="500" alt loading="lazy">
          <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
            <g class="plot">
              <path d="M40 60h225v160h-225z" class="wire" pathLength="1" />
              <path d="M285 60h225v160h-225z" class="wire" pathLength="1" />
              <path d="M530 60h225v160h-225z" class="wire" pathLength="1" />
              <text x="40" y="248" class="lbl lbl--a" data-p-in data-b-dim>DSC_2210.jpg</text>
              <text x="285" y="248" class="lbl lbl--a" data-p-in data-b-dim>DSC_2211.jpg</text>
              <text x="530" y="248" class="lbl lbl--a" data-p-in data-b-dim>DSC_2212.jpg</text>
              <text x="40" y="400" class="lbl lbl--a" data-p-in>search data · product page · image model</text>
              <text x="40" y="428" class="lbl lbl--a" data-p-in>→ file name · alt · tags</text>
            </g>
            <g class="live" data-live>
              <rect x="0" y="0" width="800" height="500" class="veil" data-live-clip />
              <rect x="40" y="400" width="420" height="64" rx="8" class="chip" />
              <text x="58" y="426" class="lbl lbl--ink">file name</text>
              <text x="58" y="450" class="lbl lbl--ink lbl--lg" data-ws-f="name">speckled-stoneware-mug-front.webp</text>
            </g>
          </svg>
        </div>
      </article>

      <article class="ws__item" data-ws-item="relief">
        <div class="ws__text">
          <div class="ws__meta"><span class="note">{{ $c.work.span_26 }}</span><span class="note">{{ $c.work.span_27 }}</span></div>
          <h3 class="h3 ws__title">{{ $c.work.h3_28 }}</h3>
          <p class="ws__client note">{{ $c.work.p_29 }}</p>
          <p class="ws__summary">{{ $c.work.p_30 }}</p>
          <div class="ws__actions"><a class="btn" href="#contact">{{ $c.work.a_31_html | safeHTML }}</a></div>
        </div>
        <div class="ws__art" aria-hidden="true">
          <img class="ws__photo" data-b-wipe src="{{ ($c.work.img_32_image | relURL) }}" width="800" height="500" alt loading="lazy">
          <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
            <g class="plot">
              <path d="M230 130h340v200h-340z" class="wire" pathLength="1" />
              <text x="230" y="118" class="lbl lbl--a" data-p-in data-b-dim>route · 14.2 km · +860 m</text>
              <text x="570" y="354" text-anchor="end" class="lbl lbl--a" data-p-in data-b-dim>rev. 2025</text>
            </g>
            <g class="live" data-live>
              <rect x="0" y="0" width="800" height="500" class="veil" data-live-clip />
              <path class="hill" data-ws-hill d="M0 0" /><path class="hill" data-ws-hill d="M0 0" /><path class="hill" data-ws-hill d="M0 0" /><path class="hill hill--a" data-ws-hill d="M0 0" /><path class="hill" data-ws-hill d="M0 0" /><path class="hill" data-ws-hill d="M0 0" /><path class="hill" data-ws-hill d="M0 0" /><path class="hill" data-ws-hill d="M0 0" /><path class="hill" data-ws-hill d="M0 0" />
              <text x="40" y="470" class="lbl lbl--light">Lighthouse mobile · 97 · 100 · 100 · 100</text>
            </g>
          </svg>
        </div>
      </article>
    </div>
  </section>