---
pagination:
  data: locales
  size: 1
  alias: locale
permalink: "{% if locale == baseLocale %}/culture-savoirs/index.html{% else %}/{{ locale }}/culture-savoirs/index.html{% endif %}"
layout: layouts/base.njk
pageKey: culture
slug: "culture-savoirs/"
eleventyComputed:
  pageTitle: "{{ 'culture_title' | t(locale) }}"
---
<section class="section">
  <div class="container">
    <div class="section-header center">
      <p class="section-eyebrow">Sirius Gwada</p>
      <h1>{{ "culture_title" | t(locale) }}</h1>
      <p class="pattern-strip adinkra" aria-hidden="true" style="margin-inline:auto"></p>
      <p class="section-subtitle">{{ "culture_subtitle" | t(locale) }}</p>
    </div>

    <div class="grid-auto">
      <div class="feature-card">
        <div style="font-size: var(--text-4)" aria-hidden="true">🏺</div>
        <h3>{{ "culture_egypt_title" | t(locale) }}</h3>
        <p>{{ "culture_egypt_desc" | t(locale) }}</p>
      </div>
      <div class="feature-card">
        <div style="font-size: var(--text-4)" aria-hidden="true">🌍</div>
        <h3>{{ "culture_dogon_title" | t(locale) }}</h3>
        <p>{{ "culture_dogon_desc" | t(locale) }}</p>
      </div>
      <div class="feature-card">
        <div style="font-size: var(--text-4)" aria-hidden="true">⛵</div>
        <h3>{{ "culture_caribbean_title" | t(locale) }}</h3>
        <p>{{ "culture_caribbean_desc" | t(locale) }}</p>
      </div>
    </div>

    <h2 class="center" style="margin-top: var(--space-7)">{{ "culture_timeline_title" | t(locale) }}</h2>
    <div class="timeline-v" style="margin-top: var(--space-5)">
      <div class="timeline-v-item">
        <p class="timeline-v-date">{{ "culture_timeline_1_date" | t(locale) }}</p>
        <h4>{{ "culture_timeline_1_title" | t(locale) }}</h4>
        <p>{{ "culture_timeline_1_desc" | t(locale) }}</p>
      </div>
      <div class="timeline-v-item">
        <p class="timeline-v-date">{{ "culture_timeline_2_date" | t(locale) }}</p>
        <h4>{{ "culture_timeline_2_title" | t(locale) }}</h4>
        <p>{{ "culture_timeline_2_desc" | t(locale) }}</p>
      </div>
      <div class="timeline-v-item">
        <p class="timeline-v-date">{{ "culture_timeline_3_date" | t(locale) }}</p>
        <h4>{{ "culture_timeline_3_title" | t(locale) }}</h4>
        <p>{{ "culture_timeline_3_desc" | t(locale) }}</p>
      </div>
      <div class="timeline-v-item">
        <p class="timeline-v-date">{{ "culture_timeline_4_date" | t(locale) }}</p>
        <h4>{{ "culture_timeline_4_title" | t(locale) }}</h4>
        <p>{{ "culture_timeline_4_desc" | t(locale) }}</p>
      </div>
    </div>
  </div>
</section>

<section class="section" style="background: var(--surface-sunk)">
  <div class="container">
    <div class="section-header center">
      <h2>{{ "dogon_title" | t(locale) }}</h2>
      <p class="pattern-strip kente" aria-hidden="true" style="margin-inline:auto"></p>
      <p class="section-subtitle">{{ "dogon_intro" | t(locale) }}</p>
    </div>

    <fieldset class="tabs">
      <legend class="visually-hidden">{{ "dogon_title" | t(locale) }}</legend>

      <input type="radio" name="dogon-tab" id="dogon-tab-cosmogony" class="tab-input" checked>
      <input type="radio" name="dogon-tab" id="dogon-tab-system" class="tab-input">
      <input type="radio" name="dogon-tab" id="dogon-tab-astronomy" class="tab-input">
      <input type="radio" name="dogon-tab" id="dogon-tab-heritage" class="tab-input">

      <div class="tab-list" role="tablist">
        <label class="tab-label" for="dogon-tab-cosmogony">{{ "dogon_tab_cosmogony" | t(locale) }}</label>
        <label class="tab-label" for="dogon-tab-system">{{ "dogon_tab_system" | t(locale) }}</label>
        <label class="tab-label" for="dogon-tab-astronomy">{{ "dogon_tab_astronomy" | t(locale) }}</label>
        <label class="tab-label" for="dogon-tab-heritage">{{ "dogon_tab_heritage" | t(locale) }}</label>
      </div>

      <div class="tab-panels">
        <div class="tab-panel prose center">
          <p>{{ "dogon_cosmogony_p1" | t(locale) }}</p>
          <p>{{ "dogon_cosmogony_p2" | t(locale) }}</p>
          <div class="card">
            <h3>{{ "dogon_cosmogony_nommo_title" | t(locale) }}</h3>
            <p>{{ "dogon_cosmogony_nommo_desc" | t(locale) }}</p>
          </div>
        </div>

        <div class="tab-panel">
          <div class="grid-auto">
            <div class="info-card">
              <h3>{{ "dogon_system_sigutolo_title" | t(locale) }}</h3>
              <p>{{ "dogon_system_sigutolo_desc" | t(locale) }}</p>
            </div>
            <div class="info-card">
              <h3>{{ "dogon_system_potolo_title" | t(locale) }}</h3>
              <p>{{ "dogon_system_potolo_desc" | t(locale) }}</p>
            </div>
            <div class="info-card">
              <h3>{{ "dogon_system_emmeya_title" | t(locale) }}</h3>
              <p>{{ "dogon_system_emmeya_desc" | t(locale) }}</p>
            </div>
          </div>
          <div class="card prose center" style="margin-top: var(--space-4)">
            <h3>{{ "dogon_mystery_title" | t(locale) }}</h3>
            <div class="grid-auto">
              <div>
                <h4>{{ "dogon_mystery_theory1_title" | t(locale) }}</h4>
                <p>{{ "dogon_mystery_theory1_desc" | t(locale) }}</p>
              </div>
              <div>
                <h4>{{ "dogon_mystery_theory2_title" | t(locale) }}</h4>
                <p>{{ "dogon_mystery_theory2_desc" | t(locale) }}</p>
              </div>
              <div>
                <h4>{{ "dogon_mystery_theory3_title" | t(locale) }}</h4>
                <p>{{ "dogon_mystery_theory3_desc" | t(locale) }}</p>
              </div>
            </div>
          </div>
          <div class="card prose center" style="margin-top: var(--space-4)">
            <h3>{{ "dogon_calc_example_title" | t(locale) }}</h3>
            <p>{{ "dogon_calc_example_text" | t(locale) }}</p>
          </div>
        </div>

        <div class="tab-panel">
          <div class="grid-auto">
            <div class="info-card">
              <h3>{{ "dogon_astronomy_geometry_title" | t(locale) }}</h3>
              <p>{{ "dogon_astronomy_geometry_desc" | t(locale) }}</p>
            </div>
            <div class="info-card">
              <h3>{{ "dogon_astronomy_calendar_title" | t(locale) }}</h3>
              <p>{{ "dogon_astronomy_calendar_desc" | t(locale) }}</p>
            </div>
            <div class="info-card">
              <h3>{{ "dogon_astronomy_planets_title" | t(locale) }}</h3>
              <p>{{ "dogon_astronomy_planets_desc" | t(locale) }}</p>
            </div>
            <div class="info-card">
              <h3>{{ "dogon_astronomy_universe_title" | t(locale) }}</h3>
              <p>{{ "dogon_astronomy_universe_desc" | t(locale) }}</p>
            </div>
          </div>
        </div>

        <div class="tab-panel">
          <div class="timeline-v">
            <div class="timeline-v-item">
              <p class="timeline-v-date">{{ "dogon_heritage_1_date" | t(locale) }}</p>
              <p>{{ "dogon_heritage_1_desc" | t(locale) }}</p>
            </div>
            <div class="timeline-v-item">
              <p class="timeline-v-date">{{ "dogon_heritage_2_date" | t(locale) }}</p>
              <p>{{ "dogon_heritage_2_desc" | t(locale) }}</p>
            </div>
            <div class="timeline-v-item">
              <p class="timeline-v-date">{{ "dogon_heritage_3_date" | t(locale) }}</p>
              <p>{{ "dogon_heritage_3_desc" | t(locale) }}</p>
            </div>
            <div class="timeline-v-item">
              <p class="timeline-v-date">{{ "dogon_heritage_4_date" | t(locale) }}</p>
              <p>{{ "dogon_heritage_4_desc" | t(locale) }}</p>
            </div>
          </div>

          <div class="card prose center" style="margin-top: var(--space-5)">
            <h3>{{ "dogon_heritage_diaspora_title" | t(locale) }}</h3>
            <p>{{ "dogon_heritage_diaspora_desc" | t(locale) }}</p>
            <div class="grid-auto" style="margin-top: var(--space-3); text-align: left">
              <p>🇭🇹 {{ "dogon_heritage_diaspora_haiti" | t(locale) }}</p>
              <p>🇬🇵 {{ "dogon_heritage_diaspora_guadeloupe" | t(locale) }}</p>
              <p>🇲🇶 {{ "dogon_heritage_diaspora_martinique" | t(locale) }}</p>
              <p>🇯🇲 {{ "dogon_heritage_diaspora_jamaica" | t(locale) }}</p>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</section>