privateboard 0.1.0 → 0.1.3

package/public/report/spines/anthropic-essay.css

@@ -19,9 +19,24 @@
   --clay-pale: #F2E0D5;
   --sage: #8B9D7F;
   --sage-deep: #6B7D5F;
+  /* Em emphasis · the signature italic-in-colour accent applied to
+     <em> across body p / h2 / h3 / blockquote / nq-question /
+     considerations etc. Brighter than --clay-deep so it pops against
+     the lighter --ink-mid body colour without fighting kickers
+     (which stay on --clay-deep). */
+  --em: #B65A3A;
+  /* Cross-spine token aliases · used by the unified design system in
+     report.html. Each spine maps its own palette role into these. */
+  --accent: var(--clay);
+  --warn: var(--clay-deep);
+  /* Latin remains serif (Tiempos / Charter — anthropic signature).
+     CJK falls to PingFang SC first per global preference; Songti
+     remains as a last-resort fallback. */
   --serif: "Tiempos Headline", "Tiempos", "Source Serif Pro", "Charter",
            "Iowan Old Style", "Palatino", Georgia,
-           "Songti SC", "STSong", "Source Han Serif CN", "Noto Serif CJK SC", serif;
+           "PingFang SC", "PingFang TC", "Hiragino Sans GB",
+           "Source Han Sans CN", "Noto Sans CJK SC",
+           "Songti SC", "STSong", serif;
   --sans: "Söhne", "Styrene B", "Inter", "Helvetica Neue", -apple-system,
           BlinkMacSystemFont, system-ui,
           "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", sans-serif;
@@ -32,103 +47,142 @@
 * { box-sizing: border-box; margin: 0; padding: 0; }
 html, body {
   background: var(--paper);
-  color: var(--ink-soft);
-  font-family: var(--serif);
-  font-size: 18px;
-  line-height: 1.62;
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  font-feature-settings: "kern" 1, "liga" 1;
   min-height: 100vh;
 }
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: var(--paper); }
 ::-webkit-scrollbar-thumb { background: var(--rule); }
 
-.doc { max-width: 760px; margin: 0 auto; padding: 0 0 96px; }
+.doc { max-width: 740px; margin: 0 auto; padding: 0 0 96px; }
 
 .top-rule {
   background: var(--paper);
   border-bottom: 1px solid var(--rule);
-  padding: 14px 32px;
+  padding: 22px 56px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-family: var(--sans);
-  font-size: 11.5px;
+  gap: 14px;
+}
+.top-rule .crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--ink);
+  font-weight: 500;
+  font-family: var(--serif);
+  font-style: normal;
+  letter-spacing: -0.01em;
+  font-size: 17px;
+  text-transform: none;
+}
+/* The · between brand and section becomes a clay dot — matches the
+   reference's `.frame-mark` 10×10 circle. The text · is hidden via
+   font-size:0 + width/height fill from the bg. */
+.top-rule .crumb .accent {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: var(--clay);
+  border-radius: 50%;
+  font-size: 0;
+  color: transparent;
+  vertical-align: middle;
+  margin: 0;
+}
+.top-rule .top-actions {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--ink-mid);
   letter-spacing: 0.04em;
-  color: var(--ink-faint);
 }
-.top-rule .crumb { color: var(--ink); font-weight: 500; font-style: italic; font-family: var(--serif); letter-spacing: 0; font-size: 14px; text-transform: none; }
-.top-rule .crumb .accent { color: var(--clay); }
-.top-rule .back {
+.top-rule .back,
+.top-rule .download {
   color: var(--ink-mid);
   text-decoration: none;
+  background: none;
   border: none;
-  border-bottom: 1px solid var(--rule);
-  padding: 4px 0;
-  font-style: italic;
-  font-family: var(--serif);
-  letter-spacing: 0;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
   text-transform: none;
-  font-size: 14px;
 }
-.top-rule .back:hover { color: var(--clay); border-color: var(--clay); }
+.top-rule .back:hover,
+.top-rule .download:hover { color: var(--clay-deep); }
+.top-rule .download::before { content: "↓ "; color: var(--clay); }
 
 .cover {
-  padding: 80px 32px 48px;
-  border-bottom: 1px solid var(--rule);
+  padding: 96px 32px 32px;
   background: transparent;
 }
 .cover-tag {
-  font-family: var(--sans);
+  font-family: var(--mono);
   font-size: 11px;
-  letter-spacing: 0.16em;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: var(--clay);
+  color: var(--clay-deep);
   font-weight: 500;
-  margin-bottom: 32px;
-  display: flex; align-items: center; gap: 14px;
+  margin-bottom: 56px;
+  display: inline-flex; align-items: center; gap: 14px;
 }
-.cover-tag .pipe { width: 1px; height: 12px; background: var(--rule); }
+.cover-tag .pipe { width: 16px; height: 1px; background: var(--clay); }
 .cover-tag .secondary { color: var(--ink-faint); font-weight: 400; }
 .cover-title {
   font-family: var(--serif);
-  font-size: 46px;
-  font-weight: 500;
-  line-height: 1.18;
-  letter-spacing: -0.012em;
+  font-size: 56px;
+  font-weight: 400;
+  line-height: 1.08;
+  letter-spacing: -0.02em;
   color: var(--ink);
-  margin-bottom: 22px;
-  max-width: 700px;
-  font-style: italic;
+  margin-bottom: 28px;
+  max-width: 800px;
+  font-style: normal;
 }
+.cover-title em { font-style: italic; color: var(--em); }
 .cover-deck {
-  font-size: 19px;
+  font-family: var(--serif);
+  font-size: 22px;
   font-weight: 400;
-  line-height: 1.52;
+  font-style: italic;
+  line-height: 1.5;
   color: var(--ink-soft);
-  max-width: 660px;
-  margin-bottom: 48px;
+  max-width: 70ch;
+  margin-bottom: 64px;
+  letter-spacing: -0.005em;
 }
 .cover-deck strong { color: var(--ink); font-weight: 500; }
+.cover-deck em { font-style: italic; color: var(--em); }
 .cover-byline {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 28px;
-  padding-top: 24px;
+  gap: 36px;
+  padding-top: 28px;
   border-top: 1px solid var(--rule);
 }
 @media (max-width: 720px) { .cover-byline { grid-template-columns: repeat(2, 1fr); } }
+.byline-block { display: flex; flex-direction: column; gap: 4px; }
 .byline-block .label {
-  font-family: var(--sans);
-  font-size: 10.5px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: none;
   color: var(--ink-faint);
   font-weight: 500;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
-.byline-block .value { font-size: 14.5px; color: var(--ink); font-family: var(--serif); }
+.byline-block .value { font-size: 16px; color: var(--ink); font-family: var(--serif); font-weight: 500; }
 .byline-block .signed-avatars { display: flex; margin-top: 4px; }
 .byline-block .signed-avatars img {
   width: 24px; height: 24px;
@@ -146,7 +200,7 @@ html, body {
 }
 .cover-versions-label {
   font-family: var(--sans);
-  font-size: 10.5px;
+  font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--ink-faint);
@@ -166,27 +220,37 @@ html, body {
 .cover-version .num { font-weight: 600; }
 .cover-version .sep { color: var(--ink-muted); margin: 0 2px; }
 
-.body { padding: 0 32px; color: var(--ink-soft); }
-.body h1, .body h2, .body h3, .body h4 { font-family: var(--serif); color: var(--ink); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
+.body { padding: 0 32px; color: var(--ink-mid); }
+.body h1, .body h2, .body h3, .body h4 { font-family: var(--serif); color: var(--ink); font-weight: 400; line-height: 1.18; letter-spacing: -0.018em; }
 .body h1 { display: none; }
 .body .chapter-num {
   display: block;
-  font-family: var(--sans);
+  font-family: var(--mono);
   font-size: 11px;
-  color: var(--clay);
+  color: var(--clay-deep);
   font-weight: 500;
-  letter-spacing: 0.14em;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
-  margin: 56px 0 12px;
-}
-.body h2 { font-size: 30px; line-height: 1.22; margin: 0 0 18px; max-width: 700px; font-style: italic; }
-.body h3 { font-size: 21px; margin: 28px 0 10px; font-style: italic; }
+  margin: 40px 0 14px;
+}
+/* First chapter-num inside .body has no preceding content to space
+   away from — collapse the top gap so "session 01" sits closer to
+   the cover/header chrome above it. */
+.body > .chapter-num:first-child,
+.body > h1 + .chapter-num {
+  margin-top: 16px;
+}
+.body h2 { font-size: 36px; line-height: 1.18; margin: 0 0 28px; font-style: normal; }
+.body h2 em { font-style: italic; color: var(--em); }
+.body h3 { font-size: 22px; line-height: 1.3; margin: 28px 0 12px; font-style: normal; letter-spacing: -0.012em; }
+.body h3 em { font-style: italic; color: var(--em); }
 .body h4 { font-size: 14px; margin: 18px 0 6px; text-transform: none; letter-spacing: 0; font-style: italic; color: var(--ink-mid); }
-.body p { margin: 14px 0; line-height: 1.72; color: var(--ink-soft); font-size: 18px; }
-.body ul, .body ol { margin: 14px 0 16px 26px; }
-.body li { margin: 8px 0; line-height: 1.65; color: var(--ink-soft); }
+.body p { margin: 0 0 18px; line-height: 1.75; color: var(--ink-mid); font-size: 16px; font-family: var(--sans); }
+.body p:last-child { margin-bottom: 0; }
+.body ul, .body ol { margin: 14px 0 18px 26px; }
+.body li { margin: 8px 0; line-height: 1.7; color: var(--ink-mid); font-size: 16px; font-family: var(--sans); }
 .body strong { color: var(--ink); font-weight: 600; }
-.body em { color: var(--ink); font-style: italic; }
+.body em { color: var(--em); font-style: italic; }
 .body code {
   background: var(--paper-soft);
   border: 1px solid var(--rule);
@@ -199,22 +263,29 @@ html, body {
 .body code.badge-confidence-high { color: var(--sage-deep); border-color: var(--sage); background: var(--sage-pale, var(--paper-soft)); }
 .body code.badge-confidence-medium { color: #B8721A; border-color: rgba(184, 114, 26, 0.3); }
 .body code.badge-confidence-low { color: var(--clay-deep); border-color: var(--clay); }
-.body code.badge-priority-p0 { background: var(--clay); color: var(--paper); border-color: var(--clay); font-weight: 600; }
-.body code.badge-priority-p1 { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
+/* Priority badges · typographic only (no fill, no border). Anthropic
+   register: P0 in clay-deep (the spine's emphasis colour), P1 in
+   ink (full weight neutral), P2 muted. */
+.body code.badge-priority-p0 { color: var(--clay-deep); }
+.body code.badge-priority-p1 { color: var(--ink); }
 .body code.badge-priority-p2 { color: var(--ink-faint); }
 .body blockquote {
-  padding: 18px 28px 16px;
-  margin: 26px 0;
-  border-top: 0.5px solid var(--rule);
-  border-bottom: 0.5px solid var(--rule);
-  color: var(--ink-mid);
-  font-size: 18px;
+  padding: 36px 28px 32px;
+  margin: 40px 0;
+  border-top: 1px solid var(--rule);
+  border-bottom: 1px solid var(--rule);
+  color: var(--ink);
+  font-size: 28px;
   font-style: italic;
-  line-height: 1.55;
+  font-family: var(--serif);
+  font-weight: 400;
+  line-height: 1.32;
+  letter-spacing: -0.015em;
+  max-width: 660px;
 }
 .body blockquote::before { display: none; }
-.body blockquote em { font-style: italic; color: var(--ink); }
-.body blockquote strong { color: var(--ink); font-style: normal; }
+.body blockquote em { font-style: italic; color: var(--em); }
+.body blockquote strong { color: var(--ink); font-style: normal; font-weight: 500; }
 
 /* Bottom Line · soft surface card. */
 .body section.section-bottom-line {
@@ -225,17 +296,18 @@ html, body {
   border-bottom: 1px solid var(--rule);
 }
 .body h2.section-bottom-line {
-  font-family: var(--sans);
+  font-family: var(--mono);
   font-size: 11px;
-  color: var(--clay);
+  color: var(--clay-deep);
   text-transform: uppercase;
-  letter-spacing: 0.16em;
+  letter-spacing: 0.18em;
   margin: 0 0 16px;
   font-weight: 500;
   font-style: normal;
 }
-.body section.section-bottom-line p { font-size: 22px; line-height: 1.45; color: var(--ink); font-style: italic; max-width: 660px; }
-.body section.section-bottom-line p:not(:first-child) { font-size: 15px; line-height: 1.6; color: var(--ink-mid); margin-top: 18px; font-style: normal; }
+.body section.section-bottom-line p { font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--ink-soft); font-style: italic; max-width: 70ch; letter-spacing: -0.005em; }
+.body section.section-bottom-line p em { color: var(--em); }
+.body section.section-bottom-line p:not(:first-child) { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--ink-mid); margin-top: 18px; font-style: normal; }
 
 /* Working Hypothesis · the signature anchor for this spine. */
 .body section.section-working-hypothesis {
@@ -243,21 +315,24 @@ html, body {
   padding: 8px 0 24px;
 }
 .body section.section-working-hypothesis p:first-child {
-  font-size: 22px;
-  line-height: 1.55;
-  color: var(--ink);
+  font-family: var(--serif);
+  font-size: 20px;
+  line-height: 1.65;
+  color: var(--ink-soft);
   font-style: italic;
+  letter-spacing: -0.005em;
 }
 .body section.section-working-hypothesis p:first-child::first-letter {
   font-family: var(--serif);
   font-size: 64px;
-  font-weight: 500;
+  font-weight: 400;
   float: left;
-  line-height: 0.95;
-  padding: 4px 12px 0 0;
-  color: var(--clay);
+  line-height: 0.85;
+  margin: 8px 12px 0 0;
+  color: var(--clay-deep);
   font-style: normal;
 }
+.body section.section-working-hypothesis p:first-child em { color: var(--em); }
 
 /* Thesis · less heavy than a16z. */
 .body section.section-thesis {
@@ -265,44 +340,84 @@ html, body {
   padding-bottom: 28px;
   border-bottom: 1px solid var(--rule);
 }
-.body h2.section-thesis { font-family: var(--sans); font-size: 11px; color: var(--clay); text-transform: uppercase; letter-spacing: 0.16em; margin: 0 0 18px; font-weight: 500; font-style: normal; }
-.body section.section-thesis p:first-child { font-size: 28px; line-height: 1.32; color: var(--ink); font-style: italic; font-weight: 500; }
+.body h2.section-thesis { font-family: var(--mono); font-size: 11px; color: var(--clay-deep); text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 18px; font-weight: 500; font-style: normal; }
+.body section.section-thesis p:first-child { font-family: var(--serif); font-size: 28px; line-height: 1.32; color: var(--ink); font-style: italic; font-weight: 400; letter-spacing: -0.012em; }
+.body section.section-thesis p:first-child em { color: var(--em); }
 
-.body section.section-frame-shift p:first-child { font-size: 19px; color: var(--ink); font-style: italic; }
+.body section.section-frame-shift p:first-child { font-family: var(--serif); font-size: 19px; color: var(--ink); font-style: italic; }
 
-/* Numbered observations / headline findings · essay numerals (not pillar grid). */
+/* Observations / headline findings · essay style. Each item gets a
+   small italic serif kicker ("— observation one"), a serif headline
+   in roman with italic-em-in-clay emphasis, and a sans body. Modeled
+   on the reference's `.obs` block. No big left-margin numerals — the
+   typography itself signals enumeration. */
 .body section.section-headline-findings .pillars-grid,
 .body section.section-big-ideas .pillars-grid {
   display: block;
-  margin: 28px 0;
+  margin: 28px 0 0;
+  counter-reset: obs;
 }
 .body section.section-headline-findings .pillar,
 .body section.section-big-ideas ol > li {
   border-top: 1px solid var(--rule);
-  padding: 28px 0 28px 56px;
+  padding: 36px 0;
   position: relative;
   margin: 0;
+  counter-increment: obs;
+  list-style: none;
+}
+.body section.section-big-ideas ol {
+  counter-reset: obs; list-style: none; padding: 0; margin: 28px 0 0;
+}
+.body section.section-headline-findings .pillar:last-child,
+.body section.section-big-ideas ol > li:last-child { border-bottom: 1px solid var(--rule); }
+/* The kicker — italic serif "— observation i / ii / iii / iv".
+   For .pillar (a real DOM element with numeric text inside), we hide
+   its text and inject the kicker via ::before. For .section-big-ideas
+   list items, the ::before is a plain pseudo with the same content. */
+.body section.section-headline-findings .pillar .pillar-num {
+  font-size: 0;
+  color: transparent;
+  display: block;
+  margin: 0;
+  position: static;
 }
-.body section.section-headline-findings .pillar:last-child { border-bottom: 1px solid var(--rule); }
-.body section.section-headline-findings .pillar .pillar-num,
+.body section.section-headline-findings .pillar .pillar-num::before,
 .body section.section-big-ideas ol > li::before {
-  position: absolute;
-  top: 28px; left: 0;
+  content: "— observation " counter(obs, lower-roman);
+  display: block;
   font-family: var(--serif);
-  font-size: 32px;
-  font-weight: 500;
   font-style: italic;
-  color: var(--clay);
-  letter-spacing: -0.01em;
-  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--clay-deep);
+  letter-spacing: 0;
+  margin: 0 0 8px;
   text-transform: none;
+  position: static;
+}
+.body section.section-headline-findings .pillar h3,
+.body section.section-big-ideas ol > li h3 {
+  font-family: var(--serif);
+  font-size: 26px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.25;
+  letter-spacing: -0.012em;
+  margin: 0 0 18px;
+  max-width: 680px;
+  color: var(--ink);
+}
+.body section.section-headline-findings .pillar h3 em,
+.body section.section-big-ideas ol > li h3 em { font-style: italic; color: var(--em); }
+.body section.section-headline-findings .pillar p,
+.body section.section-big-ideas ol > li p {
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.75;
+  color: var(--ink-mid);
+  margin: 0 0 14px;
 }
-.body section.section-big-ideas ol { counter-reset: bigidea; list-style: none; padding: 0; margin: 28px 0 0; }
-.body section.section-big-ideas ol > li { counter-increment: bigidea; }
-.body section.section-big-ideas ol > li::before { content: counter(bigidea); }
-.body section.section-big-ideas ol > li:last-child { border-bottom: 1px solid var(--rule); }
-.body section.section-headline-findings .pillar h3 { font-size: 21px; margin: 0 0 10px; font-style: italic; }
-.body section.section-headline-findings .pillar p { font-size: 16.5px; line-height: 1.6; }
 
 /* Why Now · soft callout. */
 .body section.section-why-now {
@@ -312,7 +427,7 @@ html, body {
   margin: 24px 0 32px;
   border-radius: 4px;
 }
-.body section.section-why-now p { font-size: 16.5px; line-height: 1.65; }
+.body section.section-why-now p { font-size: 17px; line-height: 1.65; }
 
 /* Considerations · the gentle action substitute. */
 .body section.section-considerations ol,
@@ -337,14 +452,16 @@ html, body {
 .body section.section-considerations ol > li::before,
 .body section.section-recommendations ol > li::before,
 .body section.section-the-bet ol > li::before {
-  content: counter(rec);
+  content: counter(rec, lower-roman) ".";
   position: absolute;
-  top: 22px; left: 0;
+  top: 24px; left: 0;
   font-family: var(--serif);
   font-style: italic;
   font-size: 28px;
   color: var(--clay);
-  font-weight: 500;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: -0.005em;
 }
 .body section.section-considerations ol > li p:first-child strong,
 .body section.section-recommendations ol > li p:first-child strong,
@@ -377,81 +494,143 @@ html, body {
   font-weight: 500;
 }
 
+/* Open Questions · italic decimal-leading-zero numerals (01, 02, 03)
+   in clay serif, matching the reference's `.open-q::before` pattern. */
 .body section.section-new-questions ol { counter-reset: nq; list-style: none; padding: 0; }
 .body section.section-new-questions ol > li {
   counter-increment: nq;
-  position: relative;
-  padding: 14px 0 14px 48px;
-  border-top: 1px dashed var(--rule);
-  font-size: 17px;
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  gap: 20px;
+  align-items: start;
+  padding: 24px 0;
+  border-top: 1px solid var(--rule);
+  font-family: var(--serif);
+  font-size: 19px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ink);
+  letter-spacing: -0.005em;
 }
-.body section.section-new-questions ol > li:last-child { border-bottom: 1px dashed var(--rule); }
 .body section.section-new-questions ol > li::before {
-  content: "Q" counter(nq);
-  position: absolute;
-  top: 14px; left: 0;
+  content: counter(nq, decimal-leading-zero);
+  font-family: var(--serif);
+  font-style: italic;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 1.2;
   color: var(--clay);
-  font-family: var(--sans);
-  font-size: 12px;
-  letter-spacing: 0.06em;
-  font-weight: 600;
+  letter-spacing: -0.005em;
 }
+.body section.section-new-questions ol > li em { font-style: italic; color: var(--em); }
 
+/* Editorial table · the failure-mode / pre-mortem / scenario table.
+   Designed to read like a research-note exhibit: generous row-height,
+   sans body for legibility, mono-uppercase clay-deep headers (matches
+   chapter-num and figure-label kickers), serif italic clay-deep first
+   column for the "subject" axis, hairline row dividers. The 2px ink
+   top rule is enforced by report.html's unified design system. */
 .body table.md-table {
   width: 100%;
   border-collapse: collapse;
-  margin: 22px 0 24px;
-  font-size: 15px;
-  border-top: 1px solid var(--ink);
+  margin: 32px 0 36px;
+  font-size: 14px;
+  font-family: var(--sans);
+  line-height: 1.6;
 }
-.body table.md-table th, .body table.md-table td {
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--rule);
+.body table.md-table th,
+.body table.md-table td {
+  padding: 16px 18px;
   text-align: left;
   vertical-align: top;
-  font-family: var(--serif);
+  font-family: var(--sans);
+  color: var(--ink-mid);
 }
 .body table.md-table th {
-  font-family: var(--sans);
+  font-family: var(--mono);
   font-weight: 500;
-  font-size: 11.5px;
-  letter-spacing: 0.12em;
+  font-size: 12px;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: var(--ink-faint);
+  color: var(--clay-deep);
+  padding-top: 14px;
+  padding-bottom: 14px;
 }
-.body table.md-table td:first-child { font-weight: 500; color: var(--ink); font-style: italic; }
+.body table.md-table td:first-child {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-style: italic;
+  color: var(--ink);
+  font-size: 14px;
+  letter-spacing: -0.005em;
+  padding-right: 28px;
+}
+.body table.md-table td strong { color: var(--ink); font-weight: 600; }
+.body table.md-table td em { color: var(--em); font-style: italic; }
+.body table.md-table tr:hover td { background: var(--surface); }
 
+/* Methodology · rendered as the reference's "Acknowledgments & Method"
+   card. Warm paper-soft surface, mono clay-deep label, sans body. */
+.body section.section-methodology {
+  background: var(--paper-soft);
+  border: 1px solid var(--rule);
+  padding: 40px 48px;
+  margin: 64px 0 0;
+  border-radius: 0;
+}
 .body h2.section-methodology {
-  margin-top: 96px;
-  padding-top: 22px;
-  font-size: 11.5px;
-  color: var(--ink-faint);
+  margin: 0 0 16px;
+  padding: 0;
+  font-size: 11px;
+  color: var(--clay-deep);
   text-transform: uppercase;
-  letter-spacing: 0.14em;
+  letter-spacing: 0.18em;
   font-weight: 500;
-  font-family: var(--sans);
+  font-family: var(--mono);
   font-style: normal;
-  border-top: 1px solid var(--rule);
+  border-top: none;
+}
+.body h2.section-methodology::before { content: "— "; color: var(--clay-deep); }
+.body section.section-methodology p {
+  font-family: var(--sans);
+  color: var(--ink-mid);
+  font-size: 15px;
+  line-height: 1.75;
+  max-width: 720px;
 }
-.body section.section-methodology { color: var(--ink-mid); font-size: 14px; line-height: 1.65; }
-.body section.section-methodology em { color: var(--ink-faint); font-style: italic; }
-.body section.section-methodology strong { color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; }
+.body section.section-methodology em { color: var(--em); font-style: italic; }
+.body section.section-methodology strong { color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 600; }
 
-.body pre.codeblock { background: var(--surface); border: 1px solid var(--rule); padding: 14px; font-family: var(--mono); font-size: 13.5px; color: var(--ink-mid); border-radius: 3px; }
-.body pre.mermaid { background: var(--surface); border-top: 1.5px solid var(--clay); border-bottom: 0.5px solid var(--rule); padding: 28px 24px 24px; margin: 22px 0 28px; min-height: 380px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
+.body pre.codeblock { background: var(--surface); border: 1px solid var(--rule); padding: 14px; font-family: var(--mono); font-size: 14px; color: var(--ink-mid); border-radius: 3px; }
+.body pre.mermaid { background: var(--surface); border-top: 2px solid var(--clay); border-bottom: 1px solid var(--rule); padding: 28px 24px 24px; margin: 22px 0 28px; min-height: 380px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
 .body pre.mermaid svg text { font-family: var(--serif) !important; }
 
 .foot-rule {
-  margin: 80px 32px 0;
-  padding: 22px 0;
+  margin: 96px 0 0;
+  padding: 28px 56px;
   border-top: 1px solid var(--rule);
-  text-align: center;
-  font-family: var(--serif);
-  font-size: 14px;
+  background: var(--paper);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  font-family: var(--mono);
+  font-size: 11px;
   color: var(--ink-faint);
-  font-style: italic;
+  letter-spacing: 0.04em;
+  font-style: normal;
   text-transform: none;
-  letter-spacing: 0;
+  text-align: left;
+}
+.foot-rule::before {
+  content: "Boardroom · An Inquiry";
+  font-family: var(--serif);
+  font-size: 14px;
+  color: var(--ink);
+  font-weight: 500;
+  font-style: normal;
+  letter-spacing: -0.005em;
+  margin-right: auto;
 }
 
 .placeholder {
@@ -483,16 +662,19 @@ html, body {
 }
 .rec-rule code { flex: 0 0 auto; }
 .rec-rule-line { flex: 1 1 auto; height: 1px; background: var(--rule); display: block; }
-.rec-priority-p0 .rec-rule-line { background: var(--clay); height: 1.5px; }
+.rec-priority-p0 .rec-rule-line { background: var(--clay); height: 2px; }
 .rec-action {
-  font-family: var(--serif); font-size: 26px; line-height: 1.3;
-  color: var(--ink); font-weight: 500; font-style: italic;
-  letter-spacing: -0.012em; margin: 0 0 20px; max-width: 68ch;
+  font-family: var(--serif); font-size: 22px; line-height: 1.3;
+  color: var(--ink); font-weight: 400; font-style: normal;
+  letter-spacing: -0.01em; margin: 0 0 14px; max-width: 68ch;
 }
+.rec-action em { font-style: italic; color: var(--em); }
 .rec-rationale {
-  font-family: var(--serif); font-size: 17px; line-height: 1.72;
-  color: var(--ink-soft); margin: 0 0 22px; max-width: 68ch;
+  font-family: var(--sans); font-size: 15px; line-height: 1.7;
+  color: var(--ink-mid); margin: 0 0 18px; max-width: 68ch;
 }
+.rec-rationale strong { color: var(--ink); font-weight: 600; }
+.rec-rationale em { font-style: italic; color: var(--em); }
 .rec-meta {
   display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
   margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink);
@@ -500,57 +682,271 @@ html, body {
 }
 .rec-meta-pair { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
 .rec-meta-label {
-  font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint);
+  font-family: var(--sans); font-size: 11px; color: var(--ink-faint);
   letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
 }
 .rec-meta-value { color: var(--ink); font-style: italic; font-weight: 500; }
 .rec-meta-sep { color: var(--ink-faint); }
 .rec-risk {
   display: flex; align-items: flex-start; gap: 8px;
-  font-family: var(--serif); font-size: 14.5px; line-height: 1.65;
+  font-family: var(--serif); font-size: 15px; line-height: 1.65;
   color: var(--ink-mid); margin: 0; font-style: italic;
 }
 .rec-risk-icon { flex: 0 0 auto; color: var(--clay); font-style: normal; }
 .rec-risk-text { flex: 1 1 auto; }
 .rec-risk-prefix {
-  font-family: var(--sans); font-style: normal; font-size: 10.5px;
+  font-family: var(--sans); font-style: normal; font-size: 11px;
   color: var(--clay-deep); letter-spacing: 0.14em; text-transform: uppercase;
   font-weight: 500; margin-right: 2px;
 }
 
-/* ─── New Questions · op-ed cards ─── */
+/* ─── Open Questions · essay-grid (mirrors the Anthropic reference) ───
+   Mirrors `mvp/screen-7-report-anthropic.html` `.open-q` two-column
+   grid: italic serif `decimal-leading-zero` numeral on the left
+   (column 1), question + attribution + why-prose stacked in column 2.
+   Drops the previous `.nq-rule` "Q1 ── line ── Surfaced by" header
+   bar — that read as a fussy editorial header against the otherwise
+   clean essay register. Top-rule between items, bottom-rule on the
+   last item, no card borders, no quote marks, no decorative lines. */
+.body section.section-new-questions ol {
+  counter-reset: nq;
+  list-style: none;
+  padding: 0;
+  margin: 28px 0 0;
+}
 .body section.section-new-questions li.nq-item {
-  padding: 0; margin: 52px 0 0; list-style: none; border: none;
+  counter-increment: nq;
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  column-gap: 24px;
+  row-gap: 0;
+  padding: 32px 0;
+  margin: 0;
+  border-top: 1px solid var(--rule);
+  list-style: none;
 }
-.body section.section-new-questions li.nq-item:first-child { margin-top: 28px; }
-.body section.section-new-questions li.nq-item::before { display: none; }
-.nq-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
-.nq-num {
-  font-family: var(--sans); font-size: 11px; font-weight: 500;
-  color: var(--clay); letter-spacing: 0.18em; flex: 0 0 auto;
+.body section.section-new-questions li.nq-item:last-child {
+  border-bottom: 1px solid var(--rule);
+}
+/* Italic decimal-leading-zero numeral · column 1, top-aligned with
+   the question's first line. */
+.body section.section-new-questions li.nq-item::before {
+  content: counter(nq, decimal-leading-zero);
+  grid-column: 1;
+  grid-row: 1;
+  font-family: var(--serif);
+  font-style: italic;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--clay);
+  letter-spacing: -0.005em;
+  align-self: start;
+  padding-top: 2px;
 }
-.nq-rule-line { flex: 1 1 auto; height: 1px; background: var(--rule); display: block; }
+/* Question · serif roman with italic-em-clay emphasis (signature).
+   Sits as the headline of each item; the why-prose follows in body
+   register, the attribution is a closing caption at the bottom. */
+.nq-question {
+  grid-column: 2;
+  grid-row: 1;
+  font-family: var(--serif);
+  font-size: 22px;
+  line-height: 1.35;
+  color: var(--ink);
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: -0.005em;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  max-width: 60ch;
+}
+.nq-question em { font-style: italic; color: var(--em); }
+.nq-question::before,
+.nq-question::after { display: none; }
+/* Why-it-matters · sans body, follows the question directly with a
+   tight 10px gap so the question + prose read as one connected
+   block. The "Why it matters:" prefix is stripped by the markdown
+   parser when it's wrapped in italic; if the brief writes a bare
+   `Why it matters:` line (no italic), it stays in the prose — the
+   tight gap prevents that label from feeling orphaned. */
+.nq-why {
+  grid-column: 2;
+  grid-row: 2;
+  font-family: var(--sans);
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--ink-mid);
+  margin: 10px 0 0;
+  max-width: 60ch;
+}
+.nq-why em { font-style: italic; color: var(--em); }
+/* Attribution · closing caption at the bottom of each item, like a
+   magazine byline. The legacy `.nq-rule` wrapper held Q1 + horizontal
+   line + attribution as a header bar; we strip Q1 + line and re-flow
+   the wrapper into row 3 (below why-text) so only the attribution
+   shows — italic serif small (matches the reference's `.obs-attr`
+   pattern). The wrapper collapses to `display: none` when there's no
+   attribution to avoid an empty bottom row. */
+.nq-rule { display: none; }
+.nq-rule:has(.nq-attribution) {
+  display: block;
+  grid-column: 2;
+  grid-row: 3;
+  margin: 12px 0 0;
+}
+.nq-num,
+.nq-rule-line { display: none; }
 .nq-attribution {
-  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px;
-  font-family: var(--serif); font-style: italic; font-size: 13.5px;
-  letter-spacing: 0; text-transform: none; color: var(--ink-faint); font-weight: 400;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  font-family: var(--serif);
+  font-size: 13px;
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--ink-faint);
+}
+.nq-attribution::before {
+  content: "—";
+  color: var(--ink-faint);
+  margin-right: 2px;
+  font-style: normal;
 }
 .nq-attribution-prefix { color: var(--ink-faint); }
-.nq-attribution-who { color: var(--ink); font-weight: 500; }
-.nq-question {
-  font-family: var(--serif); font-size: 28px; line-height: 1.32;
-  color: var(--ink); font-style: italic; font-weight: 500;
-  letter-spacing: -0.014em; margin: 0 0 20px; padding: 0;
-  border: none; background: transparent; max-width: 56ch; position: relative;
-}
-.nq-question::before {
-  content: "\201C"; color: var(--clay); font-size: 42px;
-  font-style: normal; font-weight: 500; margin-right: 6px;
-  vertical-align: -14px; line-height: 1; font-family: var(--serif);
-}
-.nq-question::after {
-  content: "\201D"; color: var(--ink-muted); font-size: 32px;
-  font-style: normal; margin-left: 4px; vertical-align: -10px;
-  line-height: 1; font-family: var(--serif);
-}
-.nq-why { font-family: var(--serif); font-size: 17px; line-height: 1.72; color: var(--ink-soft); margin: 0; max-width: 56ch; }
+.nq-attribution-who { color: var(--ink); font-weight: 500; font-style: italic; }
+
+/* ─── Metric strip · per-spine treatment ─────────────────────────
+   Inherits the spine-agnostic baseline in public/report.html's inline
+   <style> (Swiss-editorial layout: big numeral top, mute mono label
+   bottom, hairline grid, no surrounding card box). This block keeps
+   the anthropic spine's signatures — Charter serif numerals + clay
+   accent — without fighting the baseline structure. */
+.body .metric-strip-intro {
+  color: var(--clay-deep);
+}
+/* Big number · Charter serif (anthropic signature numerals). Slightly
+   heavier weight than the baseline 300 so the serif glyphs read at
+   size — Charter's regular weight is closer to the visual heft of a
+   sans 300. */
+.body .metric-value {
+  color: var(--ink);
+  font-family: "Charter", "Georgia",
+               "PingFang SC", "PingFang TC", "Songti SC", serif;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+}
+.body .metric-card[data-trend="up"]   .metric-value { color: var(--sage-deep, #4F6F4A); }
+.body .metric-card[data-trend="down"] .metric-value { color: var(--clay-deep); }
+.body .metric-trend[data-trend="up"]   { color: var(--sage-deep, #4F6F4A); }
+.body .metric-trend[data-trend="down"] { color: var(--clay-deep); }
+/* Label · clay-deep mono caps (the baseline already styles the
+   typography; we only override the colour). */
+.body .metric-label {
+  color: var(--clay-deep);
+}
+.body .metric-qualifier {
+  color: var(--ink-mid);
+  font-family: "Charter", "Georgia", serif;
+  font-style: italic;
+}
+.body .metric-attribution {
+  color: var(--ink-faint);
+}
+
+/* ─── Path comparison · per-spine treatment ──────────────────────
+   Anthropic-essay is the canonical reference for this component
+   (mvp/screen-7-report-anthropic.html "03 — A Comparison"). Stance
+   accents map to clay (weak) / sage-deep (strong) — Anthropic's
+   warm/cool dyad. Card surface is paper-soft (warm cream tint);
+   path name uses Charter italic-emphasis register. */
+.body .path-comparison-intro {
+  font-family: "Charter", "Georgia", "Songti SC", serif;
+  font-size: 15px;
+  color: var(--ink-soft);
+  font-style: normal;
+  letter-spacing: 0;
+}
+.body .path-comparison-intro em { color: var(--clay-deep); font-style: italic; }
+.body .path-comparison .path {
+  background: var(--paper-soft);
+  border: 1px solid var(--rule);
+  border-top-width: 3px;
+  padding: 32px;
+}
+.body .path-comparison .path-weak   { border-top-color: var(--clay); }
+.body .path-comparison .path-strong { border-top-color: var(--sage-deep, #6B7D5F); }
+.body .path-comparison .path-weak   .path-tag { color: var(--clay-deep); }
+.body .path-comparison .path-strong .path-tag { color: var(--sage-deep, #6B7D5F); }
+.body .path-comparison .path-tag {
+  font-family: var(--mono);
+  font-weight: 500;
+}
+.body .path-comparison .path-name {
+  font-family: "Charter", "Georgia", "Songti SC", serif;
+  font-size: 21px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--ink);
+  letter-spacing: -0.01em;
+  margin-bottom: 20px;
+}
+.body .path-comparison .path-name-sub {
+  font-family: "Charter", "Georgia", serif;
+  font-style: italic;
+  color: var(--clay-deep);
+  font-size: 14px;
+  margin-top: 6px;
+}
+.body .path-comparison .path li {
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--ink-soft);
+  border-bottom: 1px solid var(--rule-soft);
+}
+.body .path-comparison .path-weak   li::before { background: var(--clay); }
+.body .path-comparison .path-strong li::before { background: var(--sage-deep, #6B7D5F); }
+.body .path-comparison-implication {
+  font-family: "Charter", "Georgia", "Songti SC", serif;
+  font-style: italic;
+  color: var(--ink-mid);
+  font-size: 16px;
+  margin-top: 32px;
+}
+
+/* ─── Views-compared · per-spine · anthropic-essay ──────────────
+   Hairline-frame register · accent stripe on TOP (per project rule).
+   Spine has no separate warn token — clay-deep covers both emphasis
+   and caution; cards use lighter clay, divergence uses clay-deep so
+   the two sides read as related-but-distinct. */
+.body .vc-section-label { color: var(--clay-deep); border-color: var(--rule); }
+.body .views-compared-alignment .vc-card {
+  border-color: var(--rule);
+  border-top-color: var(--clay);
+}
+.body .vc-card-headline { font-family: "Charter", "Georgia", "Songti SC", serif; color: var(--ink); }
+.body .vc-chip { color: var(--ink-soft); border-color: var(--rule); }
+.body .vc-card-note { color: var(--ink-mid); }
+.body .vc-fork { border-color: var(--rule); border-top-color: var(--clay-deep); }
+.body .vc-fork-hinge { font-family: "Charter", "Georgia", serif; color: var(--ink); }
+.body .vc-side { border-color: var(--rule-soft, var(--rule)); }
+.body .vc-side-label { color: var(--clay-deep); }
+.body .vc-side-stance { color: var(--ink-mid); }
+.body .vc-fork-resolution { color: var(--ink-mid); border-top-color: var(--rule-soft, var(--rule)); }
+.body .vc-resolution-label { color: var(--ink-faint); }
+.body .vc-row-name { font-family: "Charter", "Georgia", serif; color: var(--ink); font-weight: 500; }
+.body .vc-row-lens { color: var(--ink-faint); }
+.body .vc-row-stance { color: var(--clay-deep); font-style: italic; }
+.body .vc-row-position { color: var(--ink-soft); }
+.body .vc-row-quote { font-family: "Charter", "Georgia", serif; color: var(--ink-mid); }
+.body .views-compared-synthesis {
+  border-color: var(--rule);
+  border-top-color: var(--ink-faint);
+}
+.body .vc-synthesis-body { font-family: "Charter", "Georgia", serif; color: var(--ink); }
+