Make the site more editorial

public/css/site.css

@@ -94,6 +94,11 @@ body {
   padding: 3rem 2rem;
 }
 
+.home-sidebar {
+  max-width: 24rem;
+  border-radius: 1.2rem;
+}
+
 .hero .display-5,
 .page-title,
 .card h1,
@@ -192,6 +197,49 @@ article.card:hover {
   border-left-color: var(--brand-accent);
 }
 
+.editorial-list li + li {
+  padding-top: 0.85rem;
+  border-top: 1px solid rgba(18, 24, 38, 0.08);
+}
+
+.editorial-list a {
+  color: var(--ink);
+}
+
+.editorial-list a:hover {
+  color: #8b653f;
+}
+
+.feature-article {
+  position: relative;
+}
+
+.feature-article::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(135deg, rgba(180, 138, 90, 0.06), transparent 35%);
+}
+
+.feature-dropcap:first-letter {
+  float: left;
+  font-family: "Cormorant Garamond", Georgia, serif;
+  font-size: 4.2rem;
+  line-height: 0.8;
+  padding-right: 0.25rem;
+  padding-top: 0.2rem;
+  color: #8b653f;
+}
+
+.comment-card {
+  border-left: 4px solid rgba(180, 138, 90, 0.32);
+}
+
+.comment-card .small.text-muted {
+  letter-spacing: 0.02em;
+}
+
 .btn {
   border-radius: 999px;
   font-weight: 600;