Replace the hero with an editorial front page

src/components/FrontCard.astro

@@ -0,0 +1,279 @@
+---
+interface Props {
+  kind: string;
+  title: string;
+  description: string;
+  href: string;
+  date?: Date;
+  meta?: string;
+  image?: string;
+  imageAlt?: string;
+  size?: 'lead' | 'side' | 'wide' | 'standard' | 'compact';
+  tone?: 'paper' | 'blue' | 'ink' | 'soft' | 'amend';
+}
+
+const {
+  kind,
+  title,
+  description,
+  href,
+  date,
+  meta,
+  image,
+  imageAlt = '',
+  size = 'standard',
+  tone = 'paper',
+} = Astro.props;
+
+const formattedDate = date
+  ? new Intl.DateTimeFormat('en-GB', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    }).format(date)
+  : '';
+---
+
+<article class:list={['front-card', `size-${size}`, `tone-${tone}`, { 'has-image': image }] }>
+  <a href={href} class="card-link">
+    {image && (
+      <figure>
+        <img src={image} alt={imageAlt} loading={size === 'lead' ? 'eager' : 'lazy'} />
+      </figure>
+    )}
+    <div class="card-body">
+      <header>
+        <span>{kind}</span>
+        {date && <time datetime={date.toISOString()}>{formattedDate}</time>}
+      </header>
+      <div class="card-copy">
+        <h2>{title}</h2>
+        <p>{description}</p>
+      </div>
+      {meta && <footer>{meta}</footer>}
+    </div>
+  </a>
+</article>
+
+<style>
+  .front-card {
+    min-width: 0;
+    background: var(--paper-raised);
+    color: var(--ink);
+  }
+
+  .size-lead {
+    grid-column: span 8;
+    min-height: 430px;
+  }
+
+  .size-side {
+    grid-column: span 4;
+    min-height: 430px;
+  }
+
+  .size-wide {
+    grid-column: span 7;
+    min-height: 300px;
+  }
+
+  .size-standard {
+    grid-column: span 5;
+    min-height: 300px;
+  }
+
+  .size-compact {
+    grid-column: span 4;
+    min-height: 255px;
+  }
+
+  .card-link {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    color: inherit;
+    text-decoration: none;
+    transition: background-color 160ms ease, color 160ms ease;
+  }
+
+  figure {
+    min-height: 210px;
+    flex: 1 1 52%;
+    margin: 0;
+    overflow: hidden;
+    background: var(--blue-soft);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
+  }
+
+  .card-link:hover img {
+    transform: scale(1.018);
+  }
+
+  .card-body {
+    display: flex;
+    min-height: 100%;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: clamp(1.25rem, 2.6vw, 2rem);
+  }
+
+  header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+  }
+
+  header span {
+    font-weight: 500;
+  }
+
+  time {
+    opacity: 0.64;
+    white-space: nowrap;
+  }
+
+  .card-copy {
+    margin: auto 0;
+    padding: 1.75rem 0;
+  }
+
+  h2 {
+    max-width: 19ch;
+    margin: 0;
+    font-family: 'Newsreader Variable', Georgia, serif;
+    font-size: clamp(2.05rem, 4.4vw, 4.25rem);
+    font-weight: 580;
+    letter-spacing: -0.045em;
+    line-height: 0.95;
+  }
+
+  .size-side h2,
+  .size-compact h2 {
+    font-size: clamp(1.8rem, 3.1vw, 2.85rem);
+  }
+
+  .size-standard h2 {
+    font-size: clamp(1.9rem, 3.5vw, 3.25rem);
+  }
+
+  p {
+    max-width: 58ch;
+    margin: 1rem 0 0;
+    color: color-mix(in srgb, currentColor 66%, transparent);
+    font-size: 0.92rem;
+    line-height: 1.55;
+  }
+
+  footer {
+    padding-top: 0.9rem;
+    border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent);
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.62rem;
+    letter-spacing: 0.06em;
+    opacity: 0.72;
+    text-transform: uppercase;
+  }
+
+  .tone-blue {
+    background: var(--blue);
+    color: var(--paper);
+  }
+
+  .tone-ink {
+    background: var(--ink);
+    color: var(--paper);
+  }
+
+  .tone-soft {
+    background: var(--blue-soft);
+    color: var(--ink);
+  }
+
+  .tone-amend {
+    background: var(--amend);
+    color: var(--paper);
+  }
+
+  .tone-paper .card-link:hover,
+  .tone-soft .card-link:hover {
+    background: color-mix(in srgb, currentColor 6%, transparent);
+    color: var(--blue);
+  }
+
+  .tone-blue .card-link:hover {
+    background: color-mix(in srgb, var(--blue) 88%, var(--ink));
+  }
+
+  .tone-ink .card-link:hover {
+    background: #272725;
+  }
+
+  .tone-amend .card-link:hover {
+    background: color-mix(in srgb, var(--amend) 88%, var(--ink));
+  }
+
+  @media (max-width: 820px) {
+    .size-lead,
+    .size-wide {
+      grid-column: span 7;
+    }
+
+    .size-side,
+    .size-standard {
+      grid-column: span 5;
+    }
+
+    .size-compact {
+      grid-column: span 6;
+    }
+  }
+
+  @media (max-width: 620px) {
+    .size-lead,
+    .size-side,
+    .size-wide,
+    .size-standard,
+    .size-compact {
+      grid-column: 1 / -1;
+      min-height: 0;
+    }
+
+    .size-lead .card-body {
+      min-height: 315px;
+    }
+
+    .size-side .card-body,
+    .size-wide .card-body,
+    .size-standard .card-body,
+    .size-compact .card-body {
+      min-height: 245px;
+    }
+
+    .card-copy {
+      padding: 1.45rem 0;
+    }
+
+    h2,
+    .size-side h2,
+    .size-standard h2,
+    .size-compact h2 {
+      font-size: clamp(2rem, 11vw, 3.2rem);
+    }
+
+    figure {
+      min-height: 220px;
+    }
+  }
+</style>

src/components/Header.astro

@@ -1,19 +1,33 @@
 ---
+import { getCollection } from 'astro:content';
 import { navigation, site } from '../site.config';
+
+const [stories, briefings, episodes, guides] = await Promise.all([
+  getCollection('stories', ({ data }) => !data.draft),
+  getCollection('briefings', ({ data }) => !data.draft),
+  getCollection('episodes', ({ data }) => !data.draft),
+  getCollection('guides', ({ data }) => !data.draft),
+]);
+
+const visibleNavigation = navigation.filter((item) => {
+  if (item.href === '/stories') return stories.length > 0;
+  if (item.href === '/briefing') return briefings.length > 0;
+  if (item.href === '/podcast') return episodes.length > 0;
+  if (item.href === '/guides') return guides.length > 0;
+  if (item.href === '/book') return site.book.enabled;
+  return true;
+});
 ---
 
 <header class="site-header">
   <div class="shell header-inner">
     <a class="masthead" href="/" aria-label={`${site.title} home`}>
       <span class="masthead-mark" aria-hidden="true"><i></i></span>
-      <span class="masthead-text">
       <strong>{site.title}</strong>
-        <small>{site.qualifier}</small>
-      </span>
     </a>
 
     <nav aria-label="Primary navigation">
-      {navigation.map((item) => <a href={item.href}>{item.label}</a>)}
+      {visibleNavigation.map((item) => <a href={item.href}>{item.label}</a>)}
       <a class="rss" href="/rss.xml">RSS</a>
     </nav>
   </div>
@@ -79,26 +93,12 @@ import { navigation, site } from '../site.config';
     bottom: -4px;
   }
 
-  .masthead-text {
-    display: flex;
-    align-items: baseline;
-    gap: 0.45rem;
-  }
-
   .masthead strong {
     font-family: 'Newsreader Variable', Georgia, serif;
-    font-size: 1.55rem;
+    font-size: 1.7rem;
     letter-spacing: -0.03em;
   }
 
-  .masthead small {
-    color: var(--muted);
-    font-size: 0.68rem;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
   nav {
     display: flex;
     align-items: center;
@@ -149,8 +149,5 @@ import { navigation, site } from '../site.config';
       font-size: 0.7rem;
     }
 
-    nav .rss {
-      display: none;
-    }
   }
 </style>

src/pages/index.astro

@@ -1,11 +1,22 @@
 ---
 import { getCollection } from 'astro:content';
-import RecentMaintenance from '../components/RecentMaintenance.astro';
+import FrontCard from '../components/FrontCard.astro';
-import StoryCard from '../components/StoryCard.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
-import { formatDate, guidesByReview, newestFirst } from '../lib/content';
+import { guidesByReview, newestFirst } from '../lib/content';
 import { site } from '../site.config';
 
+interface FrontPageItem {
+  kind: string;
+  title: string;
+  description: string;
+  href: string;
+  date?: Date;
+  meta?: string;
+  image?: string;
+  imageAlt?: string;
+  tone: 'paper' | 'blue' | 'ink' | 'soft' | 'amend';
+}
+
 const stories = newestFirst(await getCollection('stories', ({ data }) => !data.draft));
 const briefings = newestFirst(await getCollection('briefings', ({ data }) => !data.draft));
 const guides = guidesByReview(await getCollection('guides', ({ data }) => !data.draft));
@@ -13,385 +24,133 @@ const episodes = newestFirst(await getCollection('episodes', ({ data }) => !data
 
 const featured = stories.find(({ data }) => data.featured) ?? stories[0];
 const latestBriefing = briefings[0];
-const latestEpisode = episodes[0];
+
+const frontPageItems: FrontPageItem[] = [];
+
+if (featured) {
+  frontPageItems.push({
+    kind: 'Story',
+    title: featured.data.title,
+    description: featured.data.description,
+    href: `/stories/${featured.id}`,
+    date: featured.data.published,
+    meta: `By ${featured.data.author} · ${featured.data.status}`,
+    image: featured.data.image,
+    imageAlt: featured.data.imageAlt,
+    tone: featured.data.image ? 'paper' : 'blue',
+  });
+}
+
+if (latestBriefing) {
+  frontPageItems.push({
+    kind: `Briefing ${String(latestBriefing.data.issue).padStart(3, '0')}`,
+    title: latestBriefing.data.title,
+    description: latestBriefing.data.description,
+    href: `/briefing/${latestBriefing.id}`,
+    date: latestBriefing.data.published,
+    meta: 'This Week in Trust',
+    tone: 'paper',
+  });
+}
+
+const remainingItems: FrontPageItem[] = [
+  ...stories
+    .filter((entry) => entry.id !== featured?.id)
+    .map((entry, index): FrontPageItem => ({
+      kind: 'Story',
+      title: entry.data.title,
+      description: entry.data.description,
+      href: `/stories/${entry.id}`,
+      date: entry.data.published,
+      meta: `By ${entry.data.author} · ${entry.data.status}`,
+      image: entry.data.image,
+      imageAlt: entry.data.imageAlt,
+      tone: entry.data.image ? 'paper' : index % 2 === 0 ? 'soft' : 'paper',
+    })),
+  ...briefings.slice(1).map((entry): FrontPageItem => ({
+    kind: `Briefing ${String(entry.data.issue).padStart(3, '0')}`,
+    title: entry.data.title,
+    description: entry.data.description,
+    href: `/briefing/${entry.id}`,
+    date: entry.data.published,
+    meta: 'This Week in Trust',
+    tone: 'paper',
+  })),
+  ...episodes.map((entry): FrontPageItem => ({
+    kind: `Podcast ${String(entry.data.episode).padStart(2, '0')}`,
+    title: entry.data.title,
+    description: entry.data.description,
+    href: `/podcast/${entry.id}`,
+    date: entry.data.published,
+    meta: [entry.data.duration, ...entry.data.guests].filter(Boolean).join(' · '),
+    tone: 'ink',
+  })),
+  ...guides.map((entry): FrontPageItem => ({
+    kind: 'Field guide',
+    title: entry.data.title,
+    description: entry.data.description,
+    href: `/guides/${entry.id}`,
+    date: entry.data.reviewed,
+    meta: `Reviewed · ${entry.data.status}`,
+    tone: 'soft',
+  })),
+].sort((a, b) => (b.date?.valueOf() ?? 0) - (a.date?.valueOf() ?? 0));
+
+if (site.book.enabled) {
+  remainingItems.unshift({
+    kind: 'Book',
+    title: site.book.title,
+    description: site.book.description,
+    href: '/book',
+    meta: site.book.sampleUrl ? 'Sample available' : undefined,
+    image: site.book.cover || undefined,
+    imageAlt: site.book.cover ? `${site.book.title} cover` : undefined,
+    tone: site.book.cover ? 'paper' : 'amend',
+  });
+}
+
+frontPageItems.push(...remainingItems);
+
+const sizeCycle = ['wide', 'standard', 'compact', 'compact', 'compact'] as const;
 ---
 
 <BaseLayout>
-  <section class="hero shell">
+  <section class="front-grid shell" aria-labelledby="front-page-title">
-    <p class="eyebrow">{site.author.note}</p>
+    <h1 class="visually-hidden" id="front-page-title">{site.title}</h1>
-    <div class="hero-grid">
+    {frontPageItems.slice(0, 12).map((item, index) => (
-      <h1 class="display">{site.proposition}</h1>
+      <FrontCard
-      <div class="hero-note">
+        kind={item.kind}
-        <p>{site.description}</p>
+        title={item.title}
-        <p>
+        description={item.description}
-          We follow claims of verification, safety, privacy, and autonomy to the
+        href={item.href}
-          people who hold the keys—and to the people who live with the consequences.
+        date={item.date}
-        </p>
+        meta={item.meta}
-        <div class="hero-actions">
+        image={item.image}
-          {featured && <a class="button primary" href={`/stories/${featured.id}`}>Read the current story</a>}
+        imageAlt={item.imageAlt}
-          {latestEpisode ? (
+        tone={item.tone}
-            <a class="button" href="/podcast">Listen to the podcast</a>
+        size={index === 0 ? 'lead' : index === 1 ? 'side' : sizeCycle[(index - 2) % sizeCycle.length]}
-          ) : (
+      />
-            <a class="button" href="/about">How this publication works</a>
-          )}
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <section class="shell current">
-    <div class="section-rule">
-      <h2 class="section-title">Current issue</h2>
-      <a href="/stories">All stories →</a>
-    </div>
-    <div class="current-grid">
-      <div>
-        {featured ? <StoryCard entry={featured} featured /> : <p class="empty-state">The first story is being prepared.</p>}
-      </div>
-      <aside class="briefing-card">
-        <p class="eyebrow">This week in trust</p>
-        {latestBriefing ? (
-          <>
-            <p class="issue">Issue {String(latestBriefing.data.issue).padStart(3, '0')}</p>
-            <h3><a href={`/briefing/${latestBriefing.id}`}>{latestBriefing.data.title}</a></h3>
-            <p>{latestBriefing.data.description}</p>
-            <div class="briefing-foot">
-              <time datetime={latestBriefing.data.published.toISOString()}>{formatDate(latestBriefing.data.published)}</time>
-              <a href={`/briefing/${latestBriefing.id}`}>Read issue →</a>
-            </div>
-          </>
-        ) : (
-          <p>The weekly briefing begins here: three failures, two new systems, one overreach, and one surprisingly good idea.</p>
-        )}
-      </aside>
-    </div>
-  </section>
-
-  {latestEpisode && (
-    <section class="shell listening">
-      <div class="section-rule">
-        <h2 class="section-title">Listen</h2>
-        <a href="/podcast">Podcast archive →</a>
-      </div>
-      <div class="listen-grid">
-        <div class="sound-mark" aria-hidden="true">
-          <span></span><span></span><span></span><span></span><span></span>
-        </div>
-        <div>
-          <p class="eyebrow">Episode {latestEpisode.data.episode}</p>
-          <h3><a href={`/podcast/${latestEpisode.id}`}>{latestEpisode.data.title}</a></h3>
-          <p>{latestEpisode.data.description}</p>
-        </div>
-      </div>
-    </section>
-  )}
-
-  {guides.length > 0 && (
-    <section class="shell guides">
-      <div class="section-rule">
-        <h2 class="section-title">Field guides</h2>
-        <a href="/guides">All guides →</a>
-      </div>
-      <div class="guide-grid">
-        {guides.slice(0, 3).map((guide) => (
-          <article>
-            <small class="guide-reviewed">Reviewed {formatDate(guide.data.reviewed)}</small>
-            <h3><a href={`/guides/${guide.id}`}>{guide.data.title}</a></h3>
-            <p>{guide.data.description}</p>
-          </article>
     ))}
-      </div>
   </section>
-  )}
-
-  {site.book.enabled && (
-    <section class="shell book-strip">
-      <div class="book-object" aria-hidden="true"><span>THE<br />BOOK</span></div>
-      <div>
-        <p class="eyebrow">The book</p>
-        <h2>{site.book.title}</h2>
-        <p>{site.book.description}</p>
-        <a class="button" href="/book">Visit the book page</a>
-      </div>
-    </section>
-  )}
-
-  <div class="shell maintenance-wrap">
-    <RecentMaintenance />
-    <p class="planned-note">
-      Planned but not yet real: the podcast{site.book.enabled ? '' : ', the book'}, and more guides.
-      Nothing ships here before it exists — <a href={`${site.repositoryUrl}/src/branch/main/ROADMAP.md`}>see the roadmap ↗</a>
-    </p>
-  </div>
 </BaseLayout>
 
 <style>
-  .hero {
+  .front-grid {
-    padding-top: clamp(4rem, 9vw, 8rem);
-    padding-bottom: clamp(5rem, 10vw, 9rem);
-  }
-
-  .hero-grid {
     display: grid;
-    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.65fr);
+    grid-template-columns: repeat(12, minmax(0, 1fr));
-    gap: clamp(2rem, 6vw, 6rem);
+    gap: 1px;
-    align-items: end;
+    margin-top: clamp(1rem, 2.4vw, 2rem);
+    border: 1px solid var(--rule);
+    background: var(--rule);
   }
 
-  .hero-note {
+  :global(#main + footer) {
-    padding-left: 1.5rem;
+    margin-top: clamp(2.5rem, 6vw, 5rem);
-    border-left: 1px solid var(--ink);
   }
 
-  .hero-note p:first-child {
+  @media (max-width: 620px) {
-    font-family: 'Newsreader Variable', Georgia, serif;
+    .front-grid {
-    font-size: 1.45rem;
+      margin-top: 0.85rem;
-    line-height: 1.2;
-  }
-
-  .hero-note p:not(:first-child) {
-    color: var(--muted);
-    font-size: 0.92rem;
-  }
-
-  .hero-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.65rem;
-    margin-top: 1.5rem;
-  }
-
-  .current-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.7fr);
-  }
-
-  .briefing-card {
-    display: flex;
-    flex-direction: column;
-    padding: 2rem;
-    border-top: 1px solid var(--rule);
-    border-left: 1px solid var(--rule);
-    border-bottom: 1px solid var(--rule);
-    background: var(--paper-raised);
-  }
-
-  .briefing-card .issue {
-    margin: 0;
-    color: var(--amend);
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.7rem;
-  }
-
-  .briefing-card h3,
-  .listen-grid h3,
-  .guide-grid h3,
-  .book-strip h2 {
-    margin: 0.35rem 0;
-    font-family: 'Newsreader Variable', Georgia, serif;
-    font-weight: 600;
-    letter-spacing: -0.025em;
-    line-height: 1;
-  }
-
-  .briefing-card h3 {
-    font-size: 2.2rem;
-  }
-
-  .briefing-card h3 a,
-  .listen-grid h3 a,
-  .guide-grid h3 a {
-    text-decoration: none;
-  }
-
-  .briefing-card > p:not(.eyebrow, .issue) {
-    color: var(--muted);
-  }
-
-  .briefing-foot {
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
-    margin-top: auto;
-    padding-top: 2rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-  }
-
-  .listening,
-  .guides,
-  .book-strip,
-  .maintenance-wrap {
-    margin-top: clamp(5rem, 10vw, 9rem);
-  }
-
-  .listen-grid {
-    display: grid;
-    grid-template-columns: 1fr 1.4fr;
-    gap: clamp(2rem, 7vw, 7rem);
-    padding: 3rem 0;
-  }
-
-  .sound-mark {
-    display: flex;
-    height: 180px;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    background: var(--ink);
-  }
-
-  .sound-mark span {
-    width: 3px;
-    height: 28%;
-    background: var(--paper);
-  }
-
-  .sound-mark span:nth-child(2),
-  .sound-mark span:nth-child(4) {
-    height: 60%;
-  }
-
-  .sound-mark span:nth-child(3) {
-    height: 88%;
-    background: var(--amend);
-  }
-
-  .listen-grid h3 {
-    max-width: 18ch;
-    font-size: clamp(2rem, 5vw, 4.2rem);
-  }
-
-  .listen-grid p:not(.eyebrow) {
-    max-width: 55ch;
-    color: var(--muted);
-  }
-
-  .guide-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .guide-grid article {
-    min-height: 240px;
-    padding: 1.5rem;
-    border-right: 1px solid var(--rule);
-    border-bottom: 1px solid var(--rule);
-  }
-
-  .guide-grid article:last-child {
-    border-right: 0;
-  }
-
-  .guide-reviewed {
-    display: block;
-    color: var(--muted);
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.65rem;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-  }
-
-  .guide-grid h3 {
-    margin-top: 3rem;
-    font-size: 2rem;
-  }
-
-  .guide-grid p {
-    color: var(--muted);
-  }
-
-  .planned-note {
-    margin: 2rem 0 0;
-    color: var(--muted);
-    font-size: 0.85rem;
-  }
-
-  .book-strip {
-    display: grid;
-    grid-template-columns: minmax(200px, 0.6fr) 1.4fr;
-    gap: clamp(2rem, 8vw, 8rem);
-    align-items: center;
-    padding: clamp(2rem, 5vw, 5rem);
-    background: var(--blue);
-    color: var(--paper);
-  }
-
-  .book-object {
-    display: grid;
-    max-width: 260px;
-    aspect-ratio: 3 / 4;
-    place-items: center;
-    border: 1px solid #7690ad;
-    box-shadow: 18px 18px 0 #0e2c51;
-    background: #102f55;
-    font-family: 'Newsreader Variable', Georgia, serif;
-    font-size: 2.5rem;
-    line-height: 0.9;
-    text-align: center;
-  }
-
-  .book-strip h2 {
-    max-width: 15ch;
-    font-size: clamp(2.6rem, 6vw, 5.2rem);
-  }
-
-  .book-strip p:not(.eyebrow) {
-    max-width: 58ch;
-    color: #c5d1df;
-  }
-
-  .book-strip .eyebrow {
-    color: #9fb8d4;
-  }
-
-  .book-strip .button {
-    border-color: var(--paper);
-    color: var(--paper);
-  }
-
-  .book-strip .button:hover {
-    background: var(--paper);
-    color: var(--blue);
-  }
-
-  @media (max-width: 850px) {
-    .hero-grid,
-    .current-grid,
-    .listen-grid,
-    .book-strip {
-      grid-template-columns: 1fr;
-    }
-
-    .hero-note {
-      padding-top: 1.5rem;
-      padding-left: 0;
-      border-top: 1px solid var(--ink);
-      border-left: 0;
-    }
-
-    .briefing-card {
-      min-height: 310px;
-      border-left: 0;
-    }
-  }
-
-  @media (max-width: 650px) {
-    .guide-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .guide-grid article {
-      min-height: auto;
-      border-right: 0;
-    }
-
-    .guide-grid h3 {
-      margin-top: 1.5rem;
-    }
-
-    .book-strip {
-      width: 100%;
     }
   }
 </style>