/* CHART ROOM · the site's layout system.
   A persistent colophon on the left (mark, name, self-describing nav), one
   reading column on the right. One measure, hairlines instead of cards,
   labels in the mono voice. Tokens come from theme-lab.css. */

html { scroll-behavior: auto; }
body.v2 {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size, 15px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.v2 a { color: inherit; text-decoration: none; }

.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }

/* ---------- colophon ---------- */
.colophon {
  background: var(--pane-bg);
  color: var(--pane-fg);
  padding: 26px 24px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.mark {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  color: inherit;
}
.star { width: 38px; height: 38px; color: var(--pane-fg); grid-row: 1 / span 2; }
.mark-name { font-family: var(--font-serif); font-size: 17px; font-weight: 500; line-height: 1.15; }
.mark-role { color: var(--pane-dim); font-size: 12.5px; }
.colophon-nav { display: grid; gap: 14px; }
.colophon-nav a { display: block; color: var(--pane-fg); }
.colophon-nav a span { display: block; transition: color 0.15s ease; }
.colophon-nav a small { display: block; color: var(--pane-dim); font-size: 12px; }
.colophon-nav a:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pane-dim); }
.colophon-nav a[aria-current="page"] span::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  transform: translateY(-2px);
}
.colophon-foot { margin-top: auto; color: var(--pane-dim); font-size: 12px; }

/* ---------- page ---------- */
.page { padding: clamp(28px, 6vw, 72px) clamp(20px, 6vw, 80px) 80px; min-width: 0; }
.doc { max-width: 40rem; margin-inline: auto; }
.label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0;
}
.doc-head { margin-bottom: 26px; }
.doc-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: 10px;
}
.doc-prose p { margin-top: 14px; }
.doc-prose p:first-child { margin-top: 0; }
.doc-prose .lede { color: var(--ink); }
.doc-prose a, .block a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.doc-prose a:hover, .block a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }

.block { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line); }
.block > .label { display: block; }
.block .note { margin-top: 10px; color: var(--muted); max-width: 56ch; }

.table { margin-top: 12px; }
.table > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 4px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.table dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--soft); }
.table dd { color: var(--ink); overflow-wrap: anywhere; }

/* ---------- photos ---------- */
.photos { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.photos figure { margin: 0; }
.photos a { display: block; }
.photos img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.photos figcaption {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--soft);
  display: flex; justify-content: space-between; gap: 8px;
}

/* ---------- context pack ---------- */
.context-actions {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  font-family: var(--font-mono); font-size: 13px;
}
.linkish {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.linkish:hover { border-color: var(--accent); color: var(--accent-ink); }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.context-status { color: var(--soft); }

/* ---------- desktop: two panes ---------- */
@media (min-width: 800px) {
  .shell { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  /* The rail stays put while the page scrolls: an explicit height plus
     align-self:start, so the grid row cannot stretch it out of stickiness. */
  .v2 .colophon {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    padding: 30px 26px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .page { padding: clamp(40px, 8vh, 96px) clamp(28px, 5vw, 80px) 110px; }
}
@media (min-width: 1000px) {
  .shell { grid-template-columns: 300px minmax(0, 1fr); }
  .v2 .colophon { padding: 36px 32px 28px; }
  .page { padding: clamp(48px, 9vh, 112px) clamp(32px, 6vw, 96px) 120px; }
}
@media (min-width: 1280px) {
  .shell { grid-template-columns: 340px minmax(0, 1fr); }
  .doc { max-width: 42rem; }
}
@media (max-width: 799px) {
  .colophon-nav { grid-template-columns: 1fr 1fr; }
  .colophon-foot { display: none; }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .table > div { grid-template-columns: 1fr; gap: 1px; }
  .photos { grid-template-columns: 1fr; }
}

/* ---------- instruments (clean but creative) ---------- */
/* the pane is a chart: rhumb lines and faint rings radiate from the star */
.colophon { position: relative; isolation: isolate; --rose-x: 43px; --rose-y: 45px; }
@media (min-width: 800px) { .v2 .colophon { position: sticky; } }
.colophon::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg at var(--rose-x) var(--rose-y), color-mix(in srgb, var(--pane-fg) 7%, transparent) 0deg 0.3deg, transparent 0.3deg 22.5deg),
    repeating-radial-gradient(circle at var(--rose-x) var(--rose-y), color-mix(in srgb, var(--pane-fg) 6%, transparent) 0 1px, transparent 1px 88px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 100%);
}
@media (min-width: 800px) { .colophon { --rose-x: 45px; --rose-y: 49px; } }
@media (min-width: 1000px) { .colophon { --rose-x: 51px; --rose-y: 55px; } }

/* the bearing dot rides the ring as you read */
.star-bearing {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .star-bearing { transition: none; } }

/* the fix: position and ship's time, then the sign-off */
.colophon-foot span { display: block; }
.colophon-foot .fix { color: var(--pane-fg); font-variant-numeric: tabular-nums; }
.colophon-foot .fix-line { font-style: italic; margin-top: 8px; }
.colophon-foot .fix-line + span { margin-top: 2px; }

/* a chart's scale bar under the name instead of a plain rule */
.doc-head { position: relative; padding-bottom: 20px; }
.doc-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 50px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 10px) left bottom / 100% 4px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 100% 1px no-repeat;
}
.doc-head + .doc-prose { margin-top: 26px; }

/* ---------- conditions line: the log's status entry ---------- */
.conditions {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.conditions-label {
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--soft);
  margin-right: 8px;
}
.conditions-fix { color: var(--soft); }

/* ---------- the logbook: writing index as a ship's log ---------- */
.log { list-style: none; margin-top: 18px; border-top: 1px solid var(--line-strong); }
.log-head,
.log-row {
  display: grid;
  grid-template-columns: 7.5rem 9.5rem minmax(0, 1fr);
  gap: 4px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.log-head {
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}
.log-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.log-bearing { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.log-bearing a { color: inherit; text-decoration: none; }
.log-bearing a:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); }
.log-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}
.log-title:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
.log-note { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.log-year { padding: 22px 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 640px) {
  .log-head { display: none; }
  .log-row { display: block; }
  .log-date, .log-bearing { display: inline; margin-right: 12px; }
  .log-remarks { display: block; margin-top: 4px; }
}

/* ---------- uncharted waters: the 404 ---------- */
.uncharted .bearings dt a { font-family: var(--font-sans); font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.18em; }
.uncharted .bearings dt a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
@keyframes drift { to { transform: rotate(360deg); } }
.uncharted .star-bearing { animation: drift 26s linear infinite; }
@media (prefers-reduced-motion: reduce) { .uncharted .star-bearing { animation: none; } }

/* ==========================================
   LEGACY MARKUP INSIDE THE SHELL
   Topic pages, guides, essays and the media kit keep their markup; these
   rules re-set that markup in the chart-room voice: no bands, no cards,
   labels in mono, one measure.
   ========================================== */
.doc--wide { max-width: 46rem; }
.v2 .wrap, .v2 .container { width: auto; max-width: none; margin: 0; padding: 0; }
.v2 .section-motif { display: none; }
.v2 .home-hero { padding: 0; }
.v2 .hero-minimal { display: block; }
.v2 .hero-minimal > .profile-avatar { display: none; }
.v2 .hero-kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 10px;
  text-shadow: none;
}
.v2 .hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  max-width: none;
}
.v2 .hero-subtitle { color: var(--ink); font-size: inherit; line-height: 1.6; max-width: none; }
.v2 .hero-actions { margin-top: 14px; gap: 10px 18px; font-family: var(--font-mono); font-size: 13px; }
.v2 .text-cta, .v2 .secondary-cta, .v2 .back-link, .v2 .more-link { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); border: 0; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.18em; }
.v2 .text-cta:hover, .v2 .secondary-cta:hover, .v2 .back-link:hover, .v2 .more-link:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }

.v2 .section { padding: 0; margin-top: 52px; padding-top: 16px; border-top: 1px solid var(--line) !important; background: transparent; }
.v2 .section--paper { background: transparent; }
.v2 .section-header { margin: 0; }
.v2 .section-label, .v2 .eyebrow, .v2 .topic-eyebrow, .v2 .essay-discovery-kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 8px;
}
.v2 .section-title, .v2 .h-section {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  max-width: none;
  margin: 0;
}
.v2 .section-sub { margin-top: 8px; color: var(--muted); max-width: 60ch; }
.v2 .prose-content { margin-top: 14px; }
.v2 .prose-content p { font-size: inherit; line-height: 1.6; }
.v2 .prose-content p + p { margin-top: 12px; }
.v2 .prose-content h2, .v2 .prose h2 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; margin: 26px 0 8px; }
.v2 .prose-content h3, .v2 .prose h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 500; margin: 20px 0 6px; }

/* lists that were already hairline rows stay rows; things that were cards become rows */
.v2 .faq-item, .v2 .answer-list > div, .v2 .essay-row, .v2 .in-brief-row { border-top: 1px solid var(--line); padding: 14px 0; }
.v2 .faq-item h3, .v2 .answer-list strong, .v2 .essay-title-text { font-family: var(--font-serif); font-size: 17px; font-weight: 500; }
.v2 .answer-list span, .v2 .essay-date, .v2 .signal-item span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.v2 .bio-card, .v2 .definition-card, .v2 .topic-card, .v2 .media-topic-grid article, .v2 .media-link-grid a, .v2 .project, .v2 .essay-discovery, .v2 .audit-tool, .v2 .in-brief {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 0;
  margin: 0;
}
.v2 .bio-library, .v2 .definition-library, .v2 .media-topic-grid, .v2 .media-link-grid { display: block; margin-top: 12px; }
.v2 .bio-card-heading span, .v2 .definition-card h3, .v2 .media-topic-grid h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 500; }
.v2 .bio-card-heading button, .v2 .audit-button, .v2 .media-contact-button, .v2 .btn-primary, .v2 .btn-ghost {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; cursor: pointer; text-shadow: none;
}
.v2 .bio-card-heading button:hover, .v2 .audit-button:hover, .v2 .media-contact-button:hover { border-color: var(--accent); color: var(--accent-ink); }
.v2 .audit-button--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.v2 blockquote { border-left: 2px solid var(--line-strong); padding-left: 14px; color: var(--muted); font-style: italic; }
.v2 .social-links-list, .v2 .channels { gap: 10px 18px; }
.v2 .social-link-item, .v2 .channel { font-family: var(--font-mono); font-size: 13px; font-weight: 500; border: 0; text-decoration: underline; text-decoration-color: var(--line-strong); }
.v2 .profile-photo-grid { gap: 12px; }
.v2 .profile-photo-card > a { border-radius: 3px; box-shadow: none; }
.v2 .profile-photo-card figcaption { font-family: var(--font-mono); font-size: 12px; }
.v2 table { font-size: 14px; }
.v2 .table-scroll { border: 0; }
.v2 th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.v2 .guide-breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--soft); }
.v2 .essay-body { font-size: inherit; }

/* the homepage author bridge, quieted */
.v2 .author-bridge { background: transparent; border: 0; box-shadow: none; }
.v2 .author-bridge-inner { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 0; align-items: center; }
.v2 .author-portrait-frame, .v2 .author-portrait { width: 96px; height: 96px; border-radius: 50%; }
.v2 .author-bridge-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.v2 .author-bridge-name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin-top: 4px; }
.v2 .author-bridge-role { font-family: var(--font-mono); font-size: 12.5px; color: var(--soft); }
.v2 .author-bridge-bio { margin-top: 6px; color: var(--muted); }
.v2 .author-bridge-link { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }

/* ---------- homepage ---------- */
.doc-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.doc-actions a, .block .doc-actions a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.18em; }
.doc-actions a:hover, .block .doc-actions a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
.claim { margin-top: 10px; font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.block .doc-prose { margin-top: 12px; color: var(--muted); }
.block .doc-prose p { margin-top: 10px; }
.block .doc-prose p:first-child { margin-top: 0; }

/* latest entries, kept in the feed sync's markup */
.v2 .essays { list-style: none; margin-top: 10px; border-top: 1px solid var(--line-strong); }
.v2 .essays li + li { border-top: 0; }
.v2 .essay {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 2px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.v2 .essay-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--soft); letter-spacing: 0; text-transform: none; white-space: nowrap; padding-top: 3px; }
.v2 .essay-title { font-family: var(--font-serif); font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.v2 .essay:hover .essay-title { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
.v2 .essay-summary { grid-column: 2; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) { .v2 .essay { grid-template-columns: 1fr; } .v2 .essay-summary { grid-column: 1; } }

/* building */
.v2 .projects { margin-top: 10px; }
.v2 .project-top { display: flex; align-items: baseline; gap: 12px; }
.v2 .project-name { font-family: var(--font-serif); font-size: 19px; font-weight: 500; }
.v2 .project-name a { color: var(--ink); text-decoration: none; }
.v2 .project-name a:hover { color: var(--accent-ink); }
.v2 .project-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; }
.v2 .project-desc { margin-top: 6px; color: var(--muted); max-width: none; font-size: inherit; }
.v2 .ext-arrow { color: var(--soft); }
.v2 .author-bridge { margin-top: 52px; padding-top: 16px; border-top: 1px solid var(--line); }
.v2 .author-bridge-inner { max-width: none; }

/* ==========================================
   MOTION · page-to-page and small reveals
   Cross-document view transitions: the colophon persists, the page fades
   and lifts. Browsers without support simply navigate.
   ========================================== */
@view-transition { navigation: auto; }
.colophon { view-transition-name: colophon; }
.page { view-transition-name: page; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(-3px); } }
::view-transition-old(page) { animation: 160ms cubic-bezier(0.4, 0, 1, 1) both vt-fade-out; }
::view-transition-new(page) { animation: 300ms 40ms cubic-bezier(0.2, 0.8, 0.2, 1) both vt-fade-in-up; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================
   READING PAGES · essays and guides
   A slimmer rail, one calm measure, larger type, and on wide screens the
   In Brief notes sit beside the text as marginalia.
   ========================================== */
body[data-page-type="essay"].v2 .colophon-nav a small,
body[data-page-type="guide"].v2 .colophon-nav a small { display: none; }
body[data-page-type="essay"].v2 .colophon-nav,
body[data-page-type="guide"].v2 .colophon-nav { gap: 9px; }
@media (min-width: 800px) {
  body[data-page-type="essay"].v2 .shell,
  body[data-page-type="guide"].v2 .shell { grid-template-columns: 220px minmax(0, 1fr); }
  body[data-page-type="essay"].v2 .colophon,
  body[data-page-type="guide"].v2 .colophon { padding: 30px 24px 24px; }
}
body[data-page-type="essay"].v2 .doc { max-width: 38rem; }
body[data-page-type="guide"].v2 .doc { max-width: 48rem; }
body[data-page-type="essay"].v2 .hero-title { font-size: clamp(30px, 4.2vw, 40px); line-height: 1.1; }
.v2 .essay-byline { margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--soft); }
.v2 .essay-hero-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 13px; }
.v2 .essay-canonical-note {
  margin: 28px 0 22px; padding: 10px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: transparent; border-radius: 0;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--soft);
}
.v2 .essay-canonical-note p { margin: 0; font-size: inherit; }
.v2 .essay-body { max-width: none; font-size: 17px; line-height: 1.7; }
.v2 .essay-body p { font-size: inherit; line-height: inherit; }
.v2 .essay-body p + p { margin-top: 18px; }
.v2 .essay-body h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.25; margin: 36px 0 10px; max-width: none; }
.v2 .essay-body h2 strong, .v2 .essay-body h3 strong { font-weight: inherit; }
.v2 .essay-body h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; margin: 28px 0 8px; }
.v2 .essay-body img { border: 1px solid var(--line-strong); border-radius: 3px; }
.v2 .essay-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.18em; }
.v2 .essay-body a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
.v2 .in-brief { margin: 0 0 26px; padding: 14px 0 6px; border-top: 1px solid var(--line); background: transparent; border-radius: 0; box-shadow: none; }
.v2 .in-brief h2 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin: 0 0 4px; }
.v2 .in-brief-row { border: 0; padding: 8px 0; margin: 0; }
.v2 .in-brief-row h3 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); margin: 0 0 3px; }
.v2 .in-brief-row p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.v2 .essay-discovery { margin-top: 44px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; box-shadow: none; }
.v2 .essay-discovery > h2 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; margin: 4px 0 0; }
.v2 .essay-discovery-group > h3 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); margin: 18px 0 4px; }
.v2 .essay-topic-links, .v2 .essay-related-links { display: block; }
.v2 .essay-topic-link, .v2 .essay-related-link { display: block; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; box-shadow: none; color: var(--ink); text-decoration: none; }
.v2 .essay-topic-link strong, .v2 .essay-related-link strong { display: block; font-family: var(--font-serif); font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.v2 .essay-topic-link span, .v2 .essay-related-link span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); }
.v2 .essay-related-link .essay-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); margin-bottom: 2px; }
.v2 .essay-topic-link:hover strong, .v2 .essay-related-link:hover strong { color: var(--accent-ink); }
.v2 .essay-foot { font-family: var(--font-mono); font-size: 12.5px; color: var(--soft); }
@media (min-width: 1180px) {
  body[data-page-type="essay"].v2 .doc { max-width: 62rem; }
  body[data-page-type="essay"].v2 .home-hero .hero-text-block { max-width: 38rem; }
  body[data-page-type="essay"].v2 #essay > .container {
    display: grid;
    grid-template-columns: minmax(0, 38rem) 17rem;
    column-gap: 56px;
    align-items: start;
  }
  body[data-page-type="essay"].v2 .essay-canonical-note { grid-column: 1; grid-row: 1; }
  body[data-page-type="essay"].v2 .essay-body { grid-column: 1; grid-row: 2; }
  body[data-page-type="essay"].v2 .essay-discovery { grid-column: 1; grid-row: 3; }
  body[data-page-type="essay"].v2 .in-brief { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 40px; margin: 0; padding-top: 0; border-top: 0; }
}

/* The reading pages open straight into the text: the body section carries no
   rule of its own, so the hero and the first note do not stack two lines with
   an empty band between them. */
body[data-page-type="essay"].v2 #essay,
body[data-page-type="guide"].v2 #guide {
  margin-top: 0;
  padding-top: 0;
  border-top: 0 !important;
}
body[data-page-type="essay"].v2 .essay-canonical-note { margin-top: 34px; }

/* ---------- topics, as a plain list ---------- */
.topic-list { list-style: none; margin-top: 12px; border-top: 1px solid var(--line-strong); }
.topic-list li { border-bottom: 1px solid var(--line); }
.topic-list a { display: block; padding: 13px 0; color: inherit; text-decoration: none; }
.topic-list-name { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }
.topic-list-def { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.topic-list a:hover .topic-list-name { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }