ferst-core 0.7.4 → 0.7.6

package/components/SiteHeader.astro

@@ -12,6 +12,7 @@
 import Button from './Button.astro';
 import type { NavLink, NavGroup } from '../content/schemas';
 
+import { navWithoutCta } from '../lib/nav';
 interface Props {
   path: string;
   headerClass?: string;
@@ -21,9 +22,14 @@ interface Props {
   primaryNav: NavLink[];
   /** Optional dropdown / mega-menu group. Client-configured — the core ships none. */
   dropdown?: NavGroup;
+  /** The call-to-action button (navbarSettings.cta); null hides it. */
+  cta?: { label: string; href: string } | null;
 }
 
-const { path, headerClass, primaryLogoLight, primaryLogoDark, brandAlt, primaryNav, dropdown } = Astro.props;
+const { path, headerClass, primaryLogoLight, primaryLogoDark, brandAlt, primaryNav, dropdown, cta = { label: 'Contact', href: '/contact/' } } = Astro.props;
+// A menu link to the same place as the button would show it twice: the button wins.
+const navLinks = navWithoutCta(primaryNav, cta);
+const ctaActive = !!cta && cta.href.startsWith('/') && path.startsWith(cta.href.replace(/\/$/, '') || '/#');
 
 /**
  * Longest-prefix-wins active-nav matching. A plain independent `startsWith`
@@ -34,7 +40,7 @@ const { path, headerClass, primaryLogoLight, primaryLogoDark, brandAlt, primaryN
  * longest means only the most specific matching link is ever active,
  * however nav hrefs happen to nest.
  */
-const primaryNavMatchLengths = primaryNav.map((link) => {
+const primaryNavMatchLengths = navLinks.map((link) => {
   const trimmed = link.href.replace(/\/$/, '');
   return trimmed.length > 0 && path.startsWith(trimmed) ? trimmed.length : -1;
 });
@@ -121,7 +127,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
         the longest/most-specific match wins — see primaryNavLongestMatch
         above — so a link whose href is a subpath of another's (Newsletters
         under Posts) doesn't light up both at once. */}
-    {primaryNav.map((link, i) => {
+    {navLinks.map((link, i) => {
       const isActive =
         primaryNavMatchLengths[i] >= 0 && primaryNavMatchLengths[i] === primaryNavLongestMatch;
       return (
@@ -131,13 +137,15 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
       );
     })}
     <div class="nav-mobile-theme">
-      <Button
-        href="/contact/"
-        variant="cta"
-        class:list={['nav-cta', 'nav-cta--drawer', { active: path.startsWith('/contact') }]}
-      >
-        Contact
-      </Button>
+      {cta && (
+        <Button
+          href={cta.href}
+          variant="cta"
+          class:list={['nav-cta', 'nav-cta--drawer', { active: ctaActive }]}
+        >
+          {cta.label}
+        </Button>
+      )}
       <button type="button" class="theme-toggle-mobile" id="theme-toggle-mobile" role="switch" aria-checked="false" aria-label="Toggle dark mode">
         <span class="theme-toggle__highlight" aria-hidden="true"></span>
         <svg class="theme-icon theme-icon--sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
@@ -152,15 +160,17 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
       <svg class="theme-icon theme-icon--sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
       <svg class="theme-icon theme-icon--moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
     </button>
-    <span class="nav-cta-header-wrap">
-      <Button
-        href="/contact/"
-        variant="cta"
-        class:list={['nav-cta', 'nav-cta--header', { active: path.startsWith('/contact') }]}
-      >
-        Contact
-      </Button>
-    </span>
+    {cta && (
+      <span class="nav-cta-header-wrap">
+        <Button
+          href={cta.href}
+          variant="cta"
+          class:list={['nav-cta', 'nav-cta--header', { active: ctaActive }]}
+        >
+          {cta.label}
+        </Button>
+      </span>
+    )}
     <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="site-nav">
       <span></span><span></span><span></span>
     </button>
@@ -357,6 +367,32 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     z-index: 101; /* always above the mobile full-screen nav (z-index: 99) */
   }
 
+  /* Crowded (#11, set by measuring): the centred menu would collide with the site name or
+     the buttons, so it takes its own row under them and wraps if it must. Desktop only;
+     below 64em the drawer applies as usual. */
+  @media (min-width: 64em) {
+    .site-header.is-crowded,
+    .site-header.is-crowded.is-compact {
+      height: auto;
+      flex-wrap: wrap;
+      row-gap: 0;
+      padding-block: 6px;
+    }
+    .site-header.is-crowded .site-nav {
+      position: static;
+      transform: none;
+      order: 3;
+      flex-basis: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+      column-gap: 24px;
+      row-gap: 0;
+    }
+    .site-header.is-crowded .site-nav .nav-link {
+      padding-block: 8px;
+    }
+  }
+
   /* ── Contact CTA ── */
   .nav-cta {
     white-space: nowrap;
@@ -990,6 +1026,33 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     window.addEventListener('scroll', onScrollCompact, { passive: true });
   }
 
+  // Crowding (#11): on desktop the menu is centred on the header. When the site name (or
+  // the right-hand buttons) would run into it, give the menu its own row instead. Decided
+  // by measuring the real layout, so it adapts to any name and any number of links.
+  if (siteHeader) {
+    const desktop = window.matchMedia('(min-width: 64em)');
+    const brand = siteHeader.querySelector<HTMLElement>('.brand');
+    const nav = siteHeader.querySelector<HTMLElement>('.site-nav');
+    const right = siteHeader.querySelector<HTMLElement>('.nav-right');
+    const GAP = 16;
+    const fitCheck = () => {
+      if (!brand || !nav || !right) return;
+      siteHeader.classList.remove('is-crowded');
+      if (!desktop.matches) return;
+      const b = brand.getBoundingClientRect();
+      const n = nav.getBoundingClientRect();
+      const r = right.getBoundingClientRect();
+      if (b.right + GAP > n.left || n.right + GAP > r.left) siteHeader.classList.add('is-crowded');
+    };
+    let queued = false;
+    const queue = () => { if (!queued) { queued = true; requestAnimationFrame(() => { queued = false; fitCheck(); }); } };
+    if (brand) new ResizeObserver(queue).observe(brand);
+    new ResizeObserver(queue).observe(siteHeader);
+    desktop.addEventListener('change', queue);
+    document.fonts?.ready.then(queue);
+    fitCheck();
+  }
+
   function openMega() {
     if (!megaNav || !aboutTrigger) return;
     const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

package/components/blocks/Heading.astro

@@ -1,4 +1,5 @@
 ---
+import { pageSlugs, uniqueSlug } from '../../lib/slug';
 interface Props {
   text: string;
   level?: number;
@@ -7,9 +8,11 @@ interface Props {
 }
 const { text, level = 2, align, gradient = false } = Astro.props;
 const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
+// A readable, page-unique anchor so any heading can be linked to (#mass-times).
+const id = uniqueSlug(text, pageSlugs(Astro.locals));
 ---
 
-<Tag class="b-heading" data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
+<Tag class="b-heading" id={id} data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
 
 <style>
   /* By default a heading INHERITS the page/section content alignment (the
@@ -22,6 +25,7 @@ const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
     margin: 0;
     text-wrap: balance;
     white-space: pre-line; /* a title typed over several lines keeps its breaks */
+    scroll-margin-top: 6rem; /* a linked heading stops clear of the sticky header */
     line-height: 1.2;
     text-align: inherit;
   }

package/components/recipes/Contacts.astro

@@ -0,0 +1,139 @@
+---
+/**
+ * Contacts — a compact directory of people or offices. Each card: the role as its title,
+ * the name, phone and email as tap targets (email with an optional subject), address and
+ * hours. A group can carry one shared note (e.g. office hours) instead of repeating it on
+ * every card. For one contact as a branded band use `contactCard`; for one contact's
+ * links in a row, `linkRow`.
+ */
+import Heading from '../blocks/Heading.astro';
+import Icon from '../Icon.astro';
+import { inlineMarkdown, textWithBreaks } from '../../lib/inline-markdown';
+import { mailtoHref, telHref } from '../../lib/links';
+
+interface Contact { role?: string; name?: string; phone?: string; email?: string; emailSubject?: string; address?: string; hours?: string }
+interface Props {
+  title?: string;
+  intro?: string;
+  groups: Array<{ heading?: string; note?: string; contacts: Contact[] }>;
+}
+const { title, intro, groups = [] } = Astro.props;
+---
+
+<section class="b-contacts">
+  {(title || intro) && (
+    <div class="b-contacts__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-contacts__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+  {groups.map((g) => (
+    <div class="b-contacts__group">
+      {(g.heading || g.note) && (
+        <div class="b-contacts__group-head">
+          {g.heading && <h3 class="b-contacts__group-title">{g.heading}</h3>}
+          {g.note && <p class="b-contacts__note" set:html={inlineMarkdown(g.note)} />}
+        </div>
+      )}
+      <ul class="b-contacts__grid">
+        {g.contacts.map((c) => (
+          <li class="b-contacts__card">
+            <h3 class="b-contacts__role">{c.role ?? c.name}</h3>
+            {c.role && c.name && <p class="b-contacts__name">{c.name}</p>}
+            <div class="b-contacts__lines">
+              {c.phone && <a class="b-contacts__line" href={telHref(c.phone)}><Icon name="phone" size={16} /><span>{c.phone}</span></a>}
+              {c.email && <a class="b-contacts__line" href={mailtoHref(c.email, c.emailSubject)}><Icon name="email" size={16} /><span>{c.email}</span></a>}
+              {c.address && <p class="b-contacts__line"><Icon name="map-pin" size={16} /><span set:html={textWithBreaks(c.address)} /></p>}
+              {c.hours && <p class="b-contacts__line"><Icon name="calendar" size={16} /><span set:html={textWithBreaks(c.hours)} /></p>}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  ))}
+</section>
+
+<style>
+  .b-contacts {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    width: 100%;
+    max-width: 72rem;
+  }
+  .b-contacts__head,
+  .b-contacts__group-head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    max-width: var(--max);
+  }
+  .b-contacts__intro,
+  .b-contacts__note {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-contacts__group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .b-contacts__group-title {
+    margin: 0;
+    font-size: 1.15rem;
+  }
+  .b-contacts__grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  }
+  .b-contacts__card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 1.1rem 1.25rem;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+  }
+  .b-contacts__role {
+    margin: 0;
+    font-size: 1.05rem;
+  }
+  .b-contacts__name {
+    margin: 0;
+    font-size: 0.9375rem;
+    color: var(--muted);
+  }
+  .b-contacts__lines {
+    display: grid;
+    gap: 0.35rem;
+    margin-top: 0.35rem;
+  }
+  .b-contacts__line {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin: 0;
+    color: var(--fg);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    overflow-wrap: anywhere;
+  }
+  .b-contacts__line :global(svg) {
+    flex: none;
+    margin-top: 0.2em;
+    color: var(--gold);
+  }
+  a.b-contacts__line:hover span {
+    text-decoration: underline;
+  }
+  a.b-contacts__line:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+</style>

package/components/recipes/Document.astro

@@ -1,152 +1,157 @@
----
-/**
- * Document — a policy or legal text as ONE block. Sections are numbered automatically,
- * a contents list links to each (beside the text, sticky, on wide screens), and an
- * optional "last updated" line sits at the top. Section bodies take prose formatting
- * (links, bold, lists); `items` add a list. Print-friendly: the contents list is
- * dropped on paper.
- */
-import { proseParts } from '../../lib/prose';
-import { inlineMarkdown } from '../../lib/inline-markdown';
-import { longDate } from '../../lib/documents';
-
-interface Section { title: string; body?: string; items?: string[] }
-interface Props {
-  intro?: string;
-  updated?: string;
-  numbered?: boolean;
-  toc?: boolean;
-  sections: Section[];
-}
-const { intro, updated, numbered = true, toc = true, sections = [] } = Astro.props;
-const updatedLabel = longDate(updated);
-const showToc = toc && sections.length > 1;
----
-
-<section class="b-doc" data-toc={showToc ? 'true' : undefined}>
-  {showToc && (
-    <nav class="b-doc__toc" aria-label="Contents">
-      <p class="b-doc__toc-title">Contents</p>
-      <ol>
-        {sections.map((s, i) => (
-          <li><a href={`#clause-${i + 1}`}>{numbered && <span class="b-doc__toc-num">{i + 1}.</span>} {s.title}</a></li>
-        ))}
-      </ol>
-    </nav>
-  )}
-  <div class="b-doc__body">
-    {updatedLabel && <p class="b-doc__updated">Last updated {updatedLabel}</p>}
-    {intro && <p class="b-doc__intro" set:html={inlineMarkdown(intro)} />}
-    {sections.map((s, i) => (
-      <section class="b-doc__clause" id={`clause-${i + 1}`}>
-        <h2>{numbered && <span class="b-doc__num">{i + 1}.</span>} {s.title}</h2>
-        {proseParts(s.body).map((part) =>
-          part.kind === 'p' ? <p set:html={part.html} />
-          : part.kind === 'ul' ? <ul>{part.items.map((x) => <li set:html={x} />)}</ul>
-          : <ol>{part.items.map((x) => <li set:html={x} />)}</ol>
-        )}
-        {s.items && s.items.length > 0 && <ul>{s.items.map((x) => <li set:html={inlineMarkdown(x)} />)}</ul>}
-      </section>
-    ))}
-  </div>
-</section>
-
-<style>
-  .b-doc {
-    display: grid;
-    gap: 2rem;
-    width: 100%;
-    max-width: 64rem;
-  }
-  @media (min-width: 64em) {
-    .b-doc[data-toc] {
-      grid-template-columns: 15rem minmax(0, 1fr);
-      align-items: start;
-    }
-    .b-doc__toc {
-      position: sticky;
-      top: 6rem;
-    }
-  }
-  .b-doc__toc {
-    border: var(--card-border);
-    border-radius: var(--radius);
-    background: var(--bg-surface);
-    padding: 1rem 1.1rem;
-  }
-  .b-doc__toc-title {
-    margin: 0 0 0.5rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--muted);
-  }
-  .b-doc__toc ol {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 0.35rem;
-    font-size: 0.9375rem;
-  }
-  .b-doc__toc a {
-    color: var(--fg);
-    text-decoration: none;
-  }
-  .b-doc__toc a:hover {
-    color: var(--gold);
-    text-decoration: underline;
-  }
-  .b-doc__toc-num {
-    color: var(--muted);
-    font-variant-numeric: tabular-nums;
-  }
-  .b-doc__body {
-    max-width: var(--max);
-    display: flex;
-    flex-direction: column;
-    gap: 1.75rem;
-  }
-  .b-doc__updated {
-    margin: 0;
-    font-size: 0.875rem;
-    color: var(--muted);
-  }
-  .b-doc__intro {
-    margin: 0;
-    font-size: 1.125rem;
-    line-height: 1.6;
-    color: var(--muted);
-  }
-  .b-doc__clause {
-    scroll-margin-top: 6rem;
-  }
-  .b-doc__clause h2 {
-    margin: 0 0 0.6rem;
-    font-size: 1.25rem;
-  }
-  .b-doc__num {
-    color: var(--gold);
-    font-variant-numeric: tabular-nums;
-  }
-  .b-doc__clause p,
-  .b-doc__clause ul,
-  .b-doc__clause ol {
-    margin: 0 0 0.75rem;
-    line-height: 1.7;
-  }
-  .b-doc__clause ul,
-  .b-doc__clause ol {
-    padding-inline-start: 1.4em;
-  }
-  .b-doc__clause :global(a) {
-    color: var(--accent);
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-  }
-  @media print {
-    .b-doc__toc { display: none; }
-    .b-doc[data-toc] { grid-template-columns: 1fr; }
-  }
-</style>
+---
+/**
+ * Document — a policy or legal text as ONE block. Sections are numbered automatically,
+ * a contents list links to each (beside the text, sticky, on wide screens), and an
+ * optional "last updated" line sits at the top. Section bodies take prose formatting
+ * (links, bold, lists); `items` add a list. Print-friendly: the contents list is
+ * dropped on paper.
+ */
+import { proseParts } from '../../lib/prose';
+import { inlineMarkdown } from '../../lib/inline-markdown';
+import { longDate } from '../../lib/documents';
+import { pageSlugs, uniqueSlug } from '../../lib/slug';
+
+interface Section { title: string; body?: string; items?: string[] }
+interface Props {
+  intro?: string;
+  updated?: string;
+  numbered?: boolean;
+  toc?: boolean;
+  sections: Section[];
+}
+const { intro, updated, numbered = true, toc = true, sections = [] } = Astro.props;
+const updatedLabel = longDate(updated);
+const showToc = toc && sections.length > 1;
+// Readable anchors that survive renumbering (#payment); #clause-N stays on the heading.
+const used = pageSlugs(Astro.locals);
+const ids = sections.map((s) => uniqueSlug(s.title, used));
+---
+
+<section class="b-doc" data-toc={showToc ? 'true' : undefined}>
+  {showToc && (
+    <nav class="b-doc__toc" aria-label="Contents">
+      <p class="b-doc__toc-title">Contents</p>
+      <ol>
+        {sections.map((s, i) => (
+          <li><a href={`#${ids[i]}`}>{numbered && <span class="b-doc__toc-num">{i + 1}.</span>} {s.title}</a></li>
+        ))}
+      </ol>
+    </nav>
+  )}
+  <div class="b-doc__body">
+    {updatedLabel && <p class="b-doc__updated">Last updated {updatedLabel}</p>}
+    {intro && <p class="b-doc__intro" set:html={inlineMarkdown(intro)} />}
+    {sections.map((s, i) => (
+      <section class="b-doc__clause" id={ids[i]}>
+        <h2 id={`clause-${i + 1}`}>{numbered && <span class="b-doc__num">{i + 1}.</span>} {s.title}</h2>
+        {proseParts(s.body).map((part) =>
+          part.kind === 'p' ? <p set:html={part.html} />
+          : part.kind === 'ul' ? <ul>{part.items.map((x) => <li set:html={x} />)}</ul>
+          : <ol>{part.items.map((x) => <li set:html={x} />)}</ol>
+        )}
+        {s.items && s.items.length > 0 && <ul>{s.items.map((x) => <li set:html={inlineMarkdown(x)} />)}</ul>}
+      </section>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-doc {
+    display: grid;
+    gap: 2rem;
+    width: 100%;
+    max-width: 64rem;
+  }
+  @media (min-width: 64em) {
+    .b-doc[data-toc] {
+      grid-template-columns: 15rem minmax(0, 1fr);
+      align-items: start;
+    }
+    .b-doc__toc {
+      position: sticky;
+      top: 6rem;
+    }
+  }
+  .b-doc__toc {
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    padding: 1rem 1.1rem;
+  }
+  .b-doc__toc-title {
+    margin: 0 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .b-doc__toc ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.35rem;
+    font-size: 0.9375rem;
+  }
+  .b-doc__toc a {
+    color: var(--fg);
+    text-decoration: none;
+  }
+  .b-doc__toc a:hover {
+    color: var(--gold);
+    text-decoration: underline;
+  }
+  .b-doc__toc-num {
+    color: var(--muted);
+    font-variant-numeric: tabular-nums;
+  }
+  .b-doc__body {
+    max-width: var(--max);
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+  }
+  .b-doc__updated {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+  .b-doc__intro {
+    margin: 0;
+    font-size: 1.125rem;
+    line-height: 1.6;
+    color: var(--muted);
+  }
+  .b-doc__clause {
+    scroll-margin-top: 6rem;
+  }
+  .b-doc__clause h2 {
+    scroll-margin-top: 6rem;
+    margin: 0 0 0.6rem;
+    font-size: 1.25rem;
+  }
+  .b-doc__num {
+    color: var(--gold);
+    font-variant-numeric: tabular-nums;
+  }
+  .b-doc__clause p,
+  .b-doc__clause ul,
+  .b-doc__clause ol {
+    margin: 0 0 0.75rem;
+    line-height: 1.7;
+  }
+  .b-doc__clause ul,
+  .b-doc__clause ol {
+    padding-inline-start: 1.4em;
+  }
+  .b-doc__clause :global(a) {
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  @media print {
+    .b-doc__toc { display: none; }
+    .b-doc[data-toc] { grid-template-columns: 1fr; }
+  }
+</style>

package/components/recipes/Documents.astro

@@ -8,7 +8,7 @@
 import Heading from '../blocks/Heading.astro';
 import Icon from '../Icon.astro';
 import { documentGroups, type DocumentItem } from '../../lib/documents';
-
+import { inlineMarkdown } from '../../lib/inline-markdown';
 interface Props {
   title?: string;
   intro?: string;
@@ -23,7 +23,7 @@ const groups = documentGroups(items, groupByYear);
   {(title || intro) && (
     <div class="b-docs__head">
       {title && <Heading text={title} level={2} />}
-      {intro && <p class="b-docs__intro">{intro}</p>}
+      {intro && <p class="b-docs__intro" set:html={inlineMarkdown(intro)} />}
     </div>
   )}
   {items.length === 0 ? (