ferst-core 0.4.2 → 0.4.7

package/components/CalendarEmbed.astro

@@ -76,48 +76,31 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
 </section>
 
 <script>
-  // Bundled (runs once even with multiple calendars on a page). Consent is the
-  // shared site-wide embed consent: accepting the cookie banner (or the footer
-  // panel) auto-loads every embed. The per-embed button is a fallback that grants
-  // the same consent, so one click still loads everything and is remembered.
-  import { hasConsent, setConsent, onConsentChange } from '../lib/consent-client';
-
-  const embeds = document.querySelectorAll<HTMLElement>('.b-calendar__embed');
+  // Shared consent-gated embed loader (one implementation for calendar/map/
+  // locations). Accepting the cookie banner or the footer panel auto-loads every
+  // embed; the per-embed button is a fallback granting the same shared consent.
+  import { initEmbedConsent, makeEmbedFrame } from '../lib/embed-consent';
 
   // Google Calendar embeds render light-only — `bgcolor` recolours just the
   // surround, never the grid, so matching it to a dark surface still left a white
-  // calendar sitting in the dark page. Instead we force a deterministic WHITE
-  // surround here (independent of the theme at load) and, in dark mode, invert the
-  // whole frame in CSS (below). The invert is keyed on the site's [data-theme], so
-  // it also flips live when the visitor toggles the theme.
-  function calendarUrl(url: string): string {
-    if (!/google\.com\/calendar|calendar\.google\.com/.test(url)) return url;
-    return url + (url.includes('?') ? '&' : '?') + 'bgcolor=%23ffffff';
-  }
-
-  function load(el: HTMLElement) {
-    if (el.dataset.loaded === 'true') return;
-    const url = el.dataset.embedUrl;
-    const frameSlot = el.querySelector<HTMLElement>('.b-calendar__frame');
-    if (!url || !frameSlot) return;
-    const frame = document.createElement('iframe');
-    frame.src = calendarUrl(url);
-    frame.title = el.dataset.title || 'Calendar';
-    frame.loading = 'lazy';
-    frame.style.width = '100%';
-    frame.style.height = (el.dataset.height || '600') + 'px';
-    frame.style.border = '0';
-    frameSlot.replaceChildren(frame);
-    el.dataset.loaded = 'true';
-    const consent = el.querySelector<HTMLElement>('.b-calendar__consent');
-    if (consent) consent.hidden = true;
-  }
-  const loadAll = () => embeds.forEach(load);
+  // calendar in the dark page. We force a deterministic WHITE surround here
+  // (independent of the theme at load) and, in dark mode, invert the whole frame
+  // in CSS (below) — keyed on [data-theme] so it also flips live on a toggle.
+  const withWhiteSurround = (url: string) =>
+    /google\.com\/calendar|calendar\.google\.com/.test(url)
+      ? url + (url.includes('?') ? '&' : '?') + 'bgcolor=%23ffffff'
+      : url;
 
-  if (hasConsent()) loadAll();
-  onConsentChange((allowed) => { if (allowed) loadAll(); });
-  embeds.forEach((el) => {
-    el.querySelector<HTMLButtonElement>('.b-calendar__load')?.addEventListener('click', () => setConsent(true));
+  initEmbedConsent({
+    root: '.b-calendar__embed',
+    frame: '.b-calendar__frame',
+    consent: '.b-calendar__consent',
+    button: '.b-calendar__load',
+    buildFrame: (el, url) =>
+      makeEmbedFrame(withWhiteSurround(url), {
+        title: el.dataset.title || 'Calendar',
+        height: (el.dataset.height || '600') + 'px',
+      }),
   });
 </script>
 

package/components/CookiePolicy.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * CookiePolicy — the auto-generated cookie policy page body. It does NOT decide
+ * what to show: the consumer scans its own pages (scanCookieUses in
+ * content/cookies) and passes the resulting model, so the categories and items
+ * always reflect the recipes/templates the site actually uses (functionality-
+ * driven, not client-specific).
+ *
+ * Necessary items are the site's own functional storage (always on). Additional
+ * items are third-party embeds gated behind the shared embed consent; one
+ * category toggle turns them on/off, wired to the SAME consent as the cookie
+ * banner and footer panel, so all three stay in sync. Token-driven.
+ */
+import type { CookiePolicyModel } from '../content/cookies';
+
+interface Props {
+  model: CookiePolicyModel;
+  title?: string;
+  intro?: string;
+}
+const {
+  model,
+  title = 'Cookie Policy',
+  intro = 'This page explains the cookies and similar storage this website uses. It is generated from the features actually in use here, so it always reflects what is really on the site. You can turn additional (third-party) content on or off at any time — your choice is remembered on this device.',
+} = Astro.props;
+const hasAdditional = model.additional.length > 0;
+---
+
+<section class="b-cookie-policy">
+  <h1 class="b-cookie-policy__title">{title}</h1>
+  <p class="b-cookie-policy__intro">{intro}</p>
+
+  <div class="b-cookie-policy__cat ferst-tile">
+    <div class="b-cookie-policy__cat-head">
+      <h2 class="b-cookie-policy__cat-title">Necessary</h2>
+      <span class="b-cookie-policy__badge">Always on</span>
+    </div>
+    <p class="b-cookie-policy__cat-note">These keep the site working and remember your choices. They stay on your device only and are never shared, so they can’t be switched off.</p>
+    <ul class="b-cookie-policy__list">
+      {model.necessary.map((u) => (
+        <li class="b-cookie-policy__item">
+          <p class="b-cookie-policy__item-name">{u.name}</p>
+          <p class="b-cookie-policy__item-purpose">{u.purpose}</p>
+          <p class="b-cookie-policy__item-storage">{u.storage}</p>
+        </li>
+      ))}
+    </ul>
+  </div>
+
+  <div class="b-cookie-policy__cat ferst-tile">
+    <div class="b-cookie-policy__cat-head">
+      <h2 class="b-cookie-policy__cat-title">Additional</h2>
+      {hasAdditional && (
+        <label class="b-cookie-policy__switch">
+          <span class="b-cookie-policy__switch-state" data-on="On" data-off="Off">Off</span>
+          <input type="checkbox" id="cookie-policy-additional" class="b-cookie-policy__switch-input" />
+          <span class="b-cookie-policy__switch-track" aria-hidden="true"></span>
+        </label>
+      )}
+    </div>
+    {hasAdditional ? (
+      <>
+        <p class="b-cookie-policy__cat-note">These let third-party content load, which may set that provider’s cookies. Nothing loads until you turn this on.</p>
+        <ul class="b-cookie-policy__list">
+          {model.additional.map((u) => (
+            <li class="b-cookie-policy__item">
+              <p class="b-cookie-policy__item-name">{u.name}{u.provider && <span class="b-cookie-policy__item-provider"> · {u.provider}</span>}</p>
+              <p class="b-cookie-policy__item-purpose">{u.purpose}</p>
+              <p class="b-cookie-policy__item-storage">{u.storage}</p>
+            </li>
+          ))}
+        </ul>
+      </>
+    ) : (
+      <p class="b-cookie-policy__cat-note">This site currently uses no additional or third-party cookies.</p>
+    )}
+  </div>
+</section>
+
+<script>
+  // Wire the Additional toggle to the shared embed consent so it stays in sync
+  // with the cookie banner and footer panel (accept there → this shows On, and
+  // vice-versa). Turning it on/off here records the same site-wide choice.
+  import { hasConsent, setConsent, onConsentChange } from '../lib/consent-client';
+  const box = document.getElementById('cookie-policy-additional') as HTMLInputElement | null;
+  if (box) {
+    const state = box.closest('.b-cookie-policy__switch')?.querySelector<HTMLElement>('.b-cookie-policy__switch-state');
+    const sync = (on: boolean) => {
+      box.checked = on;
+      if (state) state.textContent = on ? state.dataset.on ?? 'On' : state.dataset.off ?? 'Off';
+    };
+    sync(hasConsent());
+    box.addEventListener('change', () => setConsent(box.checked));
+    onConsentChange((allowed) => sync(allowed));
+  }
+</script>
+
+<style>
+  .b-cookie-policy {
+    max-width: 52rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  .b-cookie-policy__title { margin: 0; }
+  .b-cookie-policy__intro { margin: 0; color: var(--muted); line-height: 1.7; max-width: 46rem; }
+
+  /* .ferst-tile supplies the surface (bg/border/radius/shadow). */
+  .b-cookie-policy__cat { padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 0.9rem; }
+  .b-cookie-policy__cat-head {
+    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
+  }
+  .b-cookie-policy__cat-title { margin: 0; font-size: 1.3rem; }
+  .b-cookie-policy__cat-note { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-cookie-policy__badge {
+    font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
+    letter-spacing: 0.08em; text-transform: uppercase;
+    color: var(--gold);
+    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
+    border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap;
+  }
+
+  .b-cookie-policy__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
+  .b-cookie-policy__item {
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border);
+  }
+  .b-cookie-policy__item:first-child { padding-top: 0; border-top: none; }
+  .b-cookie-policy__item-name { margin: 0; font-family: var(--font-heading); font-weight: 700; }
+  .b-cookie-policy__item-provider { color: var(--muted); font-weight: 400; }
+  .b-cookie-policy__item-purpose { margin: 0.15rem 0 0; line-height: 1.55; }
+  .b-cookie-policy__item-storage { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted); }
+
+  /* Accessible toggle: a real checkbox drives a styled track. */
+  .b-cookie-policy__switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; }
+  .b-cookie-policy__switch-state {
+    font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--muted); min-width: 1.6rem; text-align: right;
+  }
+  .b-cookie-policy__switch-input {
+    position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer;
+  }
+  .b-cookie-policy__switch-track {
+    position: relative; width: 44px; height: 26px; border-radius: 999px; flex: 0 0 auto;
+    background: color-mix(in srgb, var(--muted) 45%, transparent);
+    transition: background 0.15s ease;
+  }
+  .b-cookie-policy__switch-track::after {
+    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
+    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    transition: transform 0.15s ease;
+  }
+  .b-cookie-policy__switch-input:checked ~ .b-cookie-policy__switch-track { background: var(--gold); }
+  .b-cookie-policy__switch-input:checked ~ .b-cookie-policy__switch-track::after { transform: translateX(18px); }
+  .b-cookie-policy__switch-input:focus-visible ~ .b-cookie-policy__switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }
+</style>

package/components/recipes/FeatureCards.astro

@@ -17,6 +17,9 @@ interface Props {
   cards?: { icon?: string; title: string; text?: string; href?: string }[];
 }
 const { title, intro, columns = 3, cards = [] } = Astro.props;
+// Never reserve more columns than there are cards (a lone card in a 3-col grid
+// would strand two empty cells); `data-single` centres a solitary card.
+const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3 | 4;
 ---
 
 <section class="b-feature-cards">
@@ -26,7 +29,7 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
       {intro && <p class="b-feature-cards__intro">{intro}</p>}
     </div>
   )}
-  <div class="b-feature-cards__grid" data-cols={columns}>
+  <div class="b-feature-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
     {cards.map((card) => (
       <Card>
         {card.icon && isIconKey(card.icon) && (
@@ -77,6 +80,9 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
     .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
     .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
   }
+  /* A solitary card is a centred feature, not a full-width slab. */
+  .b-feature-cards__grid[data-single] { max-width: 26rem; margin-inline: auto;
+  }
   @media (min-width: 64em) {
     .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
   }

package/components/recipes/Gallery.astro

@@ -7,9 +7,11 @@ interface Props {
   images?: { src: string; alt?: string; caption?: string }[];
 }
 const { columns = 3, images = [] } = Astro.props;
+// Never reserve more columns than there are images; `data-single` centres a lone one.
+const cols = Math.min(columns, Math.max(images.length, 1)) as 1 | 2 | 3 | 4;
 ---
 
-<div class="b-gallery" data-cols={columns}>
+<div class="b-gallery" data-cols={cols} data-single={images.length === 1 ? 'true' : undefined}>
   {images.map((img) => (
     <figure class="b-gallery__item">
       <img src={img.src} alt={img.alt ?? ''} loading="lazy" decoding="async" />
@@ -27,6 +29,8 @@ const { columns = 3, images = [] } = Astro.props;
     margin-inline: auto;
     padding-inline: 1rem;
   }
+  /* A solitary image is a centred feature, not a full-bleed slab. */
+  .b-gallery[data-single] { max-width: 34rem; }
   @media (min-width: 48em) {
     .b-gallery[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
     .b-gallery[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }

package/components/recipes/Locations.astro

@@ -25,6 +25,9 @@ interface Props {
   items?: Item[];
 }
 const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astro.props;
+// A single location shouldn't sit in one half of a two-column grid; `data-single`
+// centres a lone tile. (A deliberate columns=1 with several items is untouched.)
+const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2;
 ---
 
 <section class="b-locations">
@@ -34,9 +37,9 @@ const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astr
       {intro && <p class="b-locations__intro">{intro}</p>}
     </div>
   )}
-  <div class="b-locations__grid" data-cols={columns}>
+  <div class="b-locations__grid" data-cols={cols} data-single={items.length === 1 ? 'true' : undefined}>
     {items.map((item) => (
-      <article class="b-locations__card">
+      <article class="b-locations__card ferst-tile ferst-tile--sm">
         <div class="b-locations__map">
           {isSafeEmbedUrl(item.embedUrl) ? (
             <div class="b-loc-map" data-embed-url={item.embedUrl} data-title={`Map — ${item.name}`}>
@@ -65,34 +68,18 @@ const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astr
 </section>
 
 <script>
-  // Shared site consent: accepting the cookie banner auto-loads every map here.
-  import { hasConsent, setConsent, onConsentChange } from '../../lib/consent-client';
+  // Shared consent-gated embed loader (see lib/embed-consent). Accepting the cookie
+  // banner or the footer panel auto-loads every map tile here; the per-tile button
+  // is a fallback that grants the same shared consent.
+  import { initEmbedConsent, makeEmbedFrame } from '../../lib/embed-consent';
 
-  const maps = document.querySelectorAll<HTMLElement>('.b-loc-map');
-  function load(el: HTMLElement) {
-    if (el.dataset.loaded === 'true') return;
-    const url = el.dataset.embedUrl;
-    const slot = el.querySelector<HTMLElement>('.b-loc-map__frame');
-    if (!url || !slot) return;
-    const frame = document.createElement('iframe');
-    frame.src = url;
-    frame.title = el.dataset.title || 'Map';
-    frame.loading = 'lazy';
-    frame.referrerPolicy = 'no-referrer-when-downgrade';
-    frame.style.width = '100%';
-    frame.style.height = '100%';
-    frame.style.border = '0';
-    slot.replaceChildren(frame);
-    el.dataset.loaded = 'true';
-    const consent = el.querySelector<HTMLElement>('.b-loc-map__consent');
-    if (consent) consent.hidden = true;
-  }
-  const loadAll = () => maps.forEach(load);
-
-  if (hasConsent()) loadAll();
-  onConsentChange((allowed) => { if (allowed) loadAll(); });
-  maps.forEach((el) => {
-    el.querySelector<HTMLButtonElement>('.b-loc-map__load')?.addEventListener('click', () => setConsent(true));
+  initEmbedConsent({
+    root: '.b-loc-map',
+    frame: '.b-loc-map__frame',
+    consent: '.b-loc-map__consent',
+    button: '.b-loc-map__load',
+    buildFrame: (el, url) =>
+      makeEmbedFrame(url, { title: el.dataset.title || 'Map', height: '100%', referrer: true }),
   });
 </script>
 
@@ -108,16 +95,15 @@ const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astr
   .b-locations__head { display: flex; flex-direction: column; gap: 0.6rem; }
   .b-locations__intro { margin: 0; color: var(--muted); max-width: var(--max); }
   .b-locations__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
+  /* A solitary location is a centred feature, not a full-width slab. */
+  .b-locations__grid[data-single] { max-width: 32rem; margin-inline: auto; }
   @media (min-width: 44em) {
     .b-locations__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
   }
   .b-locations__card {
     display: flex;
     flex-direction: column;
-    background: var(--bg-surface);
-    border: var(--card-border);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-sm);
+    /* surface comes from .ferst-tile .ferst-tile--sm (bg/border/radius/shadow-sm) */
     overflow: hidden;
   }
   /* Map region — uniform ratio; the consent card fills it until the iframe loads. */

package/components/recipes/MapEmbed.astro

@@ -71,37 +71,22 @@ const safe = isSafeEmbedUrl(embedUrl);
 </section>
 
 <script>
-  // Bundled (runs once even with multiple maps on a page). Uses the shared site
-  // embed consent: accepting the cookie banner (or the footer panel) auto-loads
-  // every embed. The per-embed button grants that same consent as a fallback.
-  import { hasConsent, setConsent, onConsentChange } from '../../lib/consent-client';
+  // Shared consent-gated embed loader (see lib/embed-consent). Accepting the cookie
+  // banner or the footer panel auto-loads every embed; the per-embed button is a
+  // fallback that grants the same shared consent.
+  import { initEmbedConsent, makeEmbedFrame } from '../../lib/embed-consent';
 
-  const embeds = document.querySelectorAll<HTMLElement>('.b-map__embed');
-
-  function load(el: HTMLElement) {
-    if (el.dataset.loaded === 'true') return;
-    const url = el.dataset.embedUrl;
-    const frameSlot = el.querySelector<HTMLElement>('.b-map__frame');
-    if (!url || !frameSlot) return;
-    const frame = document.createElement('iframe');
-    frame.src = url;
-    frame.title = el.dataset.title || 'Map';
-    frame.loading = 'lazy';
-    frame.referrerPolicy = 'no-referrer-when-downgrade';
-    frame.style.width = '100%';
-    frame.style.height = (el.dataset.height || '450') + 'px';
-    frame.style.border = '0';
-    frameSlot.replaceChildren(frame);
-    el.dataset.loaded = 'true';
-    const consent = el.querySelector<HTMLElement>('.b-map__consent');
-    if (consent) consent.hidden = true;
-  }
-  const loadAll = () => embeds.forEach(load);
-
-  if (hasConsent()) loadAll();
-  onConsentChange((allowed) => { if (allowed) loadAll(); });
-  embeds.forEach((el) => {
-    el.querySelector<HTMLButtonElement>('.b-map__load')?.addEventListener('click', () => setConsent(true));
+  initEmbedConsent({
+    root: '.b-map__embed',
+    frame: '.b-map__frame',
+    consent: '.b-map__consent',
+    button: '.b-map__load',
+    buildFrame: (el, url) =>
+      makeEmbedFrame(url, {
+        title: el.dataset.title || 'Map',
+        height: (el.dataset.height || '450') + 'px',
+        referrer: true,
+      }),
   });
 </script>
 

package/components/recipes/MediaCards.astro

@@ -28,6 +28,8 @@ interface Props {
   cards?: Card[];
 }
 const { title, intro, columns = 3, cards = [] } = Astro.props;
+// Never reserve more columns than there are cards; `data-single` centres a lone one.
+const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3;
 ---
 
 <section class="b-media-cards">
@@ -37,9 +39,14 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
       {intro && <p class="b-media-cards__intro">{intro}</p>}
     </div>
   )}
-  <div class="b-media-cards__grid" data-cols={columns}>
-    {cards.map((card) => (
-      <article class:list={['b-media-cards__card', card.href && 'is-link']}>
+  <div class="b-media-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
+    {cards.map((card) => {
+      // Surface a mailto:/tel: as visible, copyable text — a plain mailto does
+      // nothing on a device with no mail app, so the address must be readable too.
+      const email = card.href?.startsWith('mailto:') ? card.href.slice(7).split('?')[0] : null;
+      const phone = card.href?.startsWith('tel:') ? card.href.slice(4) : null;
+      return (
+      <article class:list={['b-media-cards__card', 'ferst-tile', 'ferst-tile--sm', card.href && 'is-link']}>
         {card.image && (
           <div class="b-media-cards__media">
             <img src={card.image.src} alt={card.image.alt ?? ''} loading="lazy" />
@@ -54,12 +61,16 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
           </h3>
           {card.meta && <p class="b-media-cards__meta">{card.meta}</p>}
           {card.text && <p class="b-media-cards__text">{card.text}</p>}
-          {card.href && (
+          {(email || phone) && (
+            <span class="b-media-cards__contact">{email ?? phone}</span>
+          )}
+          {card.href && !email && !phone && (
             <span class="b-media-cards__cta" aria-hidden="true">{card.linkLabel ?? 'Learn more'} →</span>
           )}
         </div>
       </article>
-    ))}
+      );
+    })}
   </div>
 </section>
 
@@ -89,6 +100,8 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
     grid-template-columns: 1fr;
     gap: 1.5rem;
   }
+  /* A solitary card is a centred feature, not a full-width slab. */
+  .b-media-cards__grid[data-single] { max-width: 28rem; margin-inline: auto; }
   @media (min-width: 40em) {
     .b-media-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
     .b-media-cards__grid[data-cols='3'] { grid-template-columns: repeat(2, 1fr); }
@@ -100,10 +113,7 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
     position: relative;
     display: flex;
     flex-direction: column;
-    background: var(--bg-surface);
-    border: var(--card-border);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-sm);
+    /* surface comes from .ferst-tile .ferst-tile--sm (bg/border/radius/shadow-sm) */
     overflow: hidden;
     transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
   }
@@ -189,4 +199,14 @@ const { title, intro, columns = 3, cards = [] } = Astro.props;
     font-weight: 600;
     color: var(--gold);
   }
+  /* A mailto/tel shown as visible, copyable text (below any description). */
+  .b-media-cards__contact {
+    margin-top: auto;
+    padding-top: 0.5rem;
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--gold);
+    overflow-wrap: anywhere;
+  }
 </style>

package/components/recipes/Pricing.astro

@@ -32,7 +32,7 @@ const { title, intro, plans = [] } = Astro.props;
   )}
   <div class="b-pricing__grid" data-count={plans.length}>
     {plans.map((plan) => (
-      <div class="b-pricing__plan" data-featured={plan.featured ? 'true' : 'false'}>
+      <div class="b-pricing__plan ferst-tile" data-featured={plan.featured ? 'true' : 'false'}>
         {plan.featured && <span class="b-pricing__badge">Most popular</span>}
         <p class="b-pricing__name">{plan.name}</p>
         <p class="b-pricing__price">
@@ -94,10 +94,8 @@ const { title, intro, plans = [] } = Astro.props;
     flex-direction: column;
     gap: 0.75rem;
     padding: 1.75rem;
-    border-radius: var(--radius);
-    border: var(--card-border);
-    background: var(--bg-surface);
-    box-shadow: var(--shadow-md);
+    /* surface (bg/border/radius/shadow) comes from .ferst-tile; the featured
+       variant below overrides border-colour + shadow at higher specificity. */
   }
   .b-pricing__plan[data-featured='true'] {
     border-color: var(--gold);

package/components/recipes/Stats.astro

@@ -34,7 +34,7 @@ const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2 | 3 | 4;
     )}
     <div class="b-stats__grid" data-cols={cols}>
       {items.map((item) => (
-        <div class="b-stats__item">
+        <div class="b-stats__item ferst-tile">
           <span class="b-stats__value">{item.value}</span>
           {item.label && <span class="b-stats__label">{item.label}</span>}
           {item.description && <span class="b-stats__desc">{item.description}</span>}
@@ -93,10 +93,7 @@ const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2 | 3 | 4;
     text-align: center;
     gap: 0.5rem;
     padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
-    border-radius: var(--radius);
-    background: var(--bg-surface);
-    border: var(--card-border);
-    box-shadow: var(--shadow-md);
+    /* surface (bg/border/radius/shadow) comes from .ferst-tile */
   }
   .b-stats__value {
     font-family: var(--font-heading);

package/components/recipes/Tiles.astro

@@ -34,6 +34,8 @@ interface Props {
   tiles?: Tile[];
 }
 const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tiles = [] } = Astro.props;
+// Never reserve more columns than there are tiles; `data-single` centres a lone one.
+const cols = Math.min(columns, Math.max(tiles.length, 1)) as 1 | 2 | 3 | 4;
 ---
 
 <section class="b-tiles">
@@ -43,7 +45,7 @@ const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tile
       {intro && <p class="b-tiles__intro">{intro}</p>}
     </div>
   )}
-  <div class="b-tiles__grid" data-cols={columns} data-variant={variant} data-spotlight={spotlight ? 'true' : 'false'}>
+  <div class="b-tiles__grid" data-cols={cols} data-single={tiles.length === 1 ? 'true' : undefined} data-variant={variant} data-spotlight={spotlight ? 'true' : 'false'}>
     {tiles.map((tile) => {
       const Tag = tile.href ? 'a' : 'div';
       const bg =
@@ -93,6 +95,8 @@ const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tile
     grid-template-columns: 1fr;
     gap: 1.25rem;
   }
+  /* A solitary tile is a centred feature, not a full-width slab. */
+  .b-tiles__grid[data-single] { max-width: 26rem; margin-inline: auto; }
   @media (min-width: 48em) {
     .b-tiles__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
     .b-tiles__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }

package/content/cookies.ts

@@ -0,0 +1,103 @@
+/**
+ * Cookie / third-party-storage registry + a scanner that reports which uses are
+ * actually active on a given site. This powers the auto-generated cookie policy
+ * page: its categories and items are DERIVED from the recipes/templates the site
+ * uses — functionality-driven, never hand-written or client-specific.
+ *
+ * Two canonical categories:
+ *   • necessary  — the site's OWN functional storage (no third parties). Always
+ *                  on; can't be switched off. Present on every site.
+ *   • additional — third-party embeds that may set the provider's cookies when
+ *                  they load. Gated behind the site's shared embed consent, and
+ *                  listed only when a recipe/template that uses them is present.
+ *
+ * Adding a new cookie-using recipe = one entry here (its `blocks` and/or a
+ * detection flag); the policy page then lists it automatically wherever it's used.
+ * Pure + framework-free so it's unit-testable without a render.
+ */
+
+export type CookieCategory = 'necessary' | 'additional';
+
+export interface CookieUse {
+  /** Stable id (also the consent grouping key in future per-item models). */
+  id: string;
+  category: CookieCategory;
+  /** Human name shown on the policy page, e.g. "Google Maps". */
+  name: string;
+  /** Third-party provider, when applicable. */
+  provider?: string;
+  /** One-line plain-English purpose. */
+  purpose: string;
+  /** What is stored and where. */
+  storage: string;
+}
+
+/** Additional uses carry detection rules; stripped before returning to the view. */
+interface AdditionalUse extends CookieUse {
+  /** Present if any of these block `type`s appears anywhere on the site. */
+  blocks?: string[];
+  /** Present if the site has a Google Calendar configured (a dedicated page). */
+  calendar?: boolean;
+}
+
+/** The site's own functional storage — always present, always on. */
+const NECESSARY: readonly CookieUse[] = [
+  {
+    id: 'consent-choice',
+    category: 'necessary',
+    name: 'Cookie preference',
+    purpose: 'Remembers whether you allowed or declined additional content, so you are not asked again.',
+    storage: 'Stored on your device only (local storage), never shared.',
+  },
+  {
+    id: 'theme',
+    category: 'necessary',
+    name: 'Appearance',
+    purpose: 'Remembers your light or dark theme choice.',
+    storage: 'Stored on your device only (local storage), never shared.',
+  },
+];
+
+/** Third-party embeds — listed only when a site actually uses them. */
+const ADDITIONAL: readonly AdditionalUse[] = [
+  {
+    id: 'google-maps',
+    category: 'additional',
+    name: 'Google Maps',
+    provider: 'Google',
+    purpose: 'Shows embedded maps of where to find us. Google may set cookies when a map loads.',
+    storage: 'Third-party cookies set by Google.',
+    blocks: ['locations', 'mapEmbed'],
+  },
+  {
+    id: 'google-calendar',
+    category: 'additional',
+    name: 'Google Calendar',
+    provider: 'Google',
+    purpose: 'Shows the parish calendar. Google may set cookies when the calendar loads.',
+    storage: 'Third-party cookies set by Google.',
+    blocks: ['calendar'],
+    calendar: true,
+  },
+];
+
+export interface CookieScanInput {
+  /** Every block `type` that appears anywhere on the site. */
+  blockTypes: Iterable<string>;
+  /** True when the site has a Google Calendar configured (dedicated calendar page). */
+  calendarConfigured?: boolean;
+}
+
+export interface CookiePolicyModel {
+  necessary: CookieUse[];
+  additional: CookieUse[];
+}
+
+/** Report the cookie uses actually active on a site, grouped by category. */
+export function scanCookieUses(input: CookieScanInput): CookiePolicyModel {
+  const types = new Set(input.blockTypes);
+  const additional = ADDITIONAL.filter(
+    (u) => (u.blocks?.some((b) => types.has(b)) ?? false) || (u.calendar === true && !!input.calendarConfigured),
+  ).map(({ blocks, calendar, ...use }) => use); // drop detection fields from the view model
+  return { necessary: NECESSARY.map((u) => ({ ...u })), additional };
+}

package/layouts/Base.astro

@@ -142,6 +142,35 @@ const metaDescription = description ?? identity.description;
         }
       }) as EventListener);
     </script>
+    <script>
+      // Open external links in a new tab — site-wide and future-proof. Any <a>
+      // pointing to a DIFFERENT origin over http(s) gets target=_blank +
+      // rel="noopener noreferrer"; mailto:/tel:/anchors and same-site links are
+      // left untouched. Runs on load and after every view-transition navigation,
+      // so it covers every component AND markdown-authored links (e.g. FAQ
+      // answers, prose) without each one having to opt in. Idempotent, so
+      // components that already set target/rel are unaffected.
+      function ferstMarkExternalLinks() {
+        const host = location.host;
+        document.querySelectorAll<HTMLAnchorElement>('a[href]').forEach((a) => {
+          let url: URL;
+          try {
+            url = new URL(a.href, location.href);
+          } catch {
+            return;
+          }
+          if (url.protocol !== 'http:' && url.protocol !== 'https:') return; // skip mailto/tel/etc.
+          if (url.host === host) return; // same-site
+          if (!a.target) a.target = '_blank';
+          const rel = new Set((a.getAttribute('rel') || '').split(/\s+/).filter(Boolean));
+          rel.add('noopener');
+          rel.add('noreferrer');
+          a.setAttribute('rel', Array.from(rel).join(' '));
+        });
+      }
+      ferstMarkExternalLinks();
+      document.addEventListener('astro:page-load', ferstMarkExternalLinks);
+    </script>
   </head>
   <body>
     <SiteHeader

package/lib/embed-consent.ts

@@ -0,0 +1,73 @@
+/**
+ * Shared client-side loader for consent-gated third-party embeds (Google Calendar,
+ * Google Maps, the Locations tiles). One implementation, so every embed gates,
+ * loads and reacts to consent identically — instead of the same ~25-line script
+ * copied into each component (where a fix, or a bug, lands in only one copy).
+ *
+ * Behaviour: nothing loads until the visitor consents. Accepting the site cookie
+ * banner (or the footer preferences panel) grants the shared consent and
+ * auto-loads EVERY registered embed on the page; the per-embed button is a
+ * fallback that grants that same shared consent. Consent is remembered per
+ * visitor. Import from a component `<script>` (it touches the DOM).
+ *
+ * Each embed root element carries the data the loader needs:
+ *   data-embed-url   the https URL to load (required)
+ *   data-title       the iframe title (optional)
+ *   data-height      pixel height, for fixed-height embeds (optional)
+ * and contains a `frame` slot (filled with the iframe), a `consent` card (hidden
+ * once loaded) and a `button` that grants consent.
+ */
+import { hasConsent, setConsent, onConsentChange } from './consent-client';
+
+export interface EmbedConsentConfig {
+  /** Selector for each embed root (one per embed on the page). */
+  root: string;
+  /** Selector, within a root, of the empty slot the iframe is injected into. */
+  frame: string;
+  /** Selector, within a root, of the consent card to hide once loaded. */
+  consent: string;
+  /** Selector, within a root, of the button that grants consent. */
+  button: string;
+  /** Build the iframe for one root — lets each embed set its own src / size / attrs. */
+  buildFrame: (el: HTMLElement, url: string) => HTMLIFrameElement;
+}
+
+/** Wire up every consent-gated embed matching `cfg.root`. Call once per component. */
+export function initEmbedConsent(cfg: EmbedConsentConfig): void {
+  const roots = document.querySelectorAll<HTMLElement>(cfg.root);
+  if (!roots.length) return;
+
+  function load(el: HTMLElement): void {
+    if (el.dataset.loaded === 'true') return;
+    const url = el.dataset.embedUrl;
+    const slot = el.querySelector<HTMLElement>(cfg.frame);
+    if (!url || !slot) return;
+    slot.replaceChildren(cfg.buildFrame(el, url));
+    el.dataset.loaded = 'true';
+    const card = el.querySelector<HTMLElement>(cfg.consent);
+    if (card) card.hidden = true;
+  }
+  const loadAll = (): void => roots.forEach(load);
+
+  if (hasConsent()) loadAll();
+  onConsentChange((allowed) => { if (allowed) loadAll(); });
+  roots.forEach((el) => {
+    el.querySelector<HTMLButtonElement>(cfg.button)?.addEventListener('click', () => setConsent(true));
+  });
+}
+
+/** Build a standard lazy embed iframe (100% width, 0 border). */
+export function makeEmbedFrame(
+  src: string,
+  opts: { title?: string; height?: string; referrer?: boolean } = {},
+): HTMLIFrameElement {
+  const f = document.createElement('iframe');
+  f.src = src;
+  if (opts.title) f.title = opts.title;
+  f.loading = 'lazy';
+  if (opts.referrer) f.referrerPolicy = 'no-referrer-when-downgrade';
+  f.style.width = '100%';
+  f.style.height = opts.height ?? '100%';
+  f.style.border = '0';
+  return f;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.4.2",
+  "version": "0.4.7",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",

package/styles/theme.css

@@ -130,3 +130,29 @@
   --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
   --accent-2: color-mix(in oklch, var(--gold) 82%, #fff);
 }
+
+/* ── Global utilities ────────────────────────────────────────────────────────
+   Unscoped helpers usable from any component — including from inside an Astro
+   scoped style, where a parent can't reach a child element's root. */
+
+/* Overlay convention: an element hidden via the `hidden` attribute must never
+   linger in the layout intercepting pointer events. An author `display` rule
+   (e.g. `display:flex` on a fixed banner) otherwise beats the UA `[hidden]`
+   rule, leaving an invisible click-blocker — the cookie-banner / map-tile
+   footgun we hit twice. This is the site-wide safety net; components need no
+   per-element guard of their own. */
+[hidden] { display: none !important; }
+
+/* Card/tile surface — the single home for the "tile" look, driven by the global
+   surface knobs (--radius / --card-border / --shadow-*) so every tile restyles
+   at once, in both themes. Add `.ferst-tile` to a recipe's card element instead
+   of re-inlining these four properties; `.ferst-tile--sm` swaps to the lighter
+   shadow for denser grids. Recipes with a genuinely different surface (image /
+   gradient tiles, tinted panels) keep their own styling. */
+.ferst-tile {
+  background: var(--bg-surface);
+  border: var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+}
+.ferst-tile--sm { box-shadow: var(--shadow-sm); }