work.html

---
layout: default
title: Work
excerpt: "Hypha is a word from Ancient Greek meaning 'web' (plural hyphae); referring to one of the threads that make up the mycelium of a fungus."
image: "/assets/images/social/work.webp"
menu_title: Work
order: 3
---

<section class="mt2 ph3 ph5-l">
<header>
  <div class="flex-l items-center mv2 ">
    <div class="w-100-l">
      
      <h3 class="f2 f1-m f-subheadline-l accent normal sans-serif mb4 lh-solid">
        {{ page.title }}
      </h3>
      <div class="f3 measure-wide dark-gray lh-copy mb5">
        <p class="f4">
          <em>
            Hypha is a word from Ancient Greek meaning 'web' (plural hyphae); referring to one of the threads that make up the mycelium of a fungus.
          </em> 
        </p>
        In ecology, hyphae provide sustenance and communication between living organisms. Drawing inspiration from this infinitely adaptive, complex structure, we bring these traits to our work: rooted in knowledge, yet boundless in imagination.
      </div>
    </div>
  </div>
</header>
<div class="flex flex-wrap justify-left mb4 pv4">
  {% assign index_page = site.pages | where: "title", "Home" | first %}
  {% assign what_we_do = index_page.what_we_do | sort: 'order' %}
  {% assign works_by_practice_area = site.work | group_by: 'practice_area' %}
  {% for practice in what_we_do %}
    {% assign practice_area = practice.title %}
    {% assign matching_practice_area = works_by_practice_area | where: 'name', practice_area %}
    {% if matching_practice_area.size > 0 %}
      <div class="flex flex-column mb3">
        {% if practice.slug %}
          <a href="/{{ practice.slug }}/" class="underline-hover">
        {% endif %}
        <h2 class="f2 sans-serif accent mb3 mt4">
          {{ practice.title }}
        </h2>
        {% if practice.slug %}
          </a>
        {% endif %}

        {% if practice.slug %}
          {% capture practice_page_path %}{{ practice.slug }}.html{% endcapture %}
          {% assign practice_page = site.pages | where: "path", practice_page_path | first %}        
          {% if practice_page %}
            <p class="measure-wide mt2 mb2 f3">
              {{ practice_page.excerpt }}
            </p>
          {% endif %}
          <p class="measure-wide mt2 mb2 f3">
            <a href="/{{ practice.slug }}/" class="accent link underline-hover">Read more</a>
          </p>
          {% endif %}
      </div>
      <div class="flex flex-wrap">
        {% assign works = matching_practice_area.first.items %}
        {% for project in works %}
          {%- include sections/project.html project=project -%}
        {% endfor %}
      </div>
    {% endif %}
  {% endfor %}
</div>
</section>

<script>
  function expandContent(toggleEl) {
    const containerEl = toggleEl.parentElement;
    const contentDiv = containerEl.previousElementSibling;
    const excerpt = contentDiv.dataset.excerpt;
    const content = contentDiv.dataset.content;

    let toggled = contentDiv.dataset.toggled === "true";
    if (!toggled) {
      contentDiv.innerHTML = content;
      toggleEl.innerHTML = "[read less]";
      contentDiv.dataset.toggled = "true";
      toggleEl.setAttribute("aria-expanded", "true");
    } else {
      contentDiv.innerHTML = excerpt;
      toggleEl.innerHTML = "[read more]";
      contentDiv.dataset.toggled = "false";
      toggleEl.setAttribute("aria-expanded", "false");
    }
  }

  function handleKeydown(event, el) {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      expandContent(el);
    }
  }
</script>