pandorga 1.2.1

data/_layouts/resources.html

@@ -0,0 +1,387 @@
+---
+layout: shell
+---
+
+<main class="relative max-w-7xl mx-auto px-8 md:px-16 pt-10 pb-16"
+      {% include page/listing-runtime-attrs.html
+         default_collection="resources"
+         default_path="/pages/sources/" %}>
+  {%- comment -%}
+    The shards live here rather than inside the shared page header include,
+    which every listing uses and which no single page may restyle — the same
+    arrangement /pages/blog/ uses for its masthead. They bracket the grid
+    rather than sitting on it: a page of many small cards has no one panel to
+    accent, so the accent goes on the space above and below the run.
+  {%- endcomment -%}
+  <div class="sources-masthead">
+    <span class="shard-accent sources-masthead-shard" aria-hidden="true"></span>
+    {% include page/page-header.html key=page.key listing_filter=true spacer_class="mb-8"
+       header_class="sources-header mb-10 md:mb-12"
+       filter_label="Filter"
+       filter_placeholder="Match channels, links, descriptions…" %}
+  </div>
+
+  <section class="scroll-mt-28 sources-body" id="sources">
+    <div class="listing-card-grid listing-card-grid--sources" id="resources-grid">
+      <p class="font-body text-on-surface-variant italic col-span-full">Loading sources...</p>
+      <section id="no-results" class="col-span-full py-16 hidden">
+        <p class="font-body text-on-surface-variant italic">Nothing matches these filters yet.</p>
+      </section>
+    </div>
+    <div id="resource-pagination" class="source-pagination"></div>
+    <span class="shard-accent shard-accent-beta sources-foot-shard" aria-hidden="true"></span>
+  </section>
+</main>
+
+<script>
+  (function () {
+    'use strict';
+
+    var runtime = window.ContentRuntime;
+    if (!runtime || !runtime.ListingFilter) return;
+
+    var configRoot = document.querySelector('[data-listing-collection]');
+    var collection = (configRoot && configRoot.getAttribute('data-listing-collection')) || 'resources';
+    var listingPath = (configRoot && configRoot.getAttribute('data-listing-path')) || '/pages/sources/';
+    if (listingPath.slice(-1) !== '/') listingPath += '/';
+
+    var listing = runtime.Listing;
+    var params = new URLSearchParams(window.location.search);
+    var grid = document.getElementById('resources-grid');
+    var noResults = document.getElementById('no-results');
+    var pagination = document.getElementById('resource-pagination');
+    var filterRoot = document.querySelector('[data-listing-filter-root]');
+    var pageSize = 12;
+    var currentPage = 1;
+    var allResources = [];
+    var allCards = [];
+    var filterUi = null;
+
+    /* Medium is derived from `type` (and, where an author left it implicit, from
+       the host in `link`). The four values map onto the brand triad plus ink;
+       nothing here invents a fifth. */
+    var MEDIUM_OPTIONS = [
+      { value: 'youtube', label: 'YouTube' },
+      { value: 'podcast', label: 'Podcast' },
+      { value: 'document', label: 'Document' },
+      { value: 'website', label: 'Website' }
+    ];
+
+    if (!grid) return;
+
+    function mediumOf(fm) {
+      var type = String(fm.type || '').toLowerCase();
+      var link = String(fm.link || '').toLowerCase();
+      if (type === 'spotify' || type === 'podcast' || link.indexOf('spotify.com') !== -1) return 'podcast';
+      if (type === 'youtube' || link.indexOf('youtube.com') !== -1 || link.indexOf('youtu.be') !== -1) return 'youtube';
+      if (type === 'pdf' || type === 'document') return 'document';
+      return 'website';
+    }
+
+    function mediumLabel(value) {
+      for (var i = 0; i < MEDIUM_OPTIONS.length; i += 1) {
+        if (MEDIUM_OPTIONS[i].value === value) return MEDIUM_OPTIONS[i].label;
+      }
+      return '';
+    }
+
+    function mediumKey(item) {
+      return mediumOf(item.front_matter || item);
+    }
+
+    /* A resource records a full locale — `en_us`, `pt_br`, `en_gb` — which is
+       two facts in one string: the language before the separator and the
+       country after it. The card now shows both, as two chips, so each one
+       reads only its own half of the value.
+
+       Splitting a locale is the one thing both chips share, so it happens
+       once. An empty or malformed value yields an empty array and every chip
+       downstream of it renders nothing. */
+    function localeParts(language) {
+      var raw = String(language || '').trim().toLowerCase();
+      if (!raw) return [];
+      return raw.split(/[_-]/).filter(function (part) { return part !== ''; });
+    }
+
+    /* The language half. The shared pill keys on the site's own two content
+       languages, so the locale folds onto that vocabulary before it is handed
+       over. Nothing is lost in the fold: `en_gb` and `en_au` are both English,
+       and the flag chip beside this one is already carrying the difference.
+
+       A third language is passed through for the pill to judge rather than
+       reprinted here, because a second spelling of the pill is how the two
+       drift apart. The pill currently declines anything outside its own two
+       codes, so the one French source shows three chips — which is the
+       correct failure: the fix belongs in renderLangPill, not in a copy of
+       it. */
+    var LANGUAGE_PILL_CODES = { en: 'enus', pt: 'ptbr' };
+
+    function languageChip(language) {
+      var parts = localeParts(language);
+      if (!parts.length) return '';
+      var primary = parts[0];
+      return runtime.renderLangPill(LANGUAGE_PILL_CODES[primary] || primary, { allowUnknown: true });
+    }
+
+    /* The country half. The region subtag of a locale is an ISO 3166-1
+       alpha-2 code, which is what flag-icons — pinned in the shell — draws
+       from. A locale with no region (`pt` on its own) or a subtag that is not
+       two letters gets no flag rather than a guessed one: there is no honest
+       way to read a country out of a value that never names one.
+
+       The names are the accessible label, since a flag carries no text. An
+       unlisted region falls back to its own code, which is still true. */
+    var COUNTRY_NAMES = {
+      au: 'Australia',
+      br: 'Brazil',
+      ch: 'Switzerland',
+      fr: 'France',
+      gb: 'United Kingdom',
+      hk: 'Hong Kong',
+      hu: 'Hungary',
+      in: 'India',
+      it: 'Italy',
+      us: 'United States'
+    };
+
+    function countryChip(language) {
+      var parts = localeParts(language);
+      if (parts.length < 2) return '';
+      var region = parts[1];
+      if (!/^[a-z]{2}$/.test(region)) return '';
+      var name = COUNTRY_NAMES[region] || region.toUpperCase();
+      return '<span class="source-facet source-facet--country" title="' +
+        runtime.escapeAttr(name) + '"><span class="fi fi-' + runtime.escapeAttr(region) +
+        '" role="img" aria-label="' + runtime.escapeAttr(name) + '"></span></span>';
+    }
+
+    /* The medium chip. `mediumOf` always answers, because the filter needs a
+       bucket for every card; the chip is stricter and stays silent unless a
+       resource actually declared a `type` or a `link` for that answer to be
+       read from. Colour comes from the card's --source-accent, so the chip and
+       the card edge cannot disagree about what medium this is. */
+    function mediumChip(fm, medium) {
+      var declared = String(fm.type || '').trim() || String(fm.link || '').trim();
+      var label = declared ? mediumLabel(medium) : '';
+      if (!label) return '';
+      return '<span class="source-facet source-facet--medium">' +
+        runtime.escapeHtml(label) + '</span>';
+    }
+
+    /* The four facets a source is filed under: what it is, how it is
+       classified, what language it speaks, and where it speaks from. Each
+       renders only when the field beNewsreader it is populated, so a source missing
+       a category shows three chips and no gap where the fourth would be. */
+    function renderFacets(fm, medium) {
+      var chips = [
+        mediumChip(fm, medium),
+        runtime.renderTagChips(fm.category ? [fm.category] : [], { hrefFor: categoryHref }),
+        languageChip(fm.language),
+        countryChip(fm.language)
+      ].filter(function (chip) { return chip !== ''; });
+      if (!chips.length) return '';
+      return '<div class="source-facets">' + chips.join('') + '</div>';
+    }
+
+    /* The host, not the full URL: the ledger line wants the publisher, and a
+       tracking-laden path tells the reader nothing. */
+    function linkHost(link) {
+      var value = String(link || '').trim();
+      if (!value) return '';
+      return value.replace(/^https?:\/\//i, '').replace(/^www\./i, '').split(/[/?#]/)[0];
+    }
+
+    function categoryHref(category) {
+      return listingPath + '?category=' + encodeURIComponent(category);
+    }
+
+    function sortResources(a, b, sortKey) {
+      if (sortKey === 'random') {
+        var ak = a.slug || (a.front_matter && a.front_matter.name) || '';
+        var bk = b.slug || (b.front_matter && b.front_matter.name) || '';
+        return runtime.sessionRandomCompare(ak, bk, collection);
+      }
+      var na = String((a.front_matter && a.front_matter.name) || a.slug || '').toLowerCase();
+      var nb = String((b.front_matter && b.front_matter.name) || b.slug || '').toLowerCase();
+      return na.localeCompare(nb);
+    }
+
+    function buildChipGroups(categories, mediumsPresent) {
+      return [
+        {
+          /* The shared filter keys its single classification facet on `tag`.
+             Resources classify on `category`, which that facet already falls
+             back to, so the group key has to be `tag` for a click to land. */
+          key: 'tag',
+          label: 'Category',
+          options: [{ value: null, label: 'All' }].concat(categories.map(function (cat) {
+            return { value: cat, label: cat };
+          }))
+        },
+        {
+          key: 'medium',
+          label: 'Medium',
+          options: [{ value: null, label: 'All' }].concat(MEDIUM_OPTIONS.filter(function (opt) {
+            return mediumsPresent[opt.value];
+          }).map(function (opt) {
+            return { value: opt.value, label: opt.label, swatch: 'source-swatch source-swatch--' + opt.value };
+          }))
+        },
+        {
+          key: 'sort',
+          label: 'Sort by',
+          options: [
+            { value: 'random', label: 'Random' },
+            { value: 'title', label: 'Title' }
+          ]
+        }
+      ];
+    }
+
+    function visibleResources(state) {
+      return runtime.ListingFilter.filterItems(allResources, state, {
+        mediumKey: mediumKey,
+        sortItems: sortResources
+      });
+    }
+
+    function renderCard(resource) {
+      var fm = resource.front_matter || {};
+      var name = fm.name || resource.slug;
+      var link = fm.link || '';
+      var medium = mediumOf(fm);
+
+      var card = document.createElement('article');
+      card.className = 'ledger-card source-card group';
+      card.dataset.category = fm.category || '';
+      card.dataset.medium = medium;
+
+      var html = runtime.renderPosterMedia(runtime.buildUrl(fm.thumbnail), name);
+      if (html) {
+        html = '<div class="source-card-media">' +
+          '<span class="ledger-frame-corners" aria-hidden="true"></span>' +
+          html + '</div>';
+      }
+
+      html += '<div class="ledger-card-body">';
+      html += renderFacets(fm, medium);
+      html += '<h3 class="card-title ledger-card-title source-card-title"><a href="' +
+        runtime.escapeAttr(link) + '">' + runtime.escapeHtml(name) + '</a></h3>';
+      if (fm.description) {
+        html += '<p class="ledger-card-copy font-body text-on-surface-variant">' +
+          runtime.escapeHtml(fm.description) + '</p>';
+      }
+      html += '<div class="ledger-card-foot">';
+      html += '<span class="source-host code-technical">' + runtime.escapeHtml(linkHost(link)) + '</span>';
+      html += runtime.renderCtaLink(link, 'Open');
+      html += '</div></div>';
+
+      card.innerHTML = html;
+
+      /* Sources live off-site, so every link out of a card opens in a new tab.
+         The category chip stays in-page and is deliberately left alone. */
+      Array.prototype.forEach.call(card.querySelectorAll('a[href^="http"]'), function (anchor) {
+        anchor.target = '_blank';
+        anchor.rel = 'noopener noreferrer';
+      });
+
+      return card;
+    }
+
+    function renderPagination(state, totalPages) {
+      if (!pagination) return;
+      pagination.innerHTML = '';
+      if (totalPages <= 1) return;
+      var prev = document.createElement('button');
+      prev.type = 'button';
+      prev.textContent = 'Previous';
+      prev.disabled = currentPage === 1;
+      prev.className = 'pagination-nav-btn';
+      prev.onclick = function () { currentPage -= 1; renderPage(state); };
+      var label = document.createElement('span');
+      label.className = 'pagination-count';
+      label.textContent = currentPage + ' / ' + totalPages;
+      var next = document.createElement('button');
+      next.type = 'button';
+      next.textContent = 'Next';
+      next.disabled = currentPage === totalPages;
+      next.className = prev.className;
+      next.onclick = function () { currentPage += 1; renderPage(state); };
+      pagination.append(prev, label, next);
+    }
+
+    function renderPage(state) {
+      allCards.forEach(function (card) { card.classList.add('resource-hidden'); });
+      var cardsBySlug = {};
+      allCards.forEach(function (card) { cardsBySlug[card.dataset.slug] = card; });
+      var sortedList = visibleResources(state);
+      var visible = [];
+      sortedList.forEach(function (r) {
+        var card = cardsBySlug[r.slug];
+        if (card) {
+          visible.push(card);
+          grid.appendChild(card);
+        }
+      });
+
+      if (noResults) {
+        grid.appendChild(noResults);
+        noResults.classList.toggle('hidden', visible.length !== 0);
+      }
+
+      var totalPages = Math.max(1, Math.ceil(visible.length / pageSize));
+      if (currentPage > totalPages) currentPage = totalPages;
+      visible.slice((currentPage - 1) * pageSize, currentPage * pageSize).forEach(function (card) {
+        card.classList.remove('resource-hidden');
+      });
+
+      renderPagination(state, totalPages);
+    }
+
+    function initFilter() {
+      var categories = Array.from(new Set(allResources.map(function (resource) {
+        return resource.front_matter && resource.front_matter.category;
+      }).filter(Boolean))).sort();
+      var mediumsPresent = {};
+      allResources.forEach(function (resource) {
+        mediumsPresent[mediumKey(resource)] = true;
+      });
+
+      filterUi = runtime.ListingFilter.create({
+        root: filterRoot,
+        initialQuery: params.get('q') || '',
+        initialCategory: params.get('category') || params.get('tag') || null,
+        initialMedium: params.get('medium') || null,
+        initialSort: params.get('sort') || 'random',
+        defaultSort: 'random',
+        categoryParam: 'category',
+        chipGroups: buildChipGroups(categories, mediumsPresent),
+        onChange: function (state) {
+          currentPage = 1;
+          renderPage(state);
+        }
+      });
+
+      if (filterRoot) filterRoot.hidden = false;
+      renderPage(filterUi.getState());
+    }
+
+    listing.showLoadingState(grid, 'Loading sources...');
+
+    runtime.loadCollection('collections/' + collection, collection).then(function (resources) {
+      allResources = resources.slice();
+      grid.innerHTML = '';
+      allCards = allResources.map(function (resource) {
+        var card = renderCard(resource);
+        card.dataset.slug = resource.slug;
+        return card;
+      });
+      allCards.forEach(function (card) { grid.appendChild(card); });
+      if (noResults) grid.appendChild(noResults);
+      initFilter();
+    }).catch(function (error) {
+      console.error(error);
+      listing.showErrorState(grid, 'Sources could not be loaded right now.');
+    });
+  })();
+</script>

data/_layouts/shell.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: 'en' }}">
+
+<head>
+  {% include theme/shell-theme-boot.html %}
+  <meta name="color-scheme" content="light dark" />
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  {% include theme/favicons.html %}
+  {% assign identity_short = site.pandorga.identity.short_name | default: site.pandorga.identity.name | default: site.author %}
+  {% capture meta_title %}{% if page.title %}{{ page.title }} | {% endif %}{{ identity_short }}{% endcapture %}
+  {% assign meta_description = page.description | default: site.description %}
+  {% assign canonical_path = page.canonical_url | default: page.url %}
+  <title>{{ meta_title | strip | escape_once }}</title>
+  <meta name="description" content="{{ meta_description | escape_once }}" />
+  <!-- Open Graph / Social Sharing -->
+  {% assign og_type = page.og_type | default: "website" %}
+  <meta property="og:type" content="{{ og_type }}" />
+  <meta property="og:url" content="{{ canonical_path | absolute_url }}" />
+  <meta property="og:title" content="{{ meta_title | strip | escape_once }}" />
+  <meta property="og:description" content="{{ meta_description | escape_once }}" />
+  {% if og_type == "article" and page.date %}
+  <meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}" />
+  {% endif %}
+  {% if og_type == "article" and page.last_updated %}
+  <meta property="article:modified_time" content="{{ page.last_updated | date_to_xmlschema }}" />
+  {% endif %}
+  {% assign og_image = page.og_image | default: page.thumbnail | default: "/assets/images/og-default-dark.png" %}
+  {% if og_image contains "://" %}
+  {% assign og_image_url = og_image %}
+  {% elsif site.content_api_base_url and og_image contains "media/" %}
+    {% if og_image contains "/media/" %}
+      {% assign og_image_url = site.content_api_base_url | append: og_image %}
+    {% else %}
+      {% assign og_image_url = site.content_api_base_url | append: "/" | append: og_image %}
+    {% endif %}
+  {% else %}
+  {% assign og_image_url = og_image | absolute_url %}
+  {% endif %}
+  {% assign og_image_ext = og_image_url | split: "?" | first | split: "." | last | downcase %}
+  {% if og_image_ext == "jpg" or og_image_ext == "jpeg" %}
+  {% assign og_image_type = "image/jpeg" %}
+  {% elsif og_image_ext == "webp" %}
+  {% assign og_image_type = "image/webp" %}
+  {% else %}
+  {% assign og_image_type = "image/png" %}
+  {% endif %}
+  <meta property="og:image" content="{{ og_image_url }}" />
+  <meta name="image" property="og:image" content="{{ og_image_url }}" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:image:type" content="{{ og_image_type }}" />
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="{{ meta_title | strip | escape_once }}" />
+  <meta name="twitter:description" content="{{ meta_description | escape_once }}" />
+  <meta name="twitter:image" content="{{ og_image_url }}" />
+  <!-- Canonical URL -->
+  <link rel="canonical" href="{{ canonical_path | absolute_url }}" />
+  <link rel="stylesheet" href="/assets/css/base.css" />
+  <link rel="stylesheet" href="/assets/css/article.css" />
+  {% include theme/theme-vars.html %}
+  <link rel="stylesheet" href="/assets/css/cv.css" />
+  <link rel="stylesheet" href="/assets/css/global-link.css" />
+  {%- comment -%} Per-page ledger styles. One file per page so page work stays
+      independent; shared component rules live in base.css. {%- endcomment -%}
+  {%- for sheet in site.static_files -%}
+    {%- if sheet.path contains "/assets/css/ledger/" -%}
+  <link rel="stylesheet" href="{{ sheet.path }}" />
+    {%- endif -%}
+  {%- endfor -%}
+  <link href="https://fonts.googleapis.com" rel="preconnect" />
+  <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+  {% include theme/font-loader.html %}
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css" />
+  <style>
+    :root { --drop-cap-lines: {{ site.drop_cap_lines | default: 2 }}; }
+  </style>
+  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+  <script src="/assets/tailwind-play.js"></script>
+</head>
+
+<body class="bg-background text-on-surface">
+
+  {% assign nav_active = nil %}
+  {% if page.collection == "articles" %}{% assign nav_active = "articles" %}{% endif %}
+  {% if page.collection == "posts" %}{% assign nav_active = "blog" %}{% endif %}
+  {% if page.collection == "products" %}{% assign nav_active = "cv" %}{% endif %}
+  {% if page.collection == "projects" %}{% assign nav_active = "projects" %}{% endif %}
+  {% unless nav_active %}{% assign nav_active = page.key %}{% endunless %}
+
+  {% assign _all_pages = site.pages %}
+
+  <!-- TopNavBar -->
+  <nav class="sticky top-0 z-50 bg-surface">
+    <div class="flex justify-between items-center w-full px-6 sm:px-8 md:px-10 pt-5 pb-3.5 leading-none max-w-7xl mx-auto">
+      <div class="flex items-center gap-3 sm:gap-4 min-w-0">
+        <a href="/" aria-label="{{ site.author }} – Home" class="shrink-0 inline-flex items-center gap-3 site-wordmark-link">
+          {% include theme/site-logo.html %}
+          <span class="site-wordmark">{{ site.author | default: site.title | split: " " | first }}</span>
+        </a>
+      </div>
+
+      {%- comment -%}
+        The mockup's nav is a flat, always-visible bar rather than a menu
+        behind a button. Links and order come from pandorga.pages via the
+        registry generator (site.data.nav). The Explore menu survives as the
+        narrow-viewport fallback.
+      {%- endcomment -%}
+      <nav class="site-rail" aria-label="Sections">
+        {%- for _group in site.data.nav -%}
+        {%- for _item in _group.pages -%}
+        {%- assign _key = _item.key -%}
+        {%- assign _p = _all_pages | where: "key", _key | first -%}
+        <a href="{{ _p.url }}" class="site-rail-link{% if nav_active == _key %} is-active{% endif %}"
+          {% if nav_active == _key %}aria-current="page"{% endif %}>{{ _p.title }}</a>
+        {%- endfor -%}
+        {%- endfor -%}
+      </nav>
+
+      <div class="flex items-center gap-4 sm:gap-5 shrink-0">
+        {% if site.content_include_unpublished or site.unpublished %}
+          {% include theme/dev-reexport.html %}
+        {% endif %}
+        {% include theme/theme-toggle.html %}
+        <div id="site-menu" class="relative flex items-center shrink-0">
+          <button id="mobile-menu-btn" type="button"
+            class="flex items-center justify-center w-7 h-7 p-1 text-on-surface-variant hover:text-primary transition-colors duration-300"
+            aria-label="Explore site pages"
+            title="Menu"
+            aria-haspopup="true" aria-expanded="false" aria-controls="mobile-menu">
+            <span class="sr-only">Explore</span>
+            <span class="material-symbols-outlined text-xl" aria-hidden="true">menu</span>
+          </button>
+        <div id="mobile-menu"
+          class="hidden absolute right-0 top-full mt-1 min-w-[14rem] py-2 bg-surface border border-gentle-subtle shadow-sm z-50"
+          role="menu" aria-label="Explore">
+          <div class="flex flex-col px-3 gap-0">
+            {% for _group in site.data.nav %}
+            {% unless forloop.first %}<div class="h-px bg-outline-variant/30 my-1.5" role="separator"></div>{% endunless %}
+            {% for _item in _group.pages %}
+            {% assign _key = _item.key %}
+            {% assign _p = _all_pages | where: "key", _key | first %}
+            {% comment %}The inactive state carries no weight class: Cabin's axis starts
+            at 400 and the font loader requests nothing below it, so the `font-light` this
+            used to set asked for a 300 that resolves straight back to 400 and changed
+            nothing on the page. The variant ink is what marks the state.{% endcomment %}
+            <a href="{{ _p.url }}" role="menuitem"
+              class="flex items-center gap-2.5 font-body {% if nav_active == _key %}text-primary font-semibold{% else %}text-on-surface-variant hover:text-primary{% endif %} transition-colors duration-300 py-2 px-1">
+              {% if _item.icon %}<span class="material-symbols-outlined text-lg shrink-0 flex items-center justify-center" aria-hidden="true">{{ _item.icon }}</span>{% endif %}
+              <span class="inline-flex items-center gap-1.5 leading-none">{{
+                _p.title }}{% if _p.badge %}<span class="marginalia font-label text-tertiary">{{ _p.badge }}</span>{% endif
+                %}</span>
+            </a>
+            {% endfor %}
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+    <!-- Tonal separator — "No-Line" design rule: background-color shift instead of a CSS border -->
+    <div class="bg-surface-container-low h-[1px]"></div>
+  </nav>
+  <script>
+    (function () {
+      var wrap = document.getElementById('site-menu');
+      var btn = document.getElementById('mobile-menu-btn');
+      var menu = document.getElementById('mobile-menu');
+      if (!wrap || !btn || !menu) return;
+
+      function setOpen(open) {
+        menu.classList.toggle('hidden', !open);
+        btn.setAttribute('aria-expanded', String(open));
+      }
+
+      btn.addEventListener('click', function (event) {
+        event.stopPropagation();
+        setOpen(menu.classList.contains('hidden'));
+      });
+      document.addEventListener('click', function (event) {
+        if (!wrap.contains(event.target)) setOpen(false);
+      });
+      document.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape') setOpen(false);
+      });
+    })();
+  </script>
+
+  {% include page/content-runtime.html %}
+
+  {{ content }}
+
+  {% include page/figure-lightbox.html %}
+
+  <!-- Footer -->
+  {% include page/site-footer.html nav_active=nav_active %}
+
+</body>
+
+</html>