From cafbcf8b74a58698e641d070c6925d69759ec679 Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 10:12:01 +0200
Subject: [PATCH] style: site back to 72rem + section-link is
 black/underlined/larger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- --content-max: 83rem → 72rem (back to the original width — the wider
  canvas tested less well in practice; sections felt under-furnished).
- .section-link: italic serif retained, but now black (--on-surface)
  instead of terracotta, underlined with a fine 0.5px stroke and 4px
  text-underline-offset, font-size bumped from text-body-md to
  text-title-lg (1.125rem). Hover slightly thickens the underline rather
  than swapping colour, so the link still reads as a link at rest.
- .section-link--ink modifier swaps to cream on the dark events card.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/styles/global.css | 18 +++++++++++-------
 src/styles/tokens.css |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 806c145..4192fcf 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -232,23 +232,27 @@ a:hover {
 .ghost-border        { border: var(--ghost-border); }
 .ghost-border-bottom { border-bottom: var(--ghost-border); }
 
-/* --- Section link — prominent italic serif, placed at the bottom of
-       its respective box or article. See points 8 + 10 in the v3 spec:
-       italics are reserved for links + the Bifrost wordmark. --- */
+/* --- Section link — black serif italic, underlined, larger.
+       Placed at the bottom of its respective box or article.
+       Italics are reserved for links + the Bifrost wordmark. --- */
 .section-link {
   display: inline-block;
   font-family: var(--font-serif);
   font-style: italic;
-  font-size: var(--text-body-md);
-  color: var(--pigment-terracotta);
-  text-decoration: none;
+  font-size: var(--text-title-lg);   /* 1.125rem — larger than body */
+  color: var(--on-surface);
+  text-decoration: underline;
+  text-decoration-thickness: 0.5px;
+  text-underline-offset: 4px;
   border-bottom: none;
   transition: opacity var(--duration-fast) var(--ease-standard);
 }
 .section-link:hover {
+  color: var(--on-surface);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
   border-bottom: none;
   opacity: 0.78;
-  color: var(--pigment-terracotta);
 }
 .section-link--ink {
   color: var(--ink-text);
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index d030074..b5f92b7 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -129,6 +129,6 @@
   --duration-slow: 420ms;
 
   /* --- Layout --- */
-  --content-max: 83rem;   /* 1328px — 15% wider than the original 72rem */
+  --content-max: 72rem;   /* 1152px */
   --reading-max: 42rem;   /*  672px */
 }