diff --git a/_assets/styles/_news-item.scss b/_assets/styles/_news-item.scss
index 15e85f6a1..556f055c6 100644
--- a/_assets/styles/_news-item.scss
+++ b/_assets/styles/_news-item.scss
@@ -1,137 +1,280 @@
-@mixin respond-to($media) {
-  @if $media == handhelds {
-    @include media-breakpoint-down(sm) {
-      @content;
-    }
-  } @else if $media == medium-screens {
-    @include media-breakpoint-up(sm) {
-      @content;
-    }
-  } @else if $media == wide-screens {
-    @include media-breakpoint-up(lg) {
-      @content;
-    }
-  }
+// A single post. Its chrome (the header band, the prev/next foot) reads at
+// the same 1200px width as the rest of the site; the prose between them sits
+// at a reading measure instead, because this page is for reading.
+
+// Colours come from _sublime-theme.scss and match the tone _news.scss gives
+// the archive, so the two pages agree on what a category and a date look
+// like.
+$news-item-wrap: 1200px;
+$news-item-gutter: clamp(1rem, 4vw, 3rem);
+$news-item-link: shade-color($primary, 25%);
+$news-item-primary-tint: tint-color($primary, 30%);
+$news-item-muted: #4b433c;
+$news-item-hairline: rgb(167 151 139 / 55%);
+
+// Scoped to `main` to keep the resets off the navbar and footer, which are
+// its siblings under the same body class. The padding replaces what
+// `main > .container` gives the footer elsewhere.
+.news-item main {
+  padding-bottom: 104px;
 }
 
-.news-item {
-  .post-content {
-    padding-top: 3rem;
-  }
+.news-item main a {
+  color: $news-item-link;
+}
 
-  .single-post-pager {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    width: 100%;
-    border-top: 2px solid $tertiary;
-    border-bottom: 2px solid $tertiary;
-
-    @include respond-to(handhelds) {
-      display: block;
-    }
-  }
+.news-item main :focus-visible {
+  outline: 2px solid $body-color;
+  outline-offset: 2px;
+}
 
-  .post-title {
-    font-weight: normal;
-  }
+.news-item .wrap {
+  max-width: $news-item-wrap;
+  padding-inline: $news-item-gutter;
+  margin-inline: auto;
+}
 
-  .pager-link {
-    position: relative;
-    display: flex;
-    flex: 1;
-    align-items: center;
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-    color: inherit;
-    text-decoration: none;
-
-    .pager-direction,
-    .pager-date,
-    .pager-chevron {
-      position: absolute;
-      color: $primary;
-    }
-
-    .pager-date {
-      bottom: 0.5rem;
-      font-size: 0.75em;
-    }
-
-    .pager-direction {
-      top: 0.5rem;
-      font-weight: bold;
-    }
-
-    .pager-chevron {
-      top: 50%;
-      height: 4rem;
-      margin-top: -2rem;
-      font-size: 4rem;
-      line-height: 4rem;
-      transition: all 0.2s ease;
-    }
-
-    .pager-title {
-      line-height: 1.25rem;
-    }
-
-    &:hover {
-      background: shade-color($body-bg, 10%);
-
-      .pager-title {
-        color: $primary;
-      }
-    }
-
-    @include respond-to(handhelds) {
-      display: block;
-      width: 100%;
-    }
-  }
+/* --- Head: title, category, date, byline ----------------------------
+  Three elements, each given its own margin directly; the prose below keeps
+  its own rhythm.
+*/
 
-  .newer-post {
-    padding-right: 1rem;
-    padding-left: 4rem;
-    text-align: left;
+// Ink, so it carries on from the navbar rather than leaving a pale band
+// between the two.
+.news-item .entry-head {
+  padding-top: calc(#{$navbar-height} + clamp(2rem, 5vw, 3.5rem));
+  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
+  color: $body-bg;
+  background-color: $body-color;
+}
+
+// Links on the ink. `.news-item main a` is (0,1,2), so this needs `main` in
+// the selector too.
+.news-item main .entry-head a {
+  color: rgb(231 231 214 / 82%);
+}
+
+.news-item main .entry-head a:hover {
+  color: $body-bg;
+}
 
-    @include respond-to(handhelds) {
-      border-bottom: 1px solid tint-color($tertiary, 10%);
-    }
+.news-item main .entry-head :focus-visible {
+  outline-color: $body-bg;
+}
 
-    .pager-chevron {
-      left: 1.5rem;
-    }
+.news-item .entry-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+  align-items: baseline;
+  margin: 0;
+}
 
-    &:hover .pager-chevron {
-      left: 1rem;
-    }
+// The same flat, opaque chip as the archive's, recoloured for the ink it
+// sits on: ink text on the light accent.
+.news-item .entry-cat {
+  display: inline-block;
+  padding: 0.25rem 0.5625rem;
+  font-family: $font-family-monospace;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1;
+  color: $body-color;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  background-color: $news-item-primary-tint;
+}
 
-    .pager-date {
-      left: 4rem;
-    }
-  }
+.news-item .entry-date {
+  font-family: $font-family-monospace;
+  font-size: 0.8125rem;
+  color: rgb(231 231 214 / 70%);
+}
+
+// _custom.scss makes every h1 a flex row and draws a rule after it, which is
+// right for a page heading and wrong at this scale.
+.news-item .entry-title {
+  display: block;
+  max-width: 24ch;
+  margin-top: 1rem;
+  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+
+.news-item .entry-title::after {
+  content: none;
+}
+
+.news-item .entry-author {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-top: 1.375rem;
+  font-size: 0.9375rem;
+  text-decoration: none;
+}
+
+.news-item .entry-avatar {
+  display: block;
+  border: 1px solid rgb(231 231 214 / 30%);
+}
+
+/* --- Body: the post itself -------------------------------------------- */
 
-  .older-post {
-    justify-content: flex-end;
-    padding-right: 4rem;
-    padding-left: 1rem;
-    text-align: right;
+.news-item .entry-body {
+  padding-block: clamp(2.5rem, 6vw, 4rem);
+}
+
+// The measure sits on the element that carries the font-size, so the `ch` it
+// reads is the one the prose is actually set in.
+.news-item .entry-prose {
+  max-width: 65ch;
+  margin-inline: auto;
+  font-size: 1.0625rem;
+  line-height: 1.75;
+}
+
+.news-item .entry-prose > :first-child {
+  margin-top: 0;
+}
 
-    .pager-chevron {
-      right: 1.5rem;
-    }
+.news-item .entry-prose > :last-child {
+  margin-bottom: 0;
+}
 
-    &:hover .pager-chevron {
-      right: 1rem;
-    }
+.news-item .entry-prose p,
+.news-item .entry-prose ul,
+.news-item .entry-prose ol,
+.news-item .entry-prose blockquote {
+  margin-block: 1.375em;
+}
 
-    .pager-date {
-      right: 4rem;
-    }
+.news-item .entry-prose h2,
+.news-item .entry-prose h3 {
+  margin-top: 2em;
+  margin-bottom: 0.75em;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.news-item .entry-prose h2 {
+  font-size: 1.375rem;
+}
 
-    .pager-direction {
-      right: 4rem;
-    }
+.news-item .entry-prose h3 {
+  font-size: 1.1875rem;
+}
+
+.news-item .entry-prose ul,
+.news-item .entry-prose ol {
+  padding-inline-start: 1.25em;
+}
+
+.news-item .entry-prose li + li {
+  margin-top: 0.5em;
+}
+
+.news-item .entry-prose strong {
+  font-weight: 700;
+}
+
+.news-item .entry-prose a {
+  text-decoration: underline;
+}
+
+.news-item .entry-prose blockquote {
+  padding-inline-start: 1.25em;
+  color: $news-item-muted;
+  border-inline-start: 3px solid $news-item-hairline;
+}
+
+.news-item .entry-prose code {
+  font-family: $font-family-monospace;
+  font-size: 0.9em;
+}
+
+.news-item .entry-prose pre {
+  padding: 1rem;
+  overflow-x: auto;
+  background-color: $secondary;
+}
+
+.news-item .entry-prose pre code {
+  font-size: 0.875em;
+}
+
+.news-item .entry-prose img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* --- Foot: prev/next ----------------------------------------------------
+  Only rendered when a neighbour exists (see the layout's own condition), so
+  it never shows on a lone post.
+*/
+
+.news-item .entry-nav {
+  border-top: 1px solid $news-item-hairline;
+}
+
+.news-item .entry-nav-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-block: clamp(1.75rem, 4vw, 2.5rem);
+}
+
+.news-item .entry-step {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  max-width: 26rem;
+  text-decoration: none;
+}
+
+.news-item .entry-step-newer {
+  align-items: flex-end;
+  margin-inline-start: auto;
+  text-align: right;
+}
+
+.news-item .entry-step-dir {
+  font-family: $font-family-monospace;
+  font-size: 0.6875rem;
+  color: $news-item-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.news-item .entry-step-title {
+  font-size: 1.0625rem;
+  font-weight: 700;
+  color: $news-item-link;
+}
+
+.news-item .entry-step:hover .entry-step-title {
+  text-decoration: underline;
+}
+
+/* --- Narrow --------------------------------------------------------------
+  Below 960px, long titles stack flush left instead of wrapping unevenly
+  side by side.
+*/
+
+@media (width < 960px) {
+  .news-item .entry-nav-grid {
+    flex-direction: column;
+  }
+
+  .news-item .entry-step-newer {
+    align-items: flex-start;
+    margin-inline-start: 0;
+    text-align: left;
   }
 }
diff --git a/_assets/styles/_news.scss b/_assets/styles/_news.scss
index 5e1950bdd..59d5ec2df 100644
--- a/_assets/styles/_news.scss
+++ b/_assets/styles/_news.scss
@@ -1,125 +1,356 @@
-.pagination-container {
-  position: absolute;
-  right: 0;
-  bottom: 48px;
-  left: 0;
+@use 'sass:color';
+
+// The news archive: the newest post given real weight, then everything
+// earlier as a plain list. Reads at the same 1200px width as home, docs, and
+// about, with its own offset under the fixed navbar.
+
+// Colours come from _sublime-theme.scss. $news-muted matches the tone the
+// other pages give secondary copy; $news-link doubles as the category chip's
+// fill, so the chip and every link on the page draw from one dark teal.
+$news-wrap: 1200px;
+$news-gutter: clamp(1rem, 4vw, 3rem);
+$news-link: shade-color($primary, 25%);
+$news-primary-tint: tint-color($primary, 30%);
+$news-muted: #4b433c;
+$news-hairline: rgb(167 151 139 / 55%);
+$news-quiet-bg: color.mix($tertiary, $body-bg, 12%);
+
+// Scoped to `main` to keep the resets off the navbar and footer, which are
+// its siblings under the same body class. The padding replaces what
+// `main > .container` gives the footer elsewhere.
+.news main {
+  padding-bottom: 104px;
 }
 
-.pagination .page-link {
-  user-select: none;
+.news main h1,
+.news main h2,
+.news main h3,
+.news main p,
+.news main ul,
+.news main ol,
+.news main dl,
+.news main dd {
+  margin: 0;
 }
 
-.post-category,
-.post-meta {
-  display: inline-block;
-  font-size: 0.8em;
-  vertical-align: middle;
+.news main ul,
+.news main ol {
+  padding: 0;
+  list-style: none;
+}
+
+.news main a {
+  color: $news-link;
+}
+
+.news main :focus-visible {
+  outline: 2px solid $body-color;
+  outline-offset: 2px;
+}
+
+.news .wrap {
+  max-width: $news-wrap;
+  padding-inline: $news-gutter;
+  margin-inline: auto;
 }
 
-.post-category {
+.news .band {
+  padding-block: clamp(2.5rem, 6vw, 4rem);
+}
+
+/* --- Head ---------------------------------------------------------- */
+
+// Ink, so it carries on from the navbar rather than leaving a pale band
+// between the two.
+.news .news-head {
   position: relative;
-  display: inline-block;
-  height: 32px;
-  padding: 6px 10px 8px;
-  padding-left: 50px;
-  margin-left: -30px;
-  background-color: $quaternary;
-  box-shadow:
-    0 1px 5px rgb(0 0 0 / 30%),
-    inset 0 1px 0 rgb(255 255 255 / 20%),
-    inset 0 -1px 0 rgb(0 0 0 / 30%);
-
-  &::before {
-    position: absolute;
-    bottom: -10px;
-    left: 0;
-    width: 0;
-    height: 0;
-    content: '';
-    border-color: shade-color($quaternary, 20%) shade-color($quaternary, 20%)
-      transparent transparent;
-    border-style: solid;
-    border-width: 5px;
-  }
+  padding-top: calc(#{$navbar-height} + clamp(2.5rem, 6vw, 4rem));
+  padding-bottom: clamp(2.5rem, 6vw, 4rem);
+  overflow: hidden;
+  color: $body-bg;
+  background-color: $body-color;
+}
 
-  &::after {
-    position: absolute;
-    top: 0;
-    right: -12px;
-    width: 0;
-    height: 0;
-    content: '';
-    border-top: 16px solid transparent;
-    border-bottom: 16px solid transparent;
-    border-left: 12px solid $quaternary;
-  }
+// The ring off the logogram, the same drawing the home masthead uses, at its
+// own size and corner for a single-column head.
+.news .news-head-ring {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  z-index: 0;
+  width: min(60vw, 460px);
+  aspect-ratio: 1;
+  color: $news-primary-tint;
+  pointer-events: none;
+  opacity: 0.14;
+  transform: translate(28%, -32%);
 }
 
-.post-content img {
-  max-width: 100%;
+.news .news-head-ring svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.news .news-head-inner {
+  position: relative;
+  z-index: 1;
 }
 
-.label {
-  float: left;
+// _custom.scss makes every h1 a flex row and draws a rule after it, which is
+// right for a page heading and wrong at this scale.
+.news .news-title {
+  display: block;
+  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
   font-weight: 700;
-  line-height: 18px;
-  color: tint-color($secondary, 20%);
+  line-height: 1.08;
+  letter-spacing: -0.02em;
+}
+
+.news .news-title::after {
+  content: none;
+}
+
+.news .news-lede {
+  max-width: 42ch;
+  margin-top: 1rem;
+  font-size: clamp(1rem, 1.6vw, 1.0625rem);
+  line-height: 1.6;
+  color: rgb(231 231 214 / 76%);
+}
+
+/* --- Category chip ---------------------------------------------------
+  Flat and opaque: one fixed pair of colours, so it reads the same in the
+  featured band and in the list below.
+*/
+
+.news .featured-cat,
+.news .archive-cat {
+  display: inline-block;
+  padding: 0.25rem 0.5625rem;
+  font-family: $font-family-monospace;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1;
+  color: $body-bg;
   text-transform: uppercase;
-  text-shadow: 0 -1px 0 rgb(0 0 0 / 50%);
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  background-color: $news-link;
 }
 
-@include media-breakpoint-down(sm) {
-  .post-category {
-    padding-left: 30px;
-  }
+/* --- Featured: the newest post --------------------------------------
+  Its own ground, the same as the substance of any other page (docs' handbook,
+  about's tenets).
+*/
+
+.news .band-quiet {
+  background-color: $news-quiet-bg;
+  border-block: 1px solid $news-hairline;
 }
 
-@include media-breakpoint-up(md) {
-  .post-category {
-    margin-left: -50px;
-  }
+.news .featured-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+  align-items: baseline;
+}
+
+.news .featured-date {
+  font-family: $font-family-monospace;
+  font-size: 0.8125rem;
+  color: $news-muted;
+}
+
+.news .featured-title {
+  max-width: 22ch;
+  margin-top: 0.875rem;
+  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+
+.news .featured-title a {
+  color: $news-link;
+  text-decoration: none;
+}
+
+.news .featured-title a:hover {
+  text-decoration: underline;
 }
 
-.avatar {
-  @include border-radius(3px);
+.news .featured-excerpt {
+  max-width: 62ch;
+  margin-top: 1.125rem;
+  font-size: 1.0625rem;
+  line-height: 1.65;
+}
+
+.news .featured-more {
+  margin-top: 1.5rem;
+}
+
+.news .featured-link {
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  font-weight: 700;
+  color: $news-link;
+  text-decoration: none;
+  border-bottom: 2px solid currentcolor;
+}
 
+.news .featured-link-arrow {
   display: inline-block;
-  vertical-align: middle;
+  transition: transform 0.15s ease;
 }
 
-.post-meta {
-  padding: 5px 0;
-  font-weight: 600;
-  color: $body-color;
+.news .featured-link:hover .featured-link-arrow {
+  transform: translateX(3px);
+}
+
+/* --- Earlier: everything else ----------------------------------------
+  A plain divided list; it recedes so the featured post above keeps the
+  weight.
+*/
+
+.news .section-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  align-items: baseline;
+  justify-content: space-between;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid $body-color;
+}
+
+.news .section-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.news .archive-list {
+  margin-top: 1.75rem;
 }
 
-.post-title {
-  padding-bottom: 16px;
+.news .archive-item {
+  display: grid;
+  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
+  gap: 0.375rem 1.5rem;
+  padding-block: 1.5rem;
+  border-bottom: 1px solid $news-hairline;
 }
 
-.post-date,
-.post-author {
-  margin-left: 16px;
+.news .archive-item:first-child {
+  border-top: 1px solid $news-hairline;
 }
 
-.post-date {
-  text-shadow: 0 -1px 0 rgb(0 0 0 / 10%);
+.news .archive-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
 }
 
-.post-author .author-name {
-  margin-left: 8px;
+.news .archive-date {
+  font-family: $font-family-monospace;
+  font-size: 0.75rem;
+  color: $news-muted;
 }
 
-.news article {
-  padding: 42px 16px;
-  margin: 0 24px;
+.news .archive-name {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.3;
 }
 
-.news article + article {
-  border-top: 1px solid $tertiary;
-  box-shadow: 0 -1px 0 $tertiary;
+.news .archive-name a {
+  color: $news-link;
+  text-decoration: none;
 }
 
-.cell-right {
-  padding-top: 24px;
+.news .archive-name a:hover {
+  text-decoration: underline;
+}
+
+.news .archive-excerpt {
+  max-width: 60ch;
+  margin-top: 0.375rem;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: $news-muted;
+}
+
+/* --- Pages ------------------------------------------------------------ */
+
+.news .pager {
+  margin-top: 2.5rem;
+}
+
+.news .pager-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.news .pager-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  padding: 0.375rem 0.625rem;
+  font-family: $font-family-monospace;
+  font-size: 0.875rem;
+  color: $body-color;
+  text-decoration: none;
+  border: 1px solid $news-hairline;
+}
+
+.news .pager-link:hover {
+  border-color: $body-color;
+}
+
+.news .pager-current,
+.news .pager-current:hover {
+  color: $body-bg;
+  background-color: $body-color;
+  border-color: $body-color;
+}
+
+/* --- Between posts: the honest bit -------------------------------------
+  Quieter than the sections above, and present on every page. A one-post
+  archive still ends on something, not on the featured block alone.
+*/
+
+.news .band-tail {
+  padding-block: clamp(1.5rem, 3vw, 2rem);
+}
+
+.news .tail-title {
+  font-family: $font-family-monospace;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: $news-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.news .tail-what {
+  max-width: 60ch;
+  margin-top: 0.625rem;
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: $news-muted;
+}
+
+/* --- Narrow -------------------------------------------------------------- */
+
+@media (width < 640px) {
+  .news .archive-item {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.625rem;
+  }
 }
diff --git a/_includes/news-archive-item.liquid b/_includes/news-archive-item.liquid
deleted file mode 100644
index c9764f420..000000000
--- a/_includes/news-archive-item.liquid
+++ /dev/null
@@ -1,43 +0,0 @@
-{%- assign author = post.data.author -%}
-{%- assign author = authors[author] -%}
-<article itemscope itemtype='http://schema.org/Article'>
-  <div class='cell-left'>
-    <span class='post-category'>
-      <span class='label'>
-        {{- post.data.category -}}
-      </span>
-    </span>
-  </div>
-  <div class='cell-right'>
-    <div class='post-meta'>
-      <h2 class='post-title' itemprop='headline'>
-        <a href='{{ post.url }}' itemprop='url'>
-          {{- post.data.title -}}
-        </a>
-      </h2>
-      <span
-        class='post-date'
-        itemprop='datePublished'
-        content='{{ post.date | date: '%Y-%m-%d' }}'
-      >
-        {{- post.date | date_to_string -}}
-      </span>
-      <a
-        href='{{ author.url }}'
-        class='post-author'
-        itemprop='author'
-        itemscope
-        itemtype='http://schema.org/Person'
-      >
-        <img
-          class='avatar avatar-small'
-          src='{{ author.avatar }}'
-          alt='{{ author.alias }}'
-          width='24'
-          height='24'
-
-        ><span class='author-name' itemprop='name'>{{ author.name }}</span>
-      </a>
-    </div>
-  </div>
-</article>
diff --git a/_layouts/news-item.liquid b/_layouts/news-item.liquid
index 0c6e24ab1..78ab0900a 100644
--- a/_layouts/news-item.liquid
+++ b/_layouts/news-item.liquid
@@ -6,68 +6,67 @@ body_classes:
 ---
 {%- assign author = authors[author] -%}
 <main class='flex-shrink-0'>
-  <div class='container'>
-    <article class='pb-4' itemscope itemtype='http://schema.org/Article'>
-      <h1 class='post-title mt-5 mb-4' itemprop='headline'>
-        {{- title -}}
-      </h1>
-      <span class='post-category'>
-        <span class='label'>
-          {{- category -}}
-        </span>
-      </span>
-      <div class='post-meta'>
-        <span
-          class='post-date'
-          itemprop='datePublished'
-          content='{{ page.date | date: "%Y-%m-%d" }}'
-        >
-          {{- page.date | date_to_string -}}
-        </span>
+  <article itemscope itemtype='http://schema.org/Article'>
+    <!-- ================= title and byline ============================ -->
+    <header class='entry-head'>
+      <div class='wrap'>
+        <p class='entry-meta'>
+          <span class='entry-cat'>{{ category }}</span>
+          <time
+            class='entry-date'
+            itemprop='datePublished'
+            datetime='{{ page.date | date: '%Y-%m-%d' }}'
+          >
+            {{- page.date | date_to_string -}}
+          </time>
+        </p>
+        <h1 class='entry-title' itemprop='headline'>{{ title }}</h1>
         <a
+          class='entry-author'
           href='{{ author.url }}'
-          class='post-author'
           itemprop='author'
           itemscope
           itemtype='http://schema.org/Person'
         >
           <img
-            class='avatar avatar-small'
+            class='entry-avatar'
             src='{{ author.avatar }}'
-            alt='{{ author.alias }}'
+            alt=''
             width='24'
             height='24'
-
-          ><span class='author-name' itemprop='name'>{{ author.name }}</span>
+          >
+          <span itemprop='name'>{{ author.name }}</span>
         </a>
       </div>
-      <div class='post-content' itemprop='articleBody'>
-        {{ content }}
+    </header>
+
+    <!-- ================= the post ==================================== -->
+    <div class='entry-body' itemprop='articleBody'>
+      <div class='wrap'>
+        <div class='entry-prose'>{{ content }}</div>
+      </div>
+    </div>
+  </article>
+
+  {%- assign prev_post = collections.posts | getPreviousCollectionItem -%}
+  {%- assign next_post = collections.posts | getNextCollectionItem -%}
+  {%- if prev_post or next_post %}
+    <!-- ================= what sits either side ======================= -->
+    <nav class='entry-nav' aria-label='Other posts'>
+      <div class='wrap entry-nav-grid'>
+        {%- if next_post %}
+          <a class='entry-step entry-step-older' href='{{ next_post.url }}'>
+            <span class='entry-step-dir'>Older</span>
+            <span class='entry-step-title'>{{ next_post.data.title }}</span>
+          </a>
+        {%- endif %}
+        {%- if prev_post %}
+          <a class='entry-step entry-step-newer' href='{{ prev_post.url }}'>
+            <span class='entry-step-dir'>Newer</span>
+            <span class='entry-step-title'>{{ prev_post.data.title }}</span>
+          </a>
+        {%- endif %}
       </div>
-    </article>
-    {%- assign prev_post = collections.posts | getPreviousCollectionItem -%}
-    {%- assign next_post = collections.posts | getNextCollectionItem -%}
-    <nav class='single-post-pager' aria-label='Post'>
-      {% if prev_post %}
-        <a class='pager-link newer-post' href='{{ prev_post.url }}'>
-          <span class='pager-direction'>Newer</span>
-          <span class='pager-title'>{{- prev_post.data.title -}}</span>
-          <span class='pager-date'>
-            {{- prev_post.date | date_to_string -}}
-          </span>
-          <span class='pager-chevron'>&#8249;</span>
-        </a>
-      {% endif %}
-      {% if next_post %}
-        <a class='pager-link older-post' href='{{ next_post.url }} '>
-          <span class='pager-direction'>Older</span>
-          <span class='pager-title'>{{- next_post.data.title -}}</span>
-          <span class='pager-date'>
-            {{- next_post.date | date_to_string -}}
-          </span>
-          <span class='pager-chevron'>&#8250;</span>
-        </a>
-      {% endif %}
     </nav>
-  </div>
+  {%- endif %}
 </main>
diff --git a/collections/_pages/news.html b/collections/_pages/news.html
index ec214ed6d..22862a124 100644
--- a/collections/_pages/news.html
+++ b/collections/_pages/news.html
@@ -1,93 +1,177 @@
 ---
-title: News Archive
+title: News
+layout: default
 body_classes:
   - news
-layout: page
+description: What OpenINF is building, and the thinking behind it.
 permalink: "/news/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}"
 eleventyImport:
   collections: ["post"]
 pagination:
   data: collections.posts
   alias: posts
-  size: 3
+  size: 5
 eleventyComputed:
   title: "{{ title }}{% if pagination.pageNumber > 0 %} &middot; page {{ pagination.pageNumber | plus: 1 }}{% endif %}"
 ---
-{%- for post in posts -%}
-  {%- include 'news-archive-item.liquid' -%}
-{%- endfor -%}
+{%- comment -%}
+  The newest post leads the first page, so one post reads as the news rather
+  than as an archive holding a single row. Later pages are all rows.
+{%- endcomment -%}
+{%- assign skip = 0 -%}
+{%- if pagination.pageNumber == 0 and posts.size > 0 -%}
+  {%- assign skip = 1 -%}
+  {%- assign featured = posts[0] -%}
+{%- endif -%}
+{%- assign rowCount = posts.size | minus: skip -%}
+<main class="flex-shrink-0">
+  <!-- ================= what this is ================================== -->
+  <section class="news-head">
+    <div class="news-head-ring" aria-hidden="true">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid meet">
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="10"
+        />
+      </svg>
+    </div>
 
-{%- assign trailSize = 2 -%}
-{% comment %} Start and end page numbers based on trail size. {% endcomment %}
+    <div class="wrap news-head-inner">
+      <h1 class="news-title">News</h1>
+      <p class="news-lede">What is being built, and the thinking behind it.</p>
+    </div>
+  </section>
 
-{%- assign firstPageIndex = 0 -%}
-{%- assign currentPageIndex = pagination.pageNumber -%}
-{%- assign lastPageIndex = pagination.pages.length | minus: 1 -%}
+  {%- if featured %}
+    <!--
+      ================= the newest post ==============================
+      The featured/rows split exists so one post still reads as the news,
+      not as an archive with a single lonely row. It gets the section's own
+      ground, same as the substance of any other page.
+    -->
+    <section class="band band-quiet" aria-labelledby="featured-title">
+      <div class="wrap">
+        <article class="featured">
+          <p class="featured-meta">
+            <span class="featured-cat">{{ featured.data.category }}</span>
+            <time
+              class="featured-date"
+              datetime="{{ featured.date | date: '%Y-%m-%d' }}">
+              {{- featured.date | date_to_string -}}
+            </time>
+          </p>
+          <h2 class="featured-title" id="featured-title">
+            <a href="{{ featured.url }}">{{ featured.data.title }}</a>
+          </h2>
+          <p class="featured-excerpt">
+            {%- if featured.data.excerpt -%}
+              {{- featured.data.excerpt -}}
+            {%- else -%}
+              {{- featured.templateContent | strip_html | truncatewords: 40 -}}
+            {%- endif -%}
+          </p>
+          <p class="featured-more">
+            <a class="featured-link" href="{{ featured.url }}">
+              Read it
+              <span class="featured-link-arrow" aria-hidden="true">&rarr;</span>
+            </a>
+          </p>
+        </article>
+      </div>
+    </section>
+  {%- endif %}
 
-{%- assign startPageIndex = currentPageIndex
-  | minus: trailSize
-  | at_least: firstPageIndex
--%}
-{%- assign endPageIndex = currentPageIndex
-  | plus: trailSize
-  | at_most: lastPageIndex
--%}
+  {%- if rowCount > 0 %}
+    <!-- ================= everything else ============================= -->
+    <section class="band" aria-labelledby="archive-title">
+      <div class="wrap">
+        <div class="section-head">
+          <h2 class="section-title" id="archive-title">
+            {%- if featured -%}Earlier{%- else -%}Posts{%- endif -%}
+          </h2>
+        </div>
 
-{% if pagination.pages.length > 1 %}
-  <nav class="pagination-container" aria-label="Blog pages">
-    <ul class="pagination justify-content-center">
-      {% if pagination.href.previous %}
-        <li class="page-item">
-          <a
-            class="page-link"
-            href="{{ pagination.href.previous }}"
-            tabindex="-1"
-            >&#x23F4;</a
-          >
-        </li>
-      {% else %}
-        <li class="page-item disabled">
-          <span
-            class="page-link"
-            tabindex="-1"
-            >&#x23F4;</span
-          >
-        </li>
-      {% endif %}
+        <ul class="archive-list">
+          {%- for post in posts offset: skip %}
+            <li class="archive-item">
+              <p class="archive-meta">
+                <span class="archive-cat">{{ post.data.category }}</span>
+                <time
+                  class="archive-date"
+                  datetime="{{ post.date | date: '%Y-%m-%d' }}">
+                  {{- post.date | date_to_string -}}
+                </time>
+              </p>
+              <div class="archive-body">
+                <p class="archive-name">
+                  <a href="{{ post.url }}">{{ post.data.title }}</a>
+                </p>
+                <p class="archive-excerpt">
+                  {%- if post.data.excerpt -%}
+                    {{- post.data.excerpt -}}
+                  {%- else -%}
+                    {{-
+                      post.templateContent
+                      | strip_html
+                      | truncatewords: 28
+                    -}}
+                  {%- endif -%}
+                </p>
+              </div>
+            </li>
+          {%- endfor %}
+        </ul>
 
-      {% comment %} Display the pagination trail. {% endcomment %}
-      {%- for pageIndex in (startPageIndex..endPageIndex) %}
-        {%- assign pageEntry = pagination.pages[pageIndex] -%}
-        <li
-          class="page-item{% if page.url == pagination.hrefs[pageIndex] %} active{% endif %}">
-          <a
-            class="page-link"
-            href="{{ pagination.hrefs[pageIndex] }}"
-            {% if page.url == pagination.hrefs[pageIndex] %}
-              aria-current="page"
-            {% endif %}
-            title="{{ pageEntry.title }}">
-            {{- pageIndex | plus: 1 -}}
-          </a>
-        </li>
-      {% endfor %}
+        {%- if pagination.pages.length > 1 %}
+          {%- assign trailSize = 2 -%}
+          {%- assign firstPageIndex = 0 -%}
+          {%- assign currentPageIndex = pagination.pageNumber -%}
+          {%- assign lastPageIndex = pagination.pages.length | minus: 1 -%}
+          {%- assign startPageIndex = currentPageIndex
+            | minus: trailSize
+            | at_least: firstPageIndex
+          -%}
+          {%- assign endPageIndex = currentPageIndex
+            | plus: trailSize
+            | at_most: lastPageIndex
+          -%}
+          <nav class="pager" aria-label="News pages">
+            <ul class="pager-list">
+              {%- for pageIndex in (startPageIndex..endPageIndex) %}
+                <li class="pager-item">
+                  <a
+                    class="pager-link{% if page.url == pagination.hrefs[pageIndex] %} pager-current{% endif %}"
+                    href="{{ pagination.hrefs[pageIndex] }}"
+                    {% if page.url == pagination.hrefs[pageIndex] %}
+                      aria-current="page"
+                    {% endif %}>
+                    {{- pageIndex | plus: 1 -}}
+                  </a>
+                </li>
+              {%- endfor %}
+            </ul>
+          </nav>
+        {%- endif %}
+      </div>
+    </section>
+  {%- endif %}
 
-      {% if pagination.href.next %}
-        <li class="page-item">
-          <a
-            class="page-link"
-            href="{{ pagination.href.next }}"
-            >&#x23F5;</a
-          >
-        </li>
-      {% else %}
-        <li class="page-item">
-          <span
-            class="page-link disabled"
-            >&#x23F5;</span
-          >
-        </li>
-      {% endif %}
-    </ul>
-  </nav>
-{% endif %}
+  <!-- ================= the honest bit ================================= -->
+  <section class="band band-tail" aria-labelledby="news-tail-title">
+    <div class="wrap">
+      <h2 class="tail-title" id="news-tail-title">Between posts</h2>
+      <p class="tail-what">
+        Posts go up when there is something worth writing down, not on a
+        schedule. The community channels move faster than this page — see
+        <a href="/docs/dev/faq/support/">Support</a> for how to reach them.
+      </p>
+    </div>
+  </section>
+</main>