ferst-core 0.1.0 → 0.2.1

package/components/SiteHeader.astro

@@ -15,8 +15,8 @@ import type { NavLink, NavGroup } from '../content/schemas';
 interface Props {
   path: string;
   headerClass?: string;
-  primaryLogoLight: string;
-  primaryLogoDark: string;
+  primaryLogoLight?: string;
+  primaryLogoDark?: string;
   brandAlt: string;
   primaryNav: NavLink[];
   /** Optional dropdown / mega-menu group. Client-configured — the core ships none. */
@@ -56,28 +56,34 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
 -->
 <header class:list={['site-header', headerClass]} transition:persist transition:name="site-header" transition:animate="none">
   <a href="/" class="brand">
-    <img
-      id="primary-logo"
-      src={primaryLogoLight}
-      data-src-light={primaryLogoLight}
-      data-src-dark={primaryLogoDark}
-      alt={brandAlt}
-      class="primary-logo"
-      width="545"
-      height="151"
-      loading="eager"
-      fetchpriority="high"
-      decoding="sync"
-    />
+    {primaryLogoLight ? (
+      <img
+        id="primary-logo"
+        src={primaryLogoLight}
+        data-src-light={primaryLogoLight}
+        data-src-dark={primaryLogoDark ?? primaryLogoLight}
+        alt={brandAlt}
+        class="primary-logo"
+        width="545"
+        height="151"
+        loading="eager"
+        fetchpriority="high"
+        decoding="sync"
+      />
+    ) : (
+      <span class="brand-wordmark">{brandAlt}</span>
+    )}
   </a>
-  <script is:inline define:vars={{ primaryLogoDark, primaryLogoLight }}>
-    (function () {
-      var img = document.getElementById('primary-logo');
-      if (!img) return;
-      var t = document.documentElement.dataset.theme;
-      img.src = t === 'dark' ? primaryLogoDark : primaryLogoLight;
-    })();
-  </script>
+  {primaryLogoLight && (
+    <script is:inline define:vars={{ primaryLogoDark, primaryLogoLight }}>
+      (function () {
+        var img = document.getElementById('primary-logo');
+        if (!img) return;
+        var t = document.documentElement.dataset.theme;
+        img.src = t === 'dark' ? (primaryLogoDark || primaryLogoLight) : primaryLogoLight;
+      })();
+    </script>
+  )}
 
   <nav class="site-nav" id="site-nav" aria-label="Main navigation">
     {dropdown && (
@@ -196,6 +202,21 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     width: auto;
   }
 
+  /* Text wordmark fallback — shown when a client has configured no logo image
+     (var(--fg) auto-switches for dark mode via theme.css). */
+  .brand-wordmark {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: 1.25rem;
+    line-height: 1;
+    color: var(--fg);
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+  }
+  @media (min-width: 64em) {
+    .brand-wordmark { font-size: 1.5rem; }
+  }
+
   /* ── Header ── */
   /* Logo + header: mobile-first — compact until desktop ≥64em scales up (matches button/theme sizing). */
   .site-header {
@@ -218,6 +239,31 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     }
   }
   [data-theme="dark"] .site-header { background: var(--dark-bg); }
+
+  /* Sticky "shrink on scroll": the header condenses and gains a shadow once the
+     page is scrolled, then expands again at the top. Purely additive; safe with
+     the sticky positioning. Motion honoured. */
+  .site-header {
+    transition: height 0.25s ease, box-shadow 0.25s ease;
+  }
+  .site-header.is-compact {
+    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.10);
+    height: 50px;
+  }
+  @media (min-width: 64em) {
+    .site-header.is-compact { height: 54px; }
+  }
+  .site-header .primary-logo,
+  .site-header .brand-wordmark {
+    transition: height 0.25s ease, font-size 0.25s ease;
+  }
+  .site-header.is-compact .primary-logo { height: 38px; }
+  .site-header.is-compact .brand-wordmark { font-size: 1.15rem; }
+  @media (prefers-reduced-motion: reduce) {
+    .site-header,
+    .site-header .primary-logo,
+    .site-header .brand-wordmark { transition: none; }
+  }
   .brand {
     text-decoration: none;
     display: flex;
@@ -265,7 +311,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     padding: 14px 0;
     color: var(--accent);
     text-decoration: none;
-    font-family: 'Inter', 'Lato', sans-serif;
+    font-family: var(--font-body);
     font-size: 0.875rem;
     font-weight: 500;
     letter-spacing: 0.1em;
@@ -316,10 +362,10 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     white-space: nowrap;
   }
   .nav-cta:hover,
-  .nav-cta.active { background: #1A2A1A; color: var(--text-light); border: none; }
-  [data-theme="dark"] .nav-cta { background: var(--gold); color: var(--fg); border: none; }
+  .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #000); color: var(--text-light); border: none; }
+  [data-theme="dark"] .nav-cta { background: var(--gold); color: var(--dark-bg); border: none; }
   [data-theme="dark"] .nav-cta:hover,
-  [data-theme="dark"] .nav-cta.active { background: var(--text-footer-link); color: var(--fg); border: none; }
+  [data-theme="dark"] .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #fff); color: var(--dark-bg); border: none; }
 
   .nav-mobile-theme .nav-cta--drawer {
     display: none;
@@ -389,7 +435,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
   }
   .theme-icon--sun { opacity: 1; }
   [data-theme="dark"] .theme-icon--sun { opacity: 0.5; }
-  [data-theme="dark"] .theme-icon--moon { opacity: 1; color: #2A1F12; }
+  [data-theme="dark"] .theme-icon--moon { opacity: 1; color: var(--dark-bg); }
 
   /* Mobile theme toggle row — hidden on desktop */
   .nav-mobile-theme { display: none; }
@@ -416,7 +462,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     position: absolute;
     width: 22px;
     height: 2px;
-    background: #2A3A2A;
+    background: var(--fg);
     border-radius: 2px;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: center;
@@ -501,7 +547,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     margin: 0;
     font-size: 1rem;
     color: var(--accent);
-    font-family: 'Poppins', sans-serif;
+    font-family: var(--font-heading);
     font-weight: 600;
     letter-spacing: 0.04em;
   }
@@ -567,7 +613,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     font-size: 0.875rem;
     font-weight: 600;
     color: var(--accent);
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     line-height: 1.3;
     transition: color 0.15s;
   }
@@ -576,14 +622,14 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     font-size: 0.75rem;
     color: var(--accent);
     font-weight: 500;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     line-height: 1.4;
   }
   .mega-about-sub {
     font-size: 0.8rem;
     color: var(--accent);
     font-weight: 500;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
   }
   [data-theme="dark"] .mega-about-desc,
   [data-theme="dark"] .mega-about-sub {
@@ -626,8 +672,8 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     left: 50%;
     transform: translateX(-50%);
     min-width: 280px;
-    background: #1e2d1c;
-    border: 1px solid #4A6741;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-top: 2px solid var(--gold);
     border-radius: 0 0 10px 10px;
     box-shadow: 0 12px 32px rgba(0,0,0,0.35);
@@ -643,21 +689,21 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     align-items: center;
     gap: 12px;
     padding: 0.65rem 1.1rem;
-    color: #D9CDB8;
+    color: var(--muted);
     text-decoration: none;
     transition: background 0.12s, color 0.12s;
     border-radius: 0;
   }
   .nav-dropdown li a:hover {
     background: rgba(200,151,58,0.1);
-    color: #FAF6EF;
+    color: var(--fg);
   }
   .nav-dropdown li a:focus-visible {
     outline: 2px solid var(--gold);
     outline-offset: -2px;
   }
   .nav-dropdown li a:hover .drop-title { color: var(--gold); }
-  .nav-dropdown li a.active { color: #FAF6EF; }
+  .nav-dropdown li a.active { color: var(--fg); }
   .nav-dropdown li a.active .drop-title { color: var(--gold); }
   .nav-dropdown li a.active .drop-icon { background: rgba(200,151,58,0.25); }
   .nav-dropdown li + li {
@@ -683,16 +729,16 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
   }
 
   .drop-title {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     font-size: 0.8125rem;
     font-weight: 600;
-    color: #C8D4C2;
+    color: var(--text-light);
     line-height: 1.3;
     transition: color 0.12s;
   }
 
   .drop-desc {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     font-size: 0.6875rem;
     color: var(--text-subtle);
     line-height: 1.3;
@@ -766,11 +812,11 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
       padding: 1rem 3rem;
       font-size: 0.9375rem;
       font-weight: 300;
-      font-family: 'Poppins', sans-serif;
+      font-family: var(--font-heading);
       border-radius: 0;
       text-align: left;
       width: 100%;
-      color: #2A3A2A;
+      color: var(--fg);
       transition: color 0.18s ease;
     }
     .nav-link::before {
@@ -785,9 +831,9 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     /* Last link (Calendar) sits directly above .nav-mobile-theme's own
        border-top — drop its trailing divider so the two don't double up. */
     .site-nav > .nav-link:last-of-type::before { display: none; }
-    .nav-link:hover { color: #C8973A; background: none; }
+    .nav-link:hover { color: var(--gold); background: none; }
     .nav-link::after { display: none; }
-    .nav-link.active { color: #C8973A; font-weight: 400; }
+    .nav-link.active { color: var(--gold); font-weight: 400; }
 
     .nav-mobile-theme {
       display: flex;
@@ -831,19 +877,19 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
       gap: 10px;
       justify-content: flex-start;
       font-size: 0.8rem;
-      color: #2A3A2A;
+      color: var(--fg);
       transition: color 0.18s ease;
     }
-    .nav-dropdown li a:hover { color: #C8973A; background: none; }
+    .nav-dropdown li a:hover { color: var(--gold); background: none; }
     .drop-icon { width: 24px; height: 24px; flex-shrink: 0; transition: color 0.18s ease; }
-    .drop-title { font-size: 0.75rem; color: #2A3A2A; transition: color 0.18s ease; }
+    .drop-title { font-size: 0.75rem; color: var(--fg); transition: color 0.18s ease; }
     [data-theme="dark"] .nav-dropdown li a { color: rgba(250,246,239,0.75); }
     [data-theme="dark"] .nav-dropdown li a:hover,
-    [data-theme="dark"] .nav-dropdown li a:active { color: #C8973A; }
+    [data-theme="dark"] .nav-dropdown li a:active { color: var(--gold); }
     [data-theme="dark"] .nav-dropdown li a:hover .drop-title,
-    [data-theme="dark"] .nav-dropdown li a:active .drop-title { color: #C8973A; }
+    [data-theme="dark"] .nav-dropdown li a:active .drop-title { color: var(--gold); }
     [data-theme="dark"] .nav-dropdown li a:hover .drop-icon,
-    [data-theme="dark"] .nav-dropdown li a:active .drop-icon { color: #C8973A; }
+    [data-theme="dark"] .nav-dropdown li a:active .drop-icon { color: var(--gold); }
     [data-theme="dark"] .drop-title { color: rgba(250,246,239,0.9); }
     .drop-desc { display: none; }
     .nav-dropdown li + li { border-top: 1px solid rgba(255,255,255,0.04); }
@@ -937,6 +983,13 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
 
   const siteHeader = document.querySelector('.site-header') as HTMLElement | null;
 
+  // Shrink-on-scroll: condense the header once the page is scrolled.
+  if (siteHeader) {
+    const onScrollCompact = () => siteHeader.classList.toggle('is-compact', window.scrollY > 40);
+    onScrollCompact();
+    window.addEventListener('scroll', onScrollCompact, { passive: true });
+  }
+
   function openMega() {
     if (!megaNav || !aboutTrigger) return;
     const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

package/components/blocks/Badge.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  text: string;
+  tone?: 'neutral' | 'accent';
+}
+const { text, tone = 'accent' } = Astro.props;
+---
+
+<span class="b-badge" data-tone={tone}>{text}</span>
+
+<style>
+  .b-badge {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+  }
+  .b-badge[data-tone='accent'] {
+    color: var(--gold);
+    background: var(--gold-light);
+  }
+  .b-badge[data-tone='neutral'] {
+    color: var(--muted);
+    background: var(--bg-section);
+  }
+</style>

package/components/blocks/ButtonBlock.astro

@@ -0,0 +1,13 @@
+---
+/** Block wrapper over the shared Button primitive (single source). */
+import Button from '../Button.astro';
+
+interface Props {
+  label: string;
+  href: string;
+  variant?: 'primary' | 'secondary';
+}
+const { label, href, variant = 'primary' } = Astro.props;
+---
+
+<Button href={href} variant={variant}>{label}</Button>

package/components/blocks/Divider.astro

@@ -0,0 +1,12 @@
+---
+---
+
+<hr class="b-divider" />
+
+<style>
+  .b-divider {
+    border: 0;
+    border-top: 1px solid var(--border);
+    margin: 0;
+  }
+</style>

package/components/blocks/Grid.astro

@@ -0,0 +1,48 @@
+---
+/** A layout container: places child blocks in a responsive N-column grid
+ *  (one column on mobile, N from tablet up). */
+import BlockRenderer from '../BlockRenderer.astro';
+
+interface Props {
+  columns?: 2 | 3 | 4;
+  gap?: 'sm' | 'md' | 'lg';
+  blocks?: any[];
+}
+const { columns = 2, gap = 'md', blocks = [] } = Astro.props;
+---
+
+<div class="b-grid" data-cols={columns} data-gap={gap}>
+  <BlockRenderer blocks={blocks} />
+</div>
+
+<style>
+  .b-grid {
+    display: grid;
+    grid-template-columns: 1fr; /* mobile-first: single column */
+  }
+  .b-grid[data-gap='sm'] {
+    gap: 0.75rem;
+  }
+  .b-grid[data-gap='md'] {
+    gap: 1.5rem;
+  }
+  .b-grid[data-gap='lg'] {
+    gap: 3rem;
+  }
+  @media (min-width: 48em) {
+    .b-grid[data-cols='2'] {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .b-grid[data-cols='3'] {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    .b-grid[data-cols='4'] {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (min-width: 64em) {
+    .b-grid[data-cols='4'] {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+</style>

package/components/blocks/Heading.astro

@@ -0,0 +1,42 @@
+---
+interface Props {
+  text: string;
+  level?: number;
+  align?: 'start' | 'center' | 'end';
+  gradient?: boolean;
+}
+const { text, level = 2, align = 'start', gradient = false } = Astro.props;
+const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
+---
+
+<Tag class="b-heading" data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
+
+<style>
+  /* A heading owns its own alignment via the `align` prop — it never depends on
+     an ancestor rule. (Base no longer force-centres headings, so a recipe that
+     asks for `start` really is left-aligned, and `center` really is centred,
+     wherever the block is placed — including AI-authored block JSON.) */
+  .b-heading {
+    color: var(--fg);
+    margin: 0;
+    text-wrap: balance;
+    line-height: 1.2;
+    text-align: start;
+  }
+  .b-heading[data-align='center'] {
+    text-align: center;
+  }
+  .b-heading[data-align='end'] {
+    text-align: end;
+  }
+  /* Gradient text — only clip to text where supported, so it never renders as
+     invisible/transparent on older browsers (it stays solid ink there). */
+  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
+    .b-heading[data-gradient='true'] {
+      background-image: linear-gradient(120deg, var(--gold), var(--accent-2, var(--gold)));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+</style>

package/components/blocks/ImageBlock.astro

@@ -0,0 +1,80 @@
+---
+/**
+ * A basic image block with a small set of CANONICAL framing options — corners
+ * (none / soft / round), a drop shadow, an outline stroke, an aspect ratio, and
+ * an optional soft scroll-in reveal. These are clear, named choices the AI or a
+ * client picks from (not free-form CSS); corners/shadow/stroke read the global
+ * surface tokens, so images stay consistent with every other surface.
+ * The build-time optimisation pipeline (docs/IMAGE-PIPELINE.md) is a later
+ * upgrade — the schema stays the same.
+ */
+interface Props {
+  src: string;
+  alt?: string;
+  caption?: string;
+  radius?: 'none' | 'soft' | 'round';
+  shadow?: boolean;
+  border?: boolean;
+  ratio?: 'auto' | 'square' | '4/3' | '3/2' | '16/9' | '21/9';
+  reveal?: boolean;
+}
+const { src, alt = '', caption, radius = 'soft', shadow = false, border = false, ratio = 'auto', reveal = false } = Astro.props;
+const ratioValue = ratio === 'auto' ? null : ratio === 'square' ? '1 / 1' : ratio.replace('/', ' / ');
+---
+
+<figure
+  class="b-image"
+  data-radius={radius}
+  data-shadow={shadow ? 'true' : 'false'}
+  data-border={border ? 'true' : 'false'}
+  data-reveal={reveal ? 'true' : 'false'}
+>
+  <img
+    src={src}
+    alt={alt}
+    loading="lazy"
+    decoding="async"
+    style={ratioValue ? `aspect-ratio: ${ratioValue}` : undefined}
+  />
+  {caption && <figcaption>{caption}</figcaption>}
+</figure>
+
+<style>
+  .b-image { margin: 0; }
+  .b-image img {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: cover; /* only bites when an aspect-ratio is set */
+  }
+  /* Corners */
+  .b-image[data-radius='none'] img { border-radius: 0; }
+  .b-image[data-radius='soft'] img { border-radius: var(--radius); }
+  .b-image[data-radius='round'] img { border-radius: var(--radius-pill); }
+  /* Drop shadow + outline stroke, from the global surface tokens */
+  .b-image[data-shadow='true'] img { box-shadow: var(--shadow-md); }
+  .b-image[data-border='true'] img { border: var(--card-border); }
+
+  .b-image figcaption {
+    color: var(--muted);
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    text-align: center;
+  }
+
+  /* Soft scroll-in reveal — native scroll-driven, so no JS/observer. Fully
+     visible where unsupported or under reduced-motion. */
+  @keyframes b-image-reveal {
+    from { clip-path: inset(42% 0 42% 0); opacity: 0.35; }
+    to { clip-path: inset(0 0 0 0); opacity: 1; }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .b-image[data-reveal='true'] img {
+        animation: b-image-reveal linear both;
+        animation-timeline: view();
+        animation-range: entry 5% cover 35%;
+      }
+    }
+  }
+</style>

package/components/blocks/List.astro

@@ -0,0 +1,78 @@
+---
+/** List — a leaf primitive: a bulleted, numbered, or checked list of lines.
+ *  `check` uses the shared check icon in the brand accent. Token-driven. */
+import Icon from '../Icon.astro';
+
+interface Props {
+  style?: 'bullet' | 'number' | 'check';
+  items?: string[];
+}
+const { style = 'bullet', items = [] } = Astro.props;
+const Tag = style === 'number' ? 'ol' : 'ul';
+---
+
+<Tag class:list={['b-list', `b-list--${style}`]}>
+  {items.map((item) => (
+    <li class="b-list__item">
+      {style === 'check' && <span class="b-list__mark" aria-hidden="true"><Icon name="check" size={18} /></span>}
+      <span>{item}</span>
+    </li>
+  ))}
+</Tag>
+
+<style>
+  .b-list {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-list__item {
+    display: flex;
+    gap: 0.6rem;
+    align-items: flex-start;
+  }
+  /* bullet + number keep native markers, but as flex items we render our own */
+  .b-list--bullet {
+    list-style: none;
+  }
+  .b-list--bullet .b-list__item::before {
+    content: '';
+    flex-shrink: 0;
+    width: 0.45rem;
+    height: 0.45rem;
+    margin-top: 0.6rem;
+    border-radius: 999px;
+    background: var(--gold);
+  }
+  .b-list--number {
+    list-style: none;
+    counter-reset: b-list;
+  }
+  .b-list--number .b-list__item {
+    counter-increment: b-list;
+  }
+  .b-list--number .b-list__item::before {
+    content: counter(b-list);
+    flex-shrink: 0;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    background: var(--gold-light);
+    color: var(--gold);
+    font-size: 0.8125rem;
+    font-weight: 700;
+  }
+  .b-list__mark {
+    flex-shrink: 0;
+    display: inline-flex;
+    color: var(--gold);
+    margin-top: 0.15rem;
+  }
+</style>

package/components/blocks/Prose.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  text: string;
+}
+const { text } = Astro.props;
+// Blank lines separate paragraphs. (Markdown rendering upgrades this later.)
+const paragraphs = text
+  .split(/\n\s*\n/)
+  .map((p) => p.trim())
+  .filter(Boolean);
+---
+
+<div class="b-prose">
+  {paragraphs.map((p) => <p>{p}</p>)}
+</div>
+
+<style>
+  .b-prose {
+    color: var(--fg);
+  }
+  .b-prose p {
+    margin: 0 0 1rem;
+    line-height: 1.7;
+    max-width: var(--max);
+  }
+  .b-prose p:last-child {
+    margin-bottom: 0;
+  }
+</style>

package/components/blocks/Quote.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+  text: string;
+  cite?: string;
+}
+const { text, cite } = Astro.props;
+---
+
+<figure class="b-quote">
+  <blockquote>{text}</blockquote>
+  {cite && <figcaption>— {cite}</figcaption>}
+</figure>
+
+<style>
+  .b-quote {
+    margin: 0;
+    border-inline-start: 3px solid var(--gold);
+    padding-inline-start: 1rem;
+  }
+  .b-quote blockquote {
+    margin: 0;
+    color: var(--fg);
+    font-style: italic;
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+  .b-quote figcaption {
+    color: var(--muted);
+    margin-top: 0.5rem;
+    font-size: 0.9375rem;
+  }
+</style>